Vue.js入门教程-指令

一、指令

1.1 概念理解

指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式（JavaScript 表达式及过滤器规则）。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

1.2 示例

（1）v- 是Vue的前缀，text 是指令ID，msg 是 expression（表达式）。

（2）msg 是MVVM中的VM即ViewModel，当他的值改变时，就会触发指令 test，更改View视图的显示。

二、v-text

更新元素的 textContent（文本内容）

三、v-html

更新元素的 innerHTML

3.1 注意

v-html 可以读取html标签，但 v-text 不可以。

四、v-show 和 v-if

4.1 v-show

根据表达式之真假值，切换元素的 display CSS 属性

DIV1 的表达式是假值，元素隐藏；DIV2 的表达式是真值，元素显示。

4.2 v-if

根据表达式的值的真假条件，销毁或重建渲染元素

v-if 和 v-show 的用法基本相同，参考 v-show 的用法。

4.3 v-if 和 v-show 的比较

（1）v-if 是“真实”的条件渲染，因为它会确保条件块(conditional block)在切换的过程中，完整地销毁(destroy)和重新创建(re-create)条件块内的事件监听器和子组件。

（2）v-if 是惰性的(lazy)：如果在初始渲染时条件为 false，不会执行任何操作 - 在条件第一次变为 true 时，才开始渲染条件块。

（3）相比之下，v-show 要简单得多 - 不管初始条件如何，元素始终渲染，并且只是基于 CSS 的切换。

（4）通常来说，v-if 在切换时有更高的性能开销，而 v-show 在初始渲染时有更高的性能开销。因此，如果需要频繁切换，推荐使用 v-show，如果条件在运行时改变的可能性较少，推荐使用 v-if。

五、v-else

5.1 限制

前一兄弟元素必须有 v-if 或 v-else-if。

如果 v-if/v-show 指令的表达式为 true，则 else 元素不显示；如果 v-if/v-show 指令的表达式为 false，则else 元素显示。

六、v-else-if

6.1 限制

前一兄弟元素必须有 v-if 或 v-else-if。

表示 v-if 的 “else if 块”。可以链式调用。

七、v-for

基于源数据多次渲染元素或模板块（JavaScript的遍历）

7.1 特点语法

v-for 指令必须使用特定的语法 alias in expression，为当前遍历的元素提供别名

items 是一个数组，item 是当前被遍历的数组元素。

7.2 示例

我们在选项对象的 data 属性中定义了一个 books 数组，然后在 #vue-app 元素内使用 v-for 遍历books 数组，输出每个 book 对象的书籍、作者和译者。

八、v-on

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

8.1 示例

8.2 事件修饰符

（1）.stop - 调用 event.stopPropagation()。

（2）.prevent - 调用 event.preventDefault()。

（3）.capture - 添加事件侦听器时使用 capture 模式。

（4）.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

（5）.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

（6）.native - 监听组件根元素的原生事件。

（7）.once - 只触发一次回调。

（8）.left - (2.2.0) 只当点击鼠标左键时触发。

（9）.right - (2.2.0) 只当点击鼠标右键时触发。

（10）.middle - (2.2.0) 只当点击鼠标中键时触发。

（11）.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

九、v-bind

当表达式的值改变时，将其产生的影响，响应式地作用于 DOM。

十、v-model

在表单控件或者组件上创建双向绑定，监听用户的输入事件以更新数据。

10.1 限制

（1）<input>

（2）<select>

（3）<textarea>

（4）components

10.2 示例

更多系列文章在GitHub地址

阅读更多 (๑╹ヮ╹๑)ﾉ Studying makes me happy

参考文章

（1）Vue.js API

（2）vue 指令基本使用大全