《图解Vue3.0》- 第5节 模板语法-指令

指令（Directives）是vue模板中最常用的一项功能，它带有前缀v-。指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到DOM上。接下来将对每一个指令，一一了解一下。

内置指令

v-pre

编译时跳过当前元素和它的子元素。可以用来显示原始的Mustache标签。跳过大量没有指令的节点会加快编译。

示例

v-cloak

v-cloak指令保持在元素上直到关联实例结束编译。当和CSS规则如[v-cloak] { display: none; }一起使用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕，否则在渲染界面时，有可能用户会先看到Mustache标签，然后看到编译后的数据。

v-text

v-text指令可以更新元素的textContent。在内部，{{Mustache}}插值也被编译未textNode的一个v-text指令。

示例

v-html

更新元素的innerHtml。内容按照普通的HTML插入，忽略数据绑定，如果想复用模板片段，则应当使用partials。

注意

不建议在网站上直接动态渲染任意HTML片段，很容易导致XSS攻击。

示例

v-model

v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。
除此之外，v-model后面还可以添加多个参数（number/lazy/debounce）

• number: 输入自动转换成Number类型（如果原值的转换结果为NaN，则返回原值）。
• lazy: 在默认情况下，v-model在input事件中同步输入框的值和数据，我们可以添加一个lazy特性，从而数据改到change事件中发生。
• trim: 去除空格
• debounce: 设置延时同步数据,2.0以上版本中取消了debounce

通过下面的示例中可以看出，貌似参数并不起作用~

示例

v-bind

v-bind指令用于响应更新HTML特性，将一个或多个attribute，或者一个组件prop动态绑定到表达式。v-bind可以简写用冒号“:”。

在绑定prop时，prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。修饰符有：

• .camel: 将绑定的特性名字转换回驼峰命名。只能用于普通HTML特性的绑定，通常用于绑定驼峰命名的SVG特性，比如viewBox。

以下两种在vue3中已移除：

• .sync: 双向绑定，只能用于prop绑定
• .once: 单次绑定，只能用于prop绑定

示例

v-on

v-on指令用于绑定事件监听器。事件类型由参数指定；表达式可以是一个方法的名字或一个内联语句；如果没有修饰符，也可以省略。缩写为“@”。

修饰符

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .{keyAlias} - 仅当事件是从特定键触发时才触发回调。
• .once - 只触发一次回调。
• .left - 只当点击鼠标左键时触发。
• .right - 只当点击鼠标右键时触发。
• .middle - 只当点击鼠标中键时触发。
• .passive - { passive: true } 模式添加侦听器

示例

v-for

示例

  {{ item.text }}

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

根据表达式的真假值来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是