二、Vue学习之路-指令应用

---

一、Vue指令

1、v-text：设置标签的文本值(textContent)

• 默认写法会替换全部内容，使用差值表达式 {{}} 可以替换全部内容
• 内部支持写表达式
  
  运行结果：
  

---

2、v-html：设置元素的innerHTML

• 内容中有html结果会被解析为标签
• v-text指令无论内容是什么，只会解析为文本

运行结果

---

3、v-on：为元素绑定事件

• 指令写法：v-on:事件 = "方法"
• 指令语法糖：@事件 = "方法"
• 绑定的方法定义在methods属性中
• 方法内部通过this关键字可以访问定义在data中的数据

运行结果：

---

3-1、v-on补充

• 事件绑定的方法写成v-on补充函数调用的形式，可以传入自定义参数
• 定义方法时需要定义v-on补充形参来接收传入的实参
• 事件后跟上.修饰符可以对事件进行限制
• 事件修饰符有多种，.enter可以限制触发的按键为回车

运行结果：

---

4、v-show：根据布尔值切换元素的显示状态

• 原理是修改元素的display样式，实现显示隐藏
• 指令后面的内容，最终都会解析为布尔值
• 值为ture元素显示，值为false元素隐藏
• 数据改变之后，对应的元素显示状态也会实时更新
  

运行结果：

5、v-if：根据布尔值切换元素的显示状态

• 原理是通过操纵dom元素来切换显示状态
• 值为true时，元素存在于dom中，值为false时，元素会从dom中销毁、移除
• 频繁的切换推荐使用v-show，内存消耗小，反之使用v-if

运行结果：

---

6、v-bind：为元素绑定属性

• 指令写法：v-bind:属性 = "值"
• 语法糖： :属性 = “值”
• 动态的改变属性建议使用对象的方式

运行结果：

7、v-for：根据数据生成列表结构

• 指令语法：v-for="(值, 索引) in 数据"
• 值以及索引可以结合其他指令一起使用
• 要想实时更新数据以及界面，需要使用数组的方法"来添加、修改或删除数据，但是使用赋值是可以改变数据，但是无法做到界面实时更新

运行结果：

---

8、v-model：设置和获取表单元素的值

• 绑定的数据与界面元素的值，是双向绑定的，一方改变，另一方也会实时改变

运行结果：

---

二、小案例

1、小型计数器

• 计数器给出最大值是10，最小值是0
• 点击后实时更新数据，简化dom操作
• 知识点： v-click、v-on、差值表达式

运行结果：

---

2、图片切换

• 点击按钮切换图片，图片在第一张时，“上一张”按钮隐藏，图片在最后一张时，“下一张”按钮隐藏
• 频繁切换元素的显示隐藏，相比于使用v-if，使用v-show可减少内存消耗
• 知识点： v-show、v-if（虽然没用到）、v-bind

运行结果：

隐藏“上一张”按钮

隐藏“下一张”按钮

---

3、ToDo记事本

• 做到新增事项、删除事项
• 对列表结构进行处理，可以通过v-for指令结合数据生成
• v-on结合事件修饰符来达到按下回车即可新增事项
• v-on在绑定事件时可以传递自定义参数
• 通过v-model快速设置和获取表单的值，不需要频繁操作dom

运行结果：

事项显示：

新增事项：

红色，悬浮显示删除按钮，点击删除事项
橙色：点击清空所有事项

清空状态