1. IT分享知识网首页
  2. 开发语言
  3. Vue

Vue开发教程

老牧童 • • Vue, 未分类

Vue开发教程Vue 开发教程 vue 开发

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

Vue开发教程

Vue2

插值表达式

<p>{ 
   { 
   `msg`}}</p> //变量 <p>{ 
   { 
   `msg+1`}}</p> //变量 // 不能是语句：{ 
   {if语句}}

Vue指令

指令：带有V-前缀的特殊标签属性

v-show

  1. 作用： 控制元素显示隐藏
  2. 语法： v-show = “表达式” 表达式值 true 显示， false 隐藏
  3. 原理： 切换 display:none 控制显示隐藏
  4. 场景： 频繁切换显示隐藏的场景

v-if

  1. 作用： 控制元素显示隐藏（条件渲染）
  2. 语法： v-if = “表达式” ；表达式值 true 显示， false 隐藏
  3. 原理： 基于条件判断，是否 创建 或 移除 元素节点
  4. 场景： 要么显示，要么隐藏，不频繁切换的场景

v-show和v-if的对比

1.编译时机：v-if是在编译时根据条件判断是否渲染元素，而v-show是在运行时根据条件控制元素的显示与隐藏。

2.性能消耗：由于v-if是在编译时动态添加或移除元素，所以它的性能消耗相对较高，尤其在条件切换频繁的情况下。而v-show只是通过修改元素的display属性来控制显示与隐藏，所以它的性能消耗较低。

3.初始渲染时：在初始渲染时，如果初始条件为假，v-if指令渲染的元素会被完全跳过，不会被渲染到DOM中。而v-show指令渲染的元素会被渲染到DOM中，默认是display:none的状态。

4.切换渲染时：当条件切换时，v-if指令会根据条件动态创建或销毁元素，从而实现显示与隐藏的效果。而v-show指令只是通过修改元素的display属性来控制元素的显示与隐藏，不会改变元素的结构。

v-else和v-else-if

  1. 作用： 辅助 v-if 进行判断渲染
  2. 语法： v-else v-else-if = “表达式”
  3. 注意： 需要紧挨着 v-if 一起使用

v-on

  1. 作用： 注册事件= 添加监听 + 提供处理逻辑
  2. 语法：
  1. 简写：@事件名
<button v-on:click="count++">按钮</button> <button @click="count++">按钮</button>
  1. 注意：methods函数内的 this 指向 Vue 实例

v-bind

  1. 作用： 动态的设置html的标签属性→ src url title
  2. 语法： v-bind:属性名=“表达式”
  3. 注意： 简写形式 :属性名=“表达式”
  4. v-bind也可控制style和class
<img v-bind:src="url"> <img :src="url"> // 如果为ture则有这个类，否则没有这个类 <div class="box" :class =="{类名1: 布尔值, 类名2: 布尔值}"> </div> // 数组中的类均会添加到盒子中 <div class="box" :class =="[类名1，类名2，类名3]"> </div> // style样式控制 <div class="box" :style =="{CSS属性名1: CSS属性值,CSS属性名2: CSS属性值，CSS属性名3: CSS属性值}"> </div>

v-for

  1. 作用： 基于数据循环， 多次渲染整个元素
  2. 遍历数组语法：v-for = “(item, index) in 数组” 或者 v-for = “item in 数组”
  3. v-for 中的key：key属性 = “唯一标识”。
  4. key的作用：v-for采用“就地更新”。给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
  5. key 的值只能是 字符串 或 数字类型
  6. key 的值必须具有 唯一性
  7. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）在这里插入图片描述

v-model

  1. 作用: 给 表单元素 使用, 双向数据绑定
    ① 数据变化 → 视图自动更新:用JS程序改写变量值，页面会改变
    ② 视图变化 → 数据自动更新：在表单中改写变量位置的值，变量的值也会跟着改变

  2. 语法: v-model = ‘变量’
  3. v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和input事件的合写
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述


自定义指令

.sync修饰符

在这里插入图片描述

计算属性computed

计算属性会对计算出来的 结果缓存 ，再次使用直接读取缓存依赖项变化了，会自动重新计算 → 并再次缓存

const app = new Vue({ 
    el : '#app', // 数据 data: { 
    msg:'AJ', } // 方法 methods:{ 
    fn (){ 
    console.log(this.msg) } } // 计算属性 computed:{ 
    count(){ 
    return msg } } })

watch侦听器（监视器）

监视数据变化 ，执行一些 业务逻辑 或异步操作。有两种写法：
在这里插入图片描述

生命周期钩子

在这里插入图片描述

ref 和 &ref

