Vue 是一个用于 构建用户界面 的 渐进式 框架
1. 构建用户界面：基于 数据 动态 渲染 页面
2. 渐进式：循序渐进的学习
3. 框架：一套完整的项目解决方案，提升开发效率↑ (理解记忆规则)
规则 → 官网
插值表达式
利用表达式进行插值，将数据渲染页面中 ，语法格式 {{ 表达式 }}
插值表达式的注意点： ① 使用的数据要存在 （data） ② 支持的是表达式，而非语句 if ... for ③ 不能在标签属性里面使用
什么是响应式
数据改变，视图自动更新 使用 Vue 开发 → 专注于业务核心逻辑 即可
如何访问或修改数据呢？ data中的数据, 最终会被添加到实例上 ① 访问数据： "实例.属性名" ② 修改数据： "实例.属性名" = "值"
Vue 指令
Vue 会根据不同的【指令】，针对标签实现不同的【功能】，指令：带有 v- 前缀 的 特殊 标签属性，指令就是带有 v- 前缀 的特殊 属性，不同属性 对应 不同的功能 学习不同指令 → 解决不同业务场景需求
v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model
v-html:
作用：设置元素的 innerHTML
语法：v-html = "表达式 "v-show
1. 作用： 控制元素显示隐藏
2. 语法： v-show = "表达式" 表达式值 true 显示， false 隐藏
3. 原理： 切换 display:none 控制显示隐藏
4. 场景： 频繁切换显示隐藏的场景v-if
1. 作用： 控制元素显示隐藏（条件渲染）
2. 语法： v-if = "表达式" 表达式值 true 显示， false 隐藏
3. 原理： 基于条件判断，是否 创建 或 移除 元素节点
4. 场景： 要么显示，要么隐藏，不频繁切换的场景v-else v-else-if
1. 作用： 辅助 v-if 进行判断渲染
2. 语法： v-else v-else-if = "表达式"
3. 注意： 需要紧挨着 v-if 一起使用v-on
1. 作用： 注册事件
2. 语法：
① v-on:事件名 = "内联语句"
② v-on:事件名 = "methods中的函数名"
3. 简写：@事件名
4. 注意：methods函数内的 this 指向 Vue 实例v-bind
1. 作用： 动态的设置html的标签属性
2. 语法： v-bind:属性名="表达式"
3. 注意： 简写形式 :属性名="表达式"v-for
1. 作用： 基于数据循环， 多次渲染整个元素
2. 遍历数组语法：
v-for = "(item, index) in 数组"
Ø item 每一项， index 下标
Ø 省略 index: v-for = "item in 数组"
→ 数组、对象、数字...语法：key属性 = "唯一标识"
key作用：
给元素添加的唯一标识，便于Vue进行列表项的正确排序复用。
注意点：
1. key 的值只能是 字符串 或 数字类型
2. key 的值必须具有 唯一性
3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
v-model
1. 作用: 给 表单元素 使用, 双向数据绑定
① 数据变化 → 视图自动更新
② 视图变化 → 数据自动更新
2. 语法: v-model = '变量'① 列表渲染： v-for key 的设置 {{ }} 插值表达式 ② 删除功能 v-on 调用传参 filter 过滤 覆盖修改原数组 ③ 添加功能 v-model 绑定 unshift 修改原数组添加 ④ 底部统计 和 清空 数组.length累计长度 覆盖数组清空列表 v-show 控制隐藏
