Vue前端框架

Vue前端框架Vue js 是一款渐进式的 JavaScript 前端框架 由尤雨溪 EvanYou 于 2014 年创建 主要用于构建用户界面

大家好,欢迎来到IT知识分享网。

第一章 vue概念

1.简介

  1. Vue.js是一个构建用户界面的渐进式框架。

2.主要构成部分

  • Vue实例:是Vue.js应用程序中的主要构建块。每个Vue应用程序都会启动一个根 Vue 实例,可以将它看作一个“ComponentTree”,所有组件都是这个根实例下的子根实例。
  • 模板:Vue.js使用基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。
  • 组件:组件是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码。

第二章 vue入门

1.入门案例

<script type="module">//使用js的导入导出 //导入vue模块 import { 
     createApp,ref} from "./vue3.js"; //创建vue实例 createApp({ 
      //同等脚手架中<script setup> setup(){ 
      const count = ref(100) function dian() { 
      alert("") } return { 
      //无论是属性还是方法都需要返回 count,dian } }, }).mount("#app") //指定被vue管理的元素范围,页面中有id为app的元素 </script> 

第三章 常用指令

1.v-for

作用:这个指令用于根据数组循环渲染一个元素。

语法:v-for = “(item,index) in items”

参数说明

items 为遍历的数值

item 为遍历出来的元素

indexs 为下标,从0开始;可以省略,省略语法 v-for = “item in items”

示例

在需要循环的元素中添加v-for指令

<tr v-for="(article,index) in articleList"> <td>{ 
  {article.title}}</td> <td>{ 
  {article.category}}</td> <td>{ 
  {article.time}}</td> <td>{ 
  {article.state}}</td> <td> <button>编辑</button> <button>删除</button> </td> </tr> 

在data中创建数组

 <script type="module"> //导入vue模块 import { 
      createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' //创建应用实例 createApp({ 
      data() { 
      return { 
      articleList:[ { 
      title:"医疗反腐绝非砍医护收入", category:"时事", time:"2023-09-5", state:"已发布" }, { 
      title:"中国男篮缘何一败涂地?", category:"篮球", time:"2023-09-5", state:"草稿" }, { 
      title:"华山景区已受大风影响阵风达7-8级,未来24小时将持续", category:"旅游", time:"2023-09-5", state:"已发布" } ] } } }).mount("#app")//控制页面元素 </script> 

2.v-bind

作用:这个指令用于绑定一个属性值

语法:v-bind:属性名=“属性值”

简化:属性名=“属性值”

示例

使用v-bind进行属性的绑定【href中的url要和vue实例return中的键一致】

 <div id="app"> <!-- v-bind:href="url" 可写成 :href="url"--> <a v-bind:href="url">黑马官网</a> </div> 

vue中只需要定义url这个属性

 <script type="module"> //引入vue模块 import { 
      createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' //创建vue应用实例 createApp({ 
      data() { 
      return { 
      url:"https://www.baidu.com/" } } }).mount("#app")//控制html元素 </script> 

3.v-if 、v-else-if、v-else

作用:这指令,都是用来控制元素显示与隐藏的

语法:v-if=“表达式” 表达式为true显示 false隐藏

和v-show的区别:v-if适用于一个元素要么出现要么不出现,show适用于频繁切换的场景比如鼠标访导航条上展示对应的信息。

示例

如果消费等级小于1就展示9.9 小于2就展示19.9 否则29.9

 <div id="app"> 手链价格为: <span v-if="level<1">9.9</span> <span v-else-if="level<2">19.9</span> <span v-else>29.9</span> </div> 

两个变量 name and level

 <script type="module"> //导入vue模块 import { 
      createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' //创建vue应用实例 createApp({ 
      data() { 
      return { 
      name:"张三", level:2 } } }).mount("#app")//控制html元素 </script> 

4.v-on

作用:这个指令用于监听DOM事件

语法:v-on:事件名=“方法”

简写:@事件名=“方法”

示例

在vue实例中创建methods定义方法,方法格式【方法名:function (){方法内容}】

 <script type="module"> //导入vue模块 import { 
      createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' //创建vue应用实例 createApp({ 
      data() { 
      return { 
      //定义数据 } }, methods:{ 
      money:function (){ 
      alert("送你一钱!!") }, hua:function (){ 
      alert("送你一朵花!!") } } }).mount("#app");//控制html元素 </script> 
 <div id="app"> <button v-on:click="money">点我有惊喜</button> &nbsp; <button @click="hua">再点更惊喜</button> </div> 

