VUE 1

概念：Vue 是一个用于 构建用户界面（基于数据渲染出用户看到的页面） 的 渐进式 框架


构建用户界面 
初始化渲染
核心步骤 4步：
1. 准备容器
2. 引包 (官网) - 开发版本 / 生产版本
3. 创建 Vue 实例 new Vue()
4. 指定配置项 → 渲染数据
① el 指定挂载点
② data 提供数据

插值表达式

语法：{ { 表达式 }}

（1）使用的数据必须存在 （data）

（2）支持的是表达式，而非语句，比如：if for ...

（3）不能在标签属性中使用 { { }} 插值

响应式：数据改变，视图自动更新

① 访问数据： "实例.属性名"
② 修改数据： "实例.属性名" = "值"

指令

指令就是带有 v- 前缀 的特殊 属性，不同属性 对应 不同的功能
v-html = "表达式 " → 动态设置元素 innerHTML

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. 简写：@事件名

v-bind
1. 作用： 动态的设置html的标签属性→ src url title ...
2. 语法： v-bind:属性名="表达式"
3. 注意： 简写形式 :属性名="表达式"

图片切换案例-波仔学习之旅

核心思路分析：
① 数组存储图片路径 → [ 图片1， 图片2， 图片3， ... ]
② 准备下标 index，数组[下标] → v-bind 设置 src 展示图片 → 修改下标切换图片

v-for
1. 作用： 基于数据循环， 多次渲染整个元素→ 数组、对象、数字...
<p v-for="...">我是一个内容</p>

2. 遍历数组语法：
v-for = "(item, index) in 数组"
Ø item 每一项， index 下标
Ø 省略 index: v-for = "item in 数组"
图书管理案例 - 小黑的书架
明确需求：
① 基本渲染
② 删除功能
→ v-for
→ 用 filter 根据 id 从数组中删除对应项

v-for 中的 key

语法：key属性 = "唯一标识"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

<ul>
<li v-for="(item, index) in booksList" :key="item.id">
<span>{ { item.name }}</span>
<span>{ { item.author }}</span>
<button @click="del(item.id)">删除</button>
</li>
</ul>
 

ey作用：给元素添加的唯一标识。
booksList: [
{ id: 1, name: '《红楼梦》', author: '曹雪芹' },
{ id: 2, name: '《西游记》', author: '吴承恩' },
{ id: 3, name: '《水浒传》', author: '施耐庵' },
{ id: 4, name: '《三国演义》', author: '罗贯中' }
]

v-for 的默认行为会尝试 原地修改元素 （就地复用）

booksList: [
{ id: 2, name: '《西游记》', author: '吴承恩' },
{ id: 3, name: '《水浒传》', author: '施耐庵' },
{ id: 4, name: '《三国演义》', author: '罗贯中' }
]

key作用：
给元素添加的唯一标识，便于Vue进行列表项的正确排序复用。
注意点：
1. key 的值只能是 字符串 或 数字类型
2. key 的值必须具有 唯一性
3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

v-model
1. 作用: 给 表单元素 使用, 双向数据绑定
① 数据变化 → 视图自动更新
② 视图变化 → 数据自动更新
2. 语法: v-model = '变量'