第5章 指令

指令是带v-前缀的特殊属性，其值限定为单个表达式。指令的作用是，当表达式的值发生改变时，将其产生的连带影响应用到DOM上。

5.1 内置指令

5.1.1 v-show

v-show初始渲染开销高，无论表达式值是什么，都会创建元素，通过css样式属性display控制元素显示与否。

对于表达式为false的，渲染后标签加 style="display: none;"

5.1.2 v-if/v-else-if/v-else

不满足条件时，直接不创建元素，用<!--v-if-->这样的注释占用位置。

v-if因为要创建、删除元素，所以切换开销高，如果要频繁切换状态，建议v-show。

如果要控制多个元素，可包裹在<template>里。

5.1.3 v-for

遍历数组

Vue变异方法

Vue非变异方法

过滤与排序（计算属性、方法）

遍历整数

遍历对象

遍历多元素内容用template

key属性解决问题

v-for与v-if一起使用

特别提醒：Vue不建议v-for与v-if一起使用，可以用计算属性代替。

5.1.4 v-bind

v-bind主要用于动态绑定属性，可简写为一个英文冒号:

5.1.5 v-model

v-model指令用来在表单<input><textarea><select>上创建数据的双向绑定，其本质是监听用户输入更新数据。

5.1.6 v-on

v-on用于监听DOM事件，并触发一些ja vascript代码，v-on可简写为英文符号@

$event原生DOM事件与prevent事件修饰符

事件修饰符

事件修饰符支持串联

按键修饰符

系统修饰符

Vue提供系统修饰键，ctrl、alt、shift、me ta，用于实现相应按键按下时才触发鼠标或者键盘事件。

exact修饰符

用于精确控制系统修饰符组合事件

获取input值三种方式：v-model、@input监听、ref

参考：https://blog.csdn.net/weixin_60463255/article/details/121140873

5.1.7 v-text

用于更新元素的文本内容，可直接用mustache替代

5.1.8 v-html

用于将普通内容作为html插入页面，特别注意只把可信内容插入，不要将用户内容插入，容易导致XSS攻击。

5.1.9 v-once

只渲染一次，之后变为静态内容，无需再次渲染。对于一次性的内容，使用v-once可优化性能。

5.1.10 v-pre

v-pre用于跳过元素及子元素的编译。对于大量没有指令的节点，使用v-pre可加快编译速度。

5.1.11 v-cloak

v-cloak这个指令保留直到关联的组件实例被编译结束，与css规则 [v-cloak]{display: none} 一起使用时，可隐藏未编译的mustache标签。使用路由挂载组件时，v-cloak就不需要了。

5.1.12 v-slot

用于提供命名的插槽或需要接收prop的插槽。

5.2 自定义指令

5.3 实例

5.4 小结