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=‘变量’

二、Vue3.x技术精讲