Vue.js指令

指令这块分为内容处理指令、属性绑定指令、渲染指令、事件处理指令以及表单输入绑定指令这五块。我们一个一个来复习。

内容处理指令

v-once 指令

• 使元素内部的插值表达式只生效一次，once嘛，从字面上就可以理解了

v-text 指令

• 元素内容整体替换为指定纯文本数据，text，这个也可以从字面上理解，代码示例如图：

v-html 指令

• 元素整体内容替换为指定的HTML文本，这个也很容易理解，就是在里面写html语句嘛：

属性绑定指令

v-bind指令

• 用于动态绑定HTML属性
• 简写方式：比如这个，v-bind : title = "title"，我们可以简写成 :title = "tilte"
• 如果需要一次性绑定多个属性，还可以绑定对象，示例如图：
• 与插值表达式类似，v-bind中也允许使用表达式，示例如图：

Class绑定

• class是HTML属性，可以通过v-bind进行绑定，并且可以与class属性共存，示例如图：
• 以下是几种特殊处理方式，包括使用对象和数组进行书写，示例如图：
  

Style绑定

• style是HTML属性，可以通过v-bind进行绑定，并且可以与style属性共存，示例如图：
• 当我们希望给元素绑定多个样式对象时，可以设置为数组，示例如图：
  

渲染指令

v-for 指令

• 用于遍历数据渲染结构，常用的数组与对象均可遍历
• 使用v-for的同时，应始终指定唯一的key属性，因为这样我们可以提高渲染性能并避免问题，这个key就相当于每个元素的身份证，vue通过这张身份证来对每个元素进行排序和渲染
• 通过<template>标签设置模板占位符，可以将部分元素或内容作为整体进行操作，示例如图：

v-show 指令

• 用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用
• <template>无法使用v-show指令

v-if 指令

• 用于根据条件控制元素的创建与移除
• 出于性能考虑，应避免将v-if和v-for应用于同一标签
  这边我们来说明一下v-for和v-if的区别，同样都是显示隐藏元素，机制是不一样的，v-show是相当于控制了该元素的display，相当于一个开关；而v-if呢，它是直接操控DOM的，用的时候创建这个元素，不用了呢就把它删除。这样的话我们就可以总结出来，当这个元素需要频繁切换显示隐藏的时候，我们就用v-show，偶尔需要切换显示隐藏的话，那我们就用v-if。这里是需要注意一下的。

事件处理指令

v-on 指令

• 用于进行元素的事件绑定，示例如图：
• v-on也有简写方式，如图：
• 事件程序代码较多时，可以在methods中设置函数，并设置为事件处理程序，示例如图：
• 设置事件处理程序后，可以从参数中接收事件对象：
• 在视图中可以通过$event访问事件对象：

表单输入绑定指令

v-model 指令

• 用于给<input>、<textarea>、<select>元素设置双向数据绑定

输入框绑定

• 输入框分为单行输入框input和多行输入框textarea：

单选按钮绑定

复选框绑定

• 复选框绑定分为单个选项和多个选项两种情况，这边要特别注意一下，因为这两种情况的书写方式是不同滴！：

选择框绑定

• 选择框绑定分为单选绑定和多选绑定两种情况，和复选框一样，两种情况的书写方式是不同的：

v-model 指令小结

• input输入框：绑定字符串值
• textarea输入框：绑定字符串值
• radio：绑定字符串值
• checkbox：单个绑定布尔值，多个绑定数组
• select：单选绑定字符串，多选绑定数组

ok，指令的部分复习完了，下次我们复习修饰符，今日份推荐歌曲：王天戈-心安理得