文章の目录

• 一、什么是指令
• 二、v-cloak
• • 1、解决的问题
  • 2、用法
  • • 2.1、定义样式
    • 2.2、让带有插值语法的标签添加 v-cloak 属性
• 三、v-text
• • 1、用法
  • 2、优势
• 四、v-html
• • 1、使用
  • 2、劣势
• 五、v-pre
• • 1、使用
• 六、v-once
• • 1、使用
  • 2、使用场景
• 七、v-model
• • 1、使用
• 写在最后

一、什么是指令

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

二、v-cloak

1、解决的问题

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

2、用法

2.1、定义样式

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

[v-cloak] {display: none;
}

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

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

{{msg}}

三、v-text

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

1、用法

2、优势

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

四、v-html

更新元素的 innerHTML

1、使用

2、劣势

存在安全问题

五、v-pre

填充原始信息

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

1、使用

{{msg}}

六、v-once

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

1、使用

{{info}}

2、使用场景

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

七、v-model

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

1、使用

写在最后

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