Vue系列之指令

---

一、什么是指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。

二、v-cloak

1、解决的问题

代码加载的时候先加载 HTML 把插值语法当做 HTML 内容加载到页面上，当加载完 js 后才把插值语法替换掉，所以我们会看到闪烁问题

2、用法

2.1、定义样式

通过属性选择器选择到带有属性 v-cloak 的标签，让他隐藏

[v-cloak] {
	display: none;
}
1
2
3

2.2、让带有插值语法的标签添加 v-cloak 属性

在数据渲染完成之后，v-cloak 属性会自动去除，也就是对应的标签会变为可见。

<div v-cloak>{{msg}}div>
1

三、v-text

更新标签的内容（innerText）。如果需要更新部分的内容，需要使用 {{ Mustache }} 插值。

1、用法

<div v-text="msg">div>
1

2、优势

相比于插值表达式，v-text 没有闪动问题，也更加简洁。

四、v-html

更新元素的 innerHTML

1、使用

<div v-html="msg">div>
1

2、劣势

存在安全问题

五、v-pre

填充原始信息

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

1、使用

<div v-pre>{{msg}}div>
1

六、v-once

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

1、使用

<div v-once>{{info}}div>
1

2、使用场景

如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。

七、v-model

在表单控件或者组件上创建双向绑定。

1、使用

<input type="text" v-model="msg" />
1

2、表单域修饰符

• number：转化为数值
• trim：去掉开始和结尾的空格
• lazy：将input事件切换为change事件

<input type="text" v-model.number="age" />
<input type="text" v-model.trim="info" />
<input type="text" v-model.lazy="msg" />
1
2
3

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！