5.v-model

作用:这个指令创建了双向数据绑定,当表单输入和应用状态之间需要互动时,非常有用。

语法:v-model=“属性名”

示例

 <script type="module"> //导入vue模块 import { 
      createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' //创建vue应用实例 createApp({ 
      data() { 
      return { 
      //定义数据 name:"", state:"", articleList: [{ 
      title: "医疗反腐绝非砍医护收入", category: "时事", time: "2023-09-5", state: "已发布" }, { 
      title: "中国男篮缘何一败涂地?", category: "篮球", time: "2023-09-5", state: "草稿" }, { 
      title: "华山景区已受大风影响阵风达7-8级,未来24小时将持续", category: "旅游", time: "2023-09-5", state: "已发布" }] } },methods:{ 
      clear:function(){ 
      //this代表vue实例 this.name = "" this.state = "" } } }).mount("#app")//控制html元素 </script> 
 <div id="app"> 文章分类: <input type="text" v-model="name"/><span>{ 
  {name}}</span> 发布状态: <input type="text" v-model="state"/><span>{ 
  {state}}</span> <button @click="clear">搜索</button> <br /> <br /> <table border="1 solid" colspa="0" cellspacing="0"> <tr> <th>文章标题</th> <th>分类</th> <th>发表时间</th> <th>状态</th> <th>操作</th> </tr> <tr v-for="(article,index) in articleList"> <td>{ 
  {article.title}}</td> <td>{ 
  {article.category}}</td> <td>{ 
  {article.time}}</td> <td>{ 
  {article.state}}</td> <td> <button>编辑</button> <button>删除</button> </td> </tr> </table> </div> 

6.常用指令列表

指令 说明
v-for 这个指令用于根据数组循环渲染一个元素。
v-bind 这个指令用于绑定一个属性,或者一个对象的属性到元素的属性。
v-if v-else-if v-else 这是一个条件指令,用于根据表达式的值在DOM中渲染或销毁元素。
v-show 另一个条件指令,与v-if相似,但无论条件是真或假,都会渲染元素(将元素设置为display:nonedisplay:block)。
v-model 这个指令创建了双向数据绑定,当表单输入和应用状态之间需要互动时,非常有用。
v-on 这个指令用于监听DOM事件,有一个简写是”@”
v-html 这个指令用于输出HTML代码,而不仅仅是文本。
v-text 与插值表达式({
{ }})类似,更新元素的 textContent。
v-once 这个指令渲染一次性的静态内容。在之后的重新渲染中,元素及其所有的子节点将被视为静态内容并跳过。
v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始的Mustache标签。

第四章 axios的使用

1.简介

Axios 提供了一种简单的方式去发送 HTTP 请求,使得我们在前端应用中获取、发布或者更新数据变得更加容易。

2.语法

data中的数据是json格式

 axios.请求方式(url,data,config).then(result=>{ 
    console.log(result.data); }).catch(err=>{ 
    console.log(err); }) 

第五章 vue工程的创建

1.工程目录

目录 说明
node_modules/ 存储所有的项目依赖
npm install 安装的所有包都会被放在这个目录下。
public/ 这个文件夹包含了不会被Webpack处理的静态资源
src/ 这个目录存储你的源代码
src/main.js 这是应用的入口文件,负责创建Vue实例。
src/App.vue 这是一个根级别的Vue组件
src/main.js 入口文件
components/ 这个目录用于存储应用中小型且通常可复用的组件。
assets/ 这个目录用于存储你需要的静态资源,如images/目录存放图片、styles/目录存放样式文件等。
router/ 如果你的项目使用了 vue-routerrouter 目录的 index.js 文件用于配置路由。
store/ 如果你的项目使用了 vuex,那么 store 目录的 index.js 文件通常包含着 Vuex store 的文件。
views/ 这个目录用于存放应用的页面级别的组件。
package.json 这个文件包含了项目的元数据,如项目的名称、版本、描述、作者等信息,还包含了项目的依赖信息和一些可执行的脚本。
vue.config.js 这个文件是可选的,包含了对vue CLI 的项目进行专门配置的一些代码,如修改webpack配置、增加CSS预处理器等。

2.api风格

Vue.js有两种不同的API风格,分别被称为选项式API组合式API

选项式API: Vue 2.0在提供开发功能时采用的是选项式API

缺点:虽然这对于较小的项目可能简单易理解,但是随着项目复杂度的增长,一个组件的代码可能会在不同的选项中散布,这使得逻辑的维护和重用变得困难。

组合式API: Vue 3.0新增了组合式API

优点:好处是可以让代码的组织更加灵活,代码的逻辑结构更加清晰

3.vue项目中使用axios

npm指令npm install axios

这条指令会把axios安装到node_modules目录下

进行导入:

<script setup> import axios from "axios" </script> <template> </template> <style scoped> </style> 

4.vue项目中使用ref

简介ref函数在Vue.js中的作用主要是创建可响应的数据。

语法:import { ref } from ‘vue’

5.入门案例

在App.vue把自己编写的文件导入

<script setup> import Artice from './Artice.vue'; </script> <template> <Artice/> </template> <style scoped> </style> 

自己编写的vue文件

<script setup> //导入axios import axios from "axios" //引入ref import { 
     ref} from "vue" //创建数组用来接收数据 const list = ref([]); //分页条件 const tiao = ref({ 
      "category":"", "state":"" }) //搜索方法 const sou = function() { 
      axios.get("http://localhost:8080/article/search",{ 
      params:{ 
     ...tiao.value} }).then(result=>{ 
      list.value = result.data }).catch(err=>{ 
      }) } //获取数据list axios.get("http://localhost:8080/article/getAll").then(result=>{ 
      list.value = result.data }).catch(err=>{ 
      }) </script> <template> <div> 文章分类: <input type="text" v-model="tiao.category"> 发布状态: <input type="text" v-model="tiao.state"> <button @click="sou">搜索</button> <br /> <br /> <table border="1 solid" colspa="0" cellspacing="0"> <tr> <th>文章标题</th> <th>分类</th> <th>发表时间</th> <th>状态</th> <th>操作</th> </tr> <tr v-for="f in list"> <td>{ 
  { f.title }}</td> <td>{ 
  { f.category }}</td> <td>{ 
  { f.time }}</td> <td>{ 
  { f.state }}</td> <td> <button>编辑</button> <button>删除</button> </td> </tr> </table> </div> </template> <style scoped> </style> 

