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-ifv-else-if

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

六、v-else-if

6.1 限制

前一兄弟元素必须有 v-ifv-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 示例

参考文章

(1)Vue.js API

(2)vue 指令基本使用大全

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券