【Vue】2-4、Vue 指令
一、概述
指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
vue 中的指令按照不同的用途可以分为如下 6 大类：
内容渲染指令属性绑定指令事件绑定指令双向绑定指令条件渲染指令列表渲染指令
二、内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。
常用的内容渲染指令有如下 3 个：
v-text
性别：
注意：v-text 指令会覆盖掉标签原本的内容
{{}}
vue 提供的 {{}} 语法专门用来解决 v-text 会覆盖默认文本的问题。
这种 {{}} 语法的专业名称是 插值表达式（英文名为 Mustache）
姓名：{{username}}
性别：{{gender}}
v-html
性别：
姓名：{{username}}
性别：{{gender}}
{{ info }}
三、属性绑定指令
如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令
![]()
<-- v-bind: 缩写 -->
![]()
四、使用 JacaScript 表达式
在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 JavaScript 表达式的运算
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
五、事件绑定指令
vue 提供了 v-on 事件绑定指令用来辅助开发者为 DOM 元素绑定事件监听
count = {{ count }}
注意：
原生 DOM 对象有
onclick、oninput、onkeyup等原生事件，替换为 vue 的事件绑定形式 分别为：v-on:click、v-on:input、v-on:keyup可以简写为：
@click@input@keyup
六、事件修饰符
在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
因此，Vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。
常用的 5 个事件修饰符：
| 事件修饰符 | 说明 |
|---|---|
.prevent |
阻止默认行为（例如：阻止 a 链接的跳转，阻止表单的提交等） |
.stop |
阻止事件冒泡 |
.capture |
以捕获模式触发当前的事件处理函数 |
.once |
绑定的事件只触发一次 |
.self |
仅当 event.target 是元素本身时才会触发事件处理器 |
...使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用
@click.prevent.self会阻止元素及其子元素的所有点击事件的默认行为，而@click.self.prevent则只会阻止对元素本身的点击事件的默认行为。
.capture、.once 和 .passive 修饰符与原生 addEventListener 事件相对应：
...
....passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。
请勿同时使用
.passive和.prevent，因为.passive已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则.prevent会被忽略，并且浏览器会抛出警告。
七、按键修饰符
在监听键盘事件时，我们经常需要判断详细的按键。
此时，可以为键盘相关的事件添加按键修饰符，例如：
Vue 为一些常用的按键提供了别名：
-
.enter -
.tab -
.delete(捕获“Delete”和“Backspace”两个按键) -
.esc -
.space -
.up -
.down -
.left -
.right
系统按键修饰符
你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。
-
.ctrl -
.alt -
.shift -
.meta
鼠标按键修饰符
-
.left -
.right -
.middle
这些修饰符将处理程序限定为由特定鼠标按键触发的事件。
八、双向绑定指令
vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。
用户名是：{{ username }}
选中的省份是：{{ province }}
v-model 指令的修饰符
为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：
| 修饰符 | 作用 | 示例 |
|---|---|---|
.number |
自动将用户的输入值转为数值类型 | |
.trim |
自动过滤用户输入的首尾空白字符 | |
.lazy |
在“change”时而非“input”时更新 | |
+ = {{ n1 + n2 }}
九、条件渲染指令
条件渲染指令是用来辅助开发者按需控制 DOM 元素的显示与隐藏。
条件选指令有如下两个：
-
v-if -
v-show
v-if是通过动态增删元素实现控制元素的显示与隐藏
v-show是通过为元素添加display:none样式实现控制元素的显示与隐藏故若元素需要频繁的显示与隐藏，则选择
v-show更合适，对于内存的消耗更小若刚进入页面时，元素默认不需要展示，且后续的使用很大可能不需要展示，则选择
v-if更合适
1
2
3
十、列表渲染指令
vue 提供了 v-for 列表循环指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 item in items 形式的特殊语法，其中
-
items是待循环的数组 -
item是被循环的每一项
索引
ID
姓名
{{ index }}
{{ item.id }}
{{ item.name }}
v-for 指令还支持一个可选的第二个参数，即当前项的索引。
语法格式为：
(item,index) in items注意：v-for 指令中的 item 和 index 都是形参，可以根据需要进行重命名
key 值的注意事项：
-
key 的值只能是字符串或数字类型
-
key 的值必须具有唯一性（不能重复）
-
建议把数据项 id 属性的值作为 key 的值
-
使用 index 的值当作 key 的值没有任何意义
-
建议使用 v-for 指令时一定要指定 key 的值（既能提升性能、又能防止列表状态紊乱）
一 叶 知 秋，奥 妙 玄 心