// 共分为两步 // 1. 目标标签添加ref属性 <div ref="chartRef"> 我是 渲染图表的容器</div> // 2.恰当时期通过this.$refs.xxx,获取目标标签 this.$ref.chartRef.组件方法（）

vue异步更新、$nextTick

实例：编辑标题，编辑框自动聚焦

// 1. 点击编辑，显示编辑框 this.isShowEdit = true //显示编辑框 // 2. 让编辑框立即获取焦点：“显示之后”，立即获取焦点是不能成功的 // 因为Vue是异步更新DOM（先进先出的原则）（提升性能） this.$ref.inp.focus() // 获取焦点 // 3. $nextTick:等DOM更新后，才会触发执行此方法里的函数体 // 语法: this.$nextTick(函数体) this.$nextTick(()=>{ 
    this.$ref.inp.focus() })

脚手架 Vue CLI

使用步骤：

  1. 全局安装 一次 ) yarn global add @vue/cli 或 npm i @vue/cli g
  2. 查看 Vue 版本： vue version
  3. 创建项目架子： vue create project-name （项目名 不能用中文）
  4. 启动项目： yarn serve 或 npm run serve （找 package.json）
    在这里插入图片描述

普通组件的注册使用

一般都用局部注册 ，如果发现确实是 通用组件 ，再抽离到全局。

在这里插入图片描述
在这里插入图片描述

组件通信

组件通信,就是指组件与组件之间的数据传递。

  1. 父子通讯
  1. 非父子通信
    envent bus事件总线和provide & inject作用：非父子组件之间，进行简易消息传递。比较麻烦，推荐使用VueX。（复杂场景 → Vuex)

插槽

插槽可分为两类：默认插槽（组件内定制一处结构）和具名插槽（组件内定制多处结构）；作用域插槽是插槽的一种传参语法。

  1. 默认插槽
    作用：让组件内部的一些结构支持自定义
    需求: 将需要多次显示的对话框, 封装成一个组件
    解决问题：组件的内容部分，不希望写死，希望能使用的时候自定义
    在这里插入图片描述
    在这里插入图片描述




  2. 具名插槽
    需求：一个组件内有多处结构，需要外部传入标签，进行定制
    在这里插入图片描述
    在这里插入图片描述


  3. 作用域插槽
    作用域插槽：定义 slot 插槽的同时, 是可以传值的。插槽上可以绑定数据，将来使用组件时可以用。
    作用域插槽是插槽的一种传参语法，插槽只有两类分别为默认插槽（组件内定制一处结构）和具名插槽（组件内定制多处结构）
    场景：封装表格组件
    （1）父传子，动态渲染表格内容
    （2）利用默认插槽定制操作列
    （3） 删除或查看都需要用到当前项的id，属于组件内部的数据通过作用域插槽传值绑定，进而使用
    在这里插入图片描述






路由、VueRouter

作用：修改地址栏路径时，切换显示匹配的组件

  1. 实现页面的路由跳转：通过Vue的router，我们可以根据用户的操作或者业务需求，实现页面之间的跳转。例如，用户点击导航栏中的某个链接，页面会根据配置的路由规则自动跳转到相应的页面。
  2. 管理页面的状态：Vue的router可以帮助我们实现页面之间的状态管理。通过路由的参数和查询参数，我们可以在不同页面之间传递数据，并在目标页面中获取这些数据，从而实现页面间的数据传递和共享。
  3. 实现页面的动态加载：Vue的router支持按需加载路由组件，这样可以提高页面的加载速度和用户体验。可以根据需求将不同的路由组件拆分成单独的文件，只有在需要的时候才会去加载对应的文件，而不是一次性加载所有页面的组件。
  4. 实现路由的嵌套和嵌套路由：Vue的router支持嵌套路由，可以实现页面的层级结构。通过配置不同的子路由，可以实现复杂的页面布局和多级页面的跳转。

VueRouter的使用

在这里插入图片描述
在这里插入图片描述
路由的嵌套使用

const routes = [ { 
    path: '/user/:id', component: User, children: [ { 
    // 当 /user/:id/profile 匹配成功 // UserProfile 将被渲染到 User 的 <router-view> 内部 path: 'profile', component: UserProfile, }, { 
    // 当 /user/:id/posts 匹配成功 // UserPosts 将被渲染到 User 的 <router-view> 内部 path: 'posts', component: UserPosts, }, ], }, ]

在这里插入图片描述

VueRouter封装抽离

声明式导航

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


在这里插入图片描述
在js中接受传递的参数使用

this.route.$query.参数名

this.route.$params.参数名

在这里插入图片描述
在这里插入图片描述

Vue路由-重定向

在这里插入图片描述

Vue路由-404

在这里插入图片描述

Vue路由-模式设置

在这里插入图片描述

编程式导航

this.$router.push('路由路径') // 查询参数传参 this.$router.push('/路径?参数名1=参数值1&参数名2=参数值2&参数名3=参数值3') // 动态路由传参 this.$router.push('/路径/参数值') this.$router.push({ 
    path:'路由路径' }) // 查询参数传参 this.$router.push({ 
    path:'路由路径' query:{ 
    参数名1=参数值1, 参数名2=参数值2, 参数名3=参数值3 } }) // 动态路由传参 this.$router.push({ 
    path:'/路径/参数值' })