6.简化案例

request.js文件

//定制请求的实例 import axios from "axios" const baseurl = "/api"; const instance = axios.create({ 
    baseURL: baseurl });//创建axios对象 //添加响应拦截器 //这是一个在响应被then或catch处理之前处理响应的函数 instance.interceptors.response.use( result => { 
    return result.data }, err => { 
    alert("出现异常") return Promise.reject(err);//异步转化为失败 } ) export default instance 

artice.js文件

//导入request.vue文件 import request from "@/utils/request" //获取所有文章数据 export function getallservice() { 
    //发送异步请求 return request.get("/article/getAll") } //根据文章内容搜索的数据 export function searchservice(shu) { 
    //发送异步请求 return request.get("/article/search", { 
    params: shu }) } 

Artice.vue文件【这是vue文件】

<script setup> import { 
   getallservice,searchservice} from "@/api/artice" import { 
   ref} from "vue" const list = ref([]); //使用async,await开启同步 const getall = async function(){ 
    let data = await getallservice(); list.value = data; } getall(); const tiao = ref({ 
    "category":"", "state":"" }) const sou = async function() { 
    let data = await searchservice({ 
   ...tiao.value}) list.value = data } </script> <template> <div> 文章分类: <input type="text" v-model="tiao.category"> 发布状态: <input type="text" v-model="tiao.state"> <button @click="sou">搜索</button> <br /> <br /> <table border="1 solid" colspa="0" cellspacing="0"> <tr> <th>文章标题</th> <th>分类</th> <th>发表时间</th> <th>状态</th> <th>操作</th> </tr> <tr v-for="f in list"> <td>{ 
   { 
    f.title }}</td> <td>{ 
   { 
    f.category }}</td> <td>{ 
   { 
    f.time }}</td> <td>{ 
   { 
    f.state }}</td> <td> <button>编辑</button> <button>删除</button> </td> </tr> </table> </div> </template> <style scoped> </style> 

第六章 npm指令

1.列表

指令 用处
npm init vue@latest 开始创建vue工程
npm run dev 启动vue项目,默认端口5173
npm install axios vue项目安装axios
npm install element-plus –save 安装element-plus
npm install vue-router@4 安装路由
npm install 安装vue依赖
npm install qs 安装qs

第七章 跨域问题

1.跨域是什么?

跨域就是不同协议不同域名不同端口发出的ajax请求会失败!!!

2.具体实现步骤

