vue2+vue3 HMCXY基础入门

一、Vue2.x技术精讲

1.Vue快速上手

（1）Vue概念

概念：Vue是一个用于构建用户界面的（基于数据渲染出用户看到的页面）渐进式（循序渐进）框架（一套完整的项目解决方案）
Vue的两种使用方式:

1. Vue核心包开发
   场景：局部模块改造
2. Vue 核心包 &Vue 插件工程化开发
   场景：整站开发

优点：大大提升开发效率（70%⬆）
缺点：需要理解记忆规则→官网

（2）创建实例

（3）插值表达式

插值表达式是一种Vue的模板语法

1. 作用：利用表达式进行插值，渲染到页面中
   表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
2. 语法：{{ 表达式 }}
3. 注意点：
   （1）使用的数据必须存在（data）
   （2）支持的是表达式，而非语句，比如：if for …
   （3）不能再标签属性中使用{{ }}插值

（4）响应式特性

Vue核心特性：响应式
我们已经掌握了基础的模板渲染，其实除了基本的模板渲染，Vue背后还做了大量工作。
比如：数据的响应式处理 -> 响应式：数据变化，视图自动更新
如何访问or修改？data中的数据,最终会被添加到实例上
①访问数据：“实例.属性名”
②修改数据：“实例.属性名”=“值”

聚焦于数据 → 数据驱动视图
使用Vue开发，关注业务的核心逻辑，根据业务修改数据即可

（5）开发者工具

安装Vue 开发者工具：装插件调试 Vue应用
（1）通过谷歌应用商店安装（国外网站）
（2）极简插件：下载→开发者模式→拖拽安装→插件详情允许访问文件
https://chrome.zzzmh.cn/index
打开Vue运行的页面，调试工具中Vue栏，即可查看修改数据，进行调试。

2.Vue指令

Vue会根据不同的==【指令】，针对标签实现不同的【功能】。
指令：带有v-前缀的特殊标签属性==
v-html：
作用：设置元素的innerHTML
语法：v-html = “表达式”

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

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

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

v-on
作用：注册事件＝添加监听 + 提供处理逻辑
语法：
①v-on：事件名=“内联语句”
②v-on：事件名=“methods中的函数名”
简写：@事件名
注意：methods函数内的this 指向Vue实例

v-bind
作用：动态的设置html的标签属性 -> src url title …
语法：v-bind:属性名=“表达式”
注意：简写形式：属性名=“表达式”

v-for
作用：基于数据循环，多次渲染整个元素→数组、对象、数字…
遍历数组语法：
v-for = “(item, index) in 数组”
item 每一项，index 下标
省略 index:v-for =“item in 数组”
v-for中的key
语法：key属性＝"唯一标识"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
v-for的默认行为会尝试原地修改元素（就地复用）
注意点：

1. key 的值只能是 字符串 或 数字类型
2. key 的值必须具有 唯一性
3. 推荐使用id作为key（唯一），不推荐使用 index作为key（会变化，不对应）

v-model
作用：给 表单元素 使用，双向数据绑定 -> 可以快速获取 或 设置表单元素内容
①数据变化 → 视图自动更新
②视图变化 → 数据自动更新
语法：v-model=‘变量’

指令修饰符
通过".”指明一些指令后缀，不同后缀封装了不同的处理操作→简化代码
①按键修饰符
@keyup.enter → 键盘回车监听
②v-model修饰符
V-model.trim → 去除首尾空格
v-model.number → 转数字
③事件修饰符
@事件名.stop → 阻止冒泡
@事件名.prevent → 阻止默认行为

v-bind对于样式控制的增强
为了方便开发者进行样式控制，Vue扩展了v-bind的语法，可以针对class类名和style行内样式进行控制。

1. 操作class
   语法 :class = “对象/数组”
   ①对象→键就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类
   适用场景：一个类名，来回切换
   ②数组→数组中所有的类，都会添加到盒子上，本质就是一个class列表
   适用场景：批量添加或删除类
2. 操作style
   语法:style = “样式对象”
   适用场景：某个具体属性的动态设置

v-model应用于其他表单元素
常见的表单元素都可以用v-model绑定关联 → 快速获取或设置表单元素的值
它会根据控件类型自动选取正确的方法来更新元素
输入框 input:text → value
文本域 textarea → value
复选框input:checkbox → checked
单选框 input:radio → checked
下拉菜单 select → value
…

3.计算属性

