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,//是否立刻执行一次handler
		handler (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

二、Vue3.x技术精讲