Vue指令大全汇总及详解

Vue指令是以v-前缀的特殊属性,Vue指令的作用是当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM,码笔记分享Vue常用指令大全和自定义指令以及Vue指令的详解:

Vue常用指令

v-text

v-text主要用于更新元素的textContent。如果要更新部分的textContent,需要使用{{ Mustache }}插值。

示例:

v-html

更新元素的 innerHTML
注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。

示例:

v-pre

v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。

示例:

最终仅显示第二个span的内容

v-if

条件渲染,v-if根据表达式的值的真假条件,销毁或重建元素
示例:

如果属性值ok为true,则显示。否则,不会渲染这个元素。

v-else

v-else是搭配v-if使用的,它必须紧跟在v-if或者v-else-if后面,否则不起作用。
示例:

v-else-if

v-else-if充当v-if的else-if块,可以链式的使用多次。可以更加方便的实现switch语句。
示例:

v-show

v-show:根据表达式之真假值,切换元素的 display CSS 属性
v-show和v-if不同的是,如果v-if的值是false,则这个元素被销毁,不在dom中。但是v-show的元素会始终被渲染并保存在dom中,它只是简单的切换css的dispaly属性。

示例:

注意:

v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此,如果要非常频繁的切换,则使用v-show较好;如果在运行时条件不太可能改变,则v-if较好

示例

v-cloak

v-cloak指令保持在元素上直到关联实例结束编译。和 CSS 规则如[v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

不会显示,直到编译结束。

v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
示例:

v-bind

v-bind缩写为:“:”用来动态的绑定一个或者多个特性。没有参数时,可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。

示例:

v-for

基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名:

另外也可以为数组索引指定别名 (或者用于对象的键):

v-for 默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个 key 的特殊属性:

v-model

在表单元素上创建双向数据绑定,v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。

示例:

v-on

v-on主要用来监听dom事件,以便执行一些代码块。
示例:

2020双十二服务器价格出炉,又降价了!
双十二拼团:阿里云双十二服务器拼团(全网最低价直接拼不用拉人)
①真便宜:阿里云服务器69元1年,203元3年(全网最低价)
②腾讯云:腾讯云双十二服务器特惠88元一年起(有高配)
③代金券:2020阿里云双十二代金券一键领取中