（2）name命名路由跳转（适合path路径长的场景

// 需要现在Router中给路由路径起一个名字 { 
   name:'路由名', path:'/path/xxx', component:XXX} // 进行跳转 this.$router.push({ 
    name:'路由名' }) // 查询参数传参 this.$router.push({ 
    name:'路由名', query:{ 
    参数名1=参数值1, 参数名2=参数值2, 参数名3=参数值3 } }) // 动态路由传参 this.$router.push({ 
    name:'路由名', params:{ 
    参数名：'参数值' } })

组件的缓存keep-alive

在这里插入图片描述

  1. keep-alived是什么？
    keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
    keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

  2. keep-alive的优点
    在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，
    减少加载时间及性能消耗，提高用户体验性。

  3. keep-alive的三个属性
    默认情况下keep-alive会缓存keep-alive包裹的所有的组件
    ① include ： 组件名数组，只有匹配的组件会被缓存
    ② exclude ： 组件名数组，任何匹配的组件都不会被缓存
    ③ max ： 最多可以缓存多少组件实例
    在这里插入图片描述




  4. keep-alive的使用会触发两个生命周期函数

在这里插入图片描述

Vuex

  1. vuex 是一个 vue 的 状态管理工具，状态就是数据。
    vuex 是一个插件，可以帮我们管理 vue 通用的数据 (多组件共享的数据)。
  2. 场景
    ① 某个状态 在 很多个组件 来使用 (个人信息)
    ② 多个组件 共同维护 一份数据 (购物车)

  3. 优势：
    ① 共同维护一份数据，数据集中化管理
    ② 响应式变化
    ③ 操作简洁 (vuex提供了一些辅助函数)


vuex的安装和创建空仓库

Vuex同样遵循单项数据流，组件中不能直接修改仓库的数据

  1. 安装vuex
    yarn add vuex@3
  2. 新建vuex模块文件
    在这里插入图片描述
  3. 创建仓库
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 创建仓库 const store = new Vuex.Store({ 
    // state 状态, 即数据, 类似于vue组件中的data // 区别： // 1. data 是组件自己的数据 // 2. state 是所有组件共享的数据 state: { 
    count: 101 }, }) export default store
  1. main.js挂载
new Vue({ 
    render:h=>h(APP), store }).$mount("#app")
  1. 组件中使用
    （1）通过store直接访问
    在这里插入图片描述
    在这里插入图片描述
    （2）通过辅助函数 (简化)
    在这里插入图片描述




  2. mutations
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述


  3. actions
    在这里插入图片描述
    在这里插入图片描述

  4. getter
    在这里插入图片描述
  5. 模块module
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述





Vue3

在这里插入图片描述

Vue3项目创建

  1. Node.js的版本在16.0及以上。
  2. 打开命令窗口，运行创建项目命令
npm init vue@latest
  1. 按照自己需求进行配置选择
  2. 之后提示命令窗口提示运行
npm create "项目名称“ cd "项目名称" npm install npm run dev

在这里插入图片描述

setup

在这里插入图片描述

在这里插入图片描述

reactive和ref

<script setup> // reactive：不能处理简单类型数据 import { 
   reactive} from 'vue' const state = reactive(对象类型数据） // ref import { 
   ref} from 'vue' const state = reactive(简单类型或复制类型数据） </script>

computed计算属性函数

watch监听

生命周期函数

父子通讯

  1. 父传子props
    在这里插入图片描述
  2. 子传父emit
    在这里插入图片描述

通过ref获取dom对象

在这里插入图片描述

defineExpose

在这里插入图片描述

provide和inject

defineOptions

在这里插入图片描述
在这里插入图片描述

v-model和defineModel

在这里插入图片描述

pinia

Pinia 是 Vue 的最新 状态管理工具 ，是 Vuex 的 替代品

  1. 提供更加简单的API （去掉了 mutation ）
  2. 提供符合，组合式风格的API （和 Vue3 新语法统一）
  3. 去掉了 modules 的概念，每一个 store 都是一个独立的模块
  4. 配合 TypeScript 更加友好，提供可靠的类型推断

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

赞 (0)
老牧童老牧童
0
上一篇 2025-10-31 15:45
下一篇 2025-10-31 16:10

相关推荐

发表回复

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

关注微信