概念：基于‘现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
语法：
①声明在computed 配置项中个计算属性对应一个函数
②使用起来和普通属性一样使用{{计算属性名}}
计算属性 → 可以将一段求值的代码进行封装
computed计算属性 vs methods方法
computed 计算属性：
作用：封装了一段对于数据的处理，求得一个结果。
语法：
①写在computed配置项中
②作为属性，直接使用 → this.计算属性{{计算属性}}
缓存特性（提升性能）：
计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
依赖项变化了，会自动重新计算 → 并再次缓存
methods方法:
作用：给实例提供一个方法，调用以处理业务逻辑。
语法：
①写在methods配置项中
②作为方法，需要调用 → this.方法名(){{方法名()}@事件名=“方法名”
计算属性完整写法
计算属性默认的简写，只能读取访问，不能“修改”。
如果要==“修改”== → 需要写计算属性的完整写法。

4.watch侦听器（监视器）

作用：监视数据变化，执行一些业务逻辑或异步操作。
语法：
①简单写法 → 简单类型数据，直接监视
②完整写法 → 添加额外配置项
（1）deep: true 对复杂类型深度监视

watch:{数据属性名(newValue,oldValue）{一些业务逻辑或异步操作。}'对象.属性名'(newValue,oldValue){一些业务逻辑或异步操作。}

（2）immediate: true 初始化立刻执行一次handler方法

watch: {// watch完整写法数据属性名:｛deep:true,//深度监视(针对复杂类型)immediate：true,//是否立刻执行一次handlerhandler (newValue) {console.log(newValue)}}
}

5.Vue生命周期和生命周期的四个阶段

思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）
Vue生命周期：一个Vue实例从创建到销毁的整个过程。
生命周期四个阶段：①创建②挂载③更新④销毁
Vue生命周期过程中，会自动运行一些函数，被称为==【生命周期钩子】→让开发者可以在【特定阶段】运行自己的代码==。

6.工程化开发&脚手架Vue CLI

开发Vue的两种方式：

1. 核心包传统开发模式：基于 html/css/js 文件，直接引入核心包，开发Vue。
2. 工程化开发模式：基于构建工具（例如：webpack）的环境中开发 Vue。

基本介绍：
VueCLI是Vue官方提供的一个全局命令工具。
可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】
好处：
3. 开箱即用，零配置
4. 内置 babel 等工具
5. 标准化

使用步骤：
6. 全局安装（一次）：yarn global add @vue/cli 或 npmi @vue/cli -g
7. 查看 Vue 版本：vue--version
8. 创建项目架子：vue create project-name（项目名-不能用中文）
9. 启动项目：yarn serve 或npm run serve（找package.json）

7. 脚手架目录文件介绍&项目运行流程

8.组件化开发&根组件

①组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。
好处：便于维护，利于复用 → 提升开发效率。
组件分类：普通组件、根组件。
②根组件：整个应用最上层的组件，包裹所有普通小组件。
App.vue文件（单文件组件）的三个组成部分

1. 语法高亮插件：
   

2. 三部分组成：
   template：结构（有且只能一个根元素）
   script：js逻辑
   style：样式（可支持less,需要装包）
   

3. 让组件支持less
   （1）style标签，lang="less"开启less功能
   （2）装包：yarn add less less-loader

9.普通组件的注册使用

组件注册的两种方式：

1. 局部注册：只能在注册的组件内使用
   ①创建.vue文件（三个组成部分)
   ②在使用的组件内导入并注册
   
2. 全局注册：所有组件内都能使用
   ①创建.vue文件（三个组成部分)
   ②main.js中进行全局注册
   

使用：
当成 html标签使用<组件名></组件名>
注意：
组件名规范→大驼峰命名法，如：TestHeader

10.组件的样式冲突 scoped

默认情况：写在组件中的样式会全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

1. 全局样式：默认组件中的样式会作用到全局
2. 局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件

scoped原理

1. 当前组件内标签都被添加data-v-hash值的属性
2. css选择器都被添加==[data-v-hash值]==的属性选择器
   最终效果：必须是当前组件的元素，才会有这个自定义属性，才会被这个样式作用到

11.data 是一个函数

一个组件的data选项必须是一个函数。保证每个组件实例，维护独立的一份数据对象。
每次创建新的组件实例data函数，得到一个新对象。

12.组件通信

组件通信，就是指组件与组件之间的数据传递。
组件的数据是独立的，无法直接访问其他组件的数据。
想用其他组件的数据 → 组件通信
不同的组件关系和组件通信方案分类
组件关系分类：

1. 父子关系
2. 非父子关系

组件通信解决方案

13.父子通信

1. 父组件通过props将数据传递给子组件
2. 子组件利用$emit通知父组件修改更新

prop
Prop定义：组件上注册的一些自定义属性
Prop作用：向子组件传递数据
特点:
可以 传递 任意数量 的prop
可以 传递 任意类型 的prop
props 校验=
作用：为组件的prop指定验证要求，不符合要求，控制台就会有错误提示→帮助开发者，快速发现错误
语法：
①类型校验

props:{校验的属性名:{type:类型,// Number String Boolean .required:true,// 是否必填default:默认值,// 默认值validator (value) {//自定义校验逻辑return 是否通过校验}}
}

②非空校验
③默认值
④自定义校验

prop & data、单向数据流
共同点：都可以给组件提供数据。
区别：
data的数据是自己的 → 随便改
prop的数据是外部的 → 不能直接改，要遵循单向数据流
单向数据流：父级prop的数据更新，会向下流动，影响子组件。这个数据流动是单向的。

14.非父子通信（拓展）

event bus事件总线
作用：非父子组件之间，进行简易消息传递。（复杂场景 → Vuex）

1. 创建一个都能访问到的事件总线(空Vue实例) → utils/EventBus.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

2. A组件(接收方)，监听Bus实例的事件

created () {Bus.$on('sendMsg',(msg)=> {this.msg = msg})
}

3. B组件(发送方)，触发Bus实例的事件

Bus.$emit('sendMsg'，'这是一个消息')

provide & inject
作用：跨层级共享数据。

1. 父组件provide提供数据

export default {provide () {return {// 普通类型【非响应式】color:this.color,// 复杂类型【响应式】userInfo:this.userInfo,}}
}

2. 子/孙组件inject取值使用

export default {inject: ['color','userInfo'],created () {console.log(this.color, this.userInfo)}
}

15.v-model原理

原理：v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和input事件的合写。
作用：提供数据的双向绑定
①数据变，视图跟着变==:value==
②视图变，数据跟着变==@input==
注意：$event用于在模板中，获取事件的形参

16. .sync修饰符

作用：可以实现子组件与父组件数据的双向绑定，简化代码
特点：prop属性名，可以自定义，非固定为value
场景：封装弹框类的基础组件，visible属性true显示false隐藏
本质：就是==:属性名和@update:属性名==合写

17.ref 和 $refs

作用：利用 ref 和 $refs 可以用于 获取 dom元素，或 组件实例
特点：查找范围 → 当前组件内（更精确稳定）
①获取 dom：

1. 目标标签-添加ref属性
2. 恰当时机，通过 this.$refs.xxx，获取目标标签
   ②获取组件：
3. 目标组件-添加ref属性
4. 恰当时机,通过 this.$refs.xxx，获取目标组件，就可以调用组件对象里面的方法

18.Vue异步更新、$nextTick

Vue是异步更新DOM(提升性能)
$nextTick：等DOM更新后，才会触发执行此方法里的函数体

语法: this.$nextTick(函数体)

19.自定义指令

自定义指令：自己定义的指令，可以封装一些dom操作，扩展额外功能
全局注册-语法

局部注册-语法

使用：

指令的值
语法：在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值
通过binding.value可以拿到指令值，指令值修改会触发update函数。

20.插槽

插槽分类：默认插槽（组件内定制一处结构）具名插槽（组件内定制多处结构）
作用域插槽：是插槽的一个传参语法
默认插槽
作用：让组件内部的一些结构支持自定义
插槽基本语法：

1. 组件内需要定制的结构部分，改用<slot></slot>占位
2. 使用组件时，<MyDialog></MyDialog>标签内部，传入结构替换slot

后备内容（默认值）
通过插槽完成了内容的定制，传什么显示什么，但是如果不传，则是空白
插槽后备内容：封装组件时，可以为预留的<slot>插槽提供后备内容（默认内容）
语法:在<slot>标签内，放置内容，作为默认显示内容
效果：
外部使用组件时，不传东西，则slot会显示后备内容
外部使用组件时，传东西了，则slot整体会被换掉

具名插槽
具名插槽语法：

1. 多个slot使用name属性区分名字
2. template配合v-slot:名字来分发对应标签
3. v-slot:插槽名可以简化成 #插槽名

作用域插槽
作用域插槽：定义slot 插槽的同时，是可以传值的。给插槽上可以绑定数据，将来使用组件时可以用。
基本使用步骤：

1. 给slot标签,以添加属性的方式传值
2. 所有添加的属性，都会被收集到一个对象中
3. 在template中,通过==#插槽名="obj"接收，默认插槽名为default==

21.单页应用程序：SPA - Single Page Application

单页面应用(SPA)：所有功能在一个html页面上实现

22.路由

路由的介绍
生活中的路由：设备和ip的映射关系
Vue中路由：路径和组件的映射关系
VueRouter的介绍
作用：修改地址栏路径时，切换显示匹配的组件
说明：Vue官方的一个路由插件，是一个第三方包
官网：https://v3.router.vuejs.org/zh/
VueRouter 的使用（5+2）

Vue2 VueRouter3.x Vuex3.x
Vue3 VueRouter4.x Vuex4.x

5个基础步骤(固定)
①下载：下载VueRouter模块到当前工程，版本3.6.5

yarn add vue-router@3.6.5

②引入

import VueRouter from 'vue-router'

③安装注册

Vue.use(VueRouter)

④创建路由对象

const router = new VueRouter()

⑤注入，将路由对象注入到newVue实例中，建立关联

new Vue({render: h => h(App),router
}).$mount('#app')

2个核心步骤
①创建需要的组件(views目录)，配置路由规则
②配置导航，配置路由出口(路径匹配的组件显示的位置)
组件存放目录问题
组件分类：.vue文件分2类；页面组件 & 复用组件
注意：.vue文件本质无区别。
分类开来 更易维护
src/views文件夹
页面组件 - 页面展示 - 配合路由用
src/components文件夹
复用组件 - 展示数据 - 常用于复用
路由的封装抽离
好处：拆分模块，利于维护

23.声明式导航

导航链接
vue-router提供了一个全局组件router-link（取代a标签）
①能跳转，配置to属性指定路径（必须）。本质还是a标签，to无需#
②能高亮，默认就会提供高亮类名，可以直接设置高亮样式
两个类名
router-link自动给当前导航添加了两个高亮类名
①router-link-active 模糊匹配（用的多）
to=“/my” 可以匹配 /my /myla /my/b …
②router-link-exact-active 精确匹配
to=“/my” 仅可以匹配 /my

定制类名

const router = new VueRouter({routes:[...],// link自定义高亮类名linkActiveClass:"类名1", // 配置模糊匹配类名linkExactActiveClass:"类名2" // 配置精确匹配类名
)

跳转传参

1. 查询参数传参
   ①语法格式如下
   to=“/path?参数名=值”
   ②对应页面组件接收传递过来的值
   $route.query.参数名
2. 动态路由传参
   ①配置动态路由
   ②配置导航链接
   to=“/path/参数值”
   ③对应页面组件接收传递过来的值
   $route.params.参数名

两种传参方式的区别

1. 查询参数传参（比较适合传多个参数）
   ①跳转：to=“/path?参数名=值&参数名2=值”
   ②获取：$route.query.参数名
2. 动态路由传参（优雅简洁，传单个参数比较方便）
   ①配置动态路由：path:“/path/参数名”
   ②跳转：to=“/path/参数值”
   ③获取：$route.params.参数名

动态路由参数可选符
/search/:words表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"?"

重定向
说明：重定向→匹配path后,强制跳转path路径
语法：{path:匹配路径,redirect:重定向到的路径}

404
作用：当路径找不到匹配时，给个提示页面
位置：配在路由最后
语法：path：“*”（任意路径）- 前面不匹配就命中最后这个

模式设置
hash路由（默认） 例如:http://localhost:8080/#/home
history路由（常用）例如:http://localhost:8080/home（以后上线需要服务器端支持）

24.编程式导航

基本跳转
编程式导航：用JS代码来进行跳转
两种语法：
①path路径跳转（简易方便）

this.$router.push('路由路径')
this.$router.push({path：'路由路径'
}

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

this.$router.push({name：'路由名'
})

路由传参
两种传参方式：查询参数+动态路由传参
两种跳转方式，对于两种传参方式都支持：
①path路径跳转传参（query传参，动态路由传参）
②name命名路由跳转传参（query传参，动态路由传参）

25.组件缓存 keep-alive

路由跳转后，组件被销毁了，返回回来组件又被重建了，所以数据重新被加载了

1. keep-alive是什么
   keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
   keep-alive是一个抽象组件：它自身不会渲染成一个DOM元素，也不会出现在父组件链中。
2. keep-alive的优点
   在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，
   减少加载时间及性能消耗，提高用户体验性。
3. keep-alive的三个属性
   ①include：组件名数组，只有匹配的组件会被缓存
   ②exclude：组件名数组，任何匹配的组件都不会被缓存
   ③max：最多可以缓存多少组件实例
4. keep-alive的使用会触发两个生命周期函数（了解）
   activated当组件被激活（使用）的时候触发 → 进入页面触发
   deactivated当组件不被使用的时候触发 → 离开页面触发

26.

27.

二、Vue3.x技术精讲