在vite.config.js文件中配置以下代码

 server: { 
    proxy: { 
    '/api': { 
   //获取路径中包含api的请求 target: "http://localhost:8080",//后台服务所在的源 changeOrigin: true,//是否修改源 rewrite: (path) => path.replace(/^\/api/, '')//修改后的路径 } } } 

【注意以上代码都是紧跟defineConfig配置的】

第八章 路由

1.简介

它会根据当前的 URL 或其他条件,判断应该显示哪一个视图或组件。一种常见的方法是使用URL的路径部分来决定,比如 “/home” 对应主页,“/user” 对应用户页面等等。

2.使用

在src目录下创建router文件夹,在router文件中创建index.js,编写以下代码

//导入路由 import { 
    createRouter, createWebHistory } from "vue-router" //导入组件 import LoginVue from '@/views/Login.vue'; import LayoutVue from '@/views/Layout.vue'; //定义关系 const routes = [ { 
    path: '/login', component: LoginVue }, { 
    path: '/', component: LayoutVue } ] //创建路由器 const router = createRouter({ 
    history: createWebHistory(), routes: routes }) //导出路由 export default router 

在main.js文件中配置

//路由文件的位置 import router from '@/router/index.js' app.use(router) 

再根组件中配置

<script setup> </script> <template> <!--使用router-vier组件--> <router-view/> </template> <style scoped> </style> 

3.子路由

假设我们有一个用户列表页,点击列表项后展示用户详情页,这时候用户详情页就可以作为用户列表页的子路由。

在router文件夹中index.js文件配置children

//定义关系 const routes = [ { 
    path: '/login', component: LoginVue }, { 
    //redirect:默认的路径 path: '/', component: LayoutVue, redirect: "/artice/manager", children: [ //子路由 { 
    path: '/artice/category', component: ArticleCategoryVue }, { 
    path: '/artice/manager', component: ArticleManageVue }, { 
    path: '/user/info', component: UserInfoVue }, { 
    path: '/user/avatar', component: userAvatarVue }, { 
    path: '/user/resetPassword', component: UserResetPasswordVue } ] } ] 

配置子路由

 <el-menu-item index="/artice/category"> <el-icon> <Management /> </el-icon> <span>文章分类</span> </el-menu-item> 

4.useRouter、useRoute

useRouteuseRouter 是 Vue Router 提供的两个API,用于在 Vue 中访问路由信息和路由对象。

import { 
   useRouter,useRoute} from "vue-router" const router = useRouter(); const route = useRoute(); 
useRoute常用方法

useRouteuseRoute 是一个函数,它返回一个包含当前路由信息的响应式对象

import { 
    useRoute } from 'vue-router'; const route = useRoute(); route.path: 获取当前路径 route.params: 获取当前路由的参数。 route.query: 获取当前路由的查询参数。 route.meta: 获取当前路由的元信息。 
useRouter常用方法
import { 
    useRouter } from 'vue-router'; router.push: 导航到一个新的 URL。 router.replace: 替换当前路由。 router.go: 前进或后退历史记录中的指定步数。 router.back: 后退一步。 router.forward: 前进一步。 router.currentRoute: 获取当前活动路由的路由信息对象。 

5.带参数的路由

在路由配置中,使用 : 来表示动态参数。例如:

 path: '/xiang/:id', // 使用 :id 作为动态参数 

第九章 pinia状态管理库

1.简介

pinia是vue的专属管理库,他允许你跨组件或页面共享状态

第10章 qs的使用

qs就是把js对象装换为post请求数据的一个工具

1.使用

引入qs

import qs from 'qs'; 

进行装换

 qs.stringify(fromData) 

第十一章 iconfont矢量图

https://www.iconfont.cn/?spm=a313x.search_index.i3.2.4f863a81dhE331

1.使用

找到想要的资源加入购物车

齐全了之后点击下载代码

解压出来拖进vue工程中的public目录或src中的assets中

在main.js中引入 import “@/assets/iconfont/iconfont.css”

根据下载包中的示例进行操作

第十二章 父组件向子组件传递数据

父组件

<template> <div> <h2>父组件</h2> <ChildComponent :shu="shu" /> </div> </template> <script setup> import ChildComponent from './ChildComponent.vue'; const shu = "这是父组件的数据"; </script> 

子组件

<template> <div> <h3>子组件</h3> <p>{ 
  { shu }}</p> </div> </template> <script setup> // 在子组件中声明 props const props = defineProps({ shu: String // 假设 shu 是字符串类型的数据 }); </script> 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/124792.html

(0)
上一篇 2025-10-03 16:10
下一篇 2025-10-03 16:15

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信