Vue指令的学习 Vue指令的学习

一、v-text（v-指令名="变量"，变量需要data提供数值）
二、v-html（可以解析html语法）
三、v-once（只渲染元素和组件一次）
四、v-cloak（防止页面闪烁）
五、v-pre（了解）
六、v-bind

6.1 绑定属性
6.2 绑定Class
6.3 绑定Style

前言：

Vue官网一共有提供了14个指令，分别如下：

v-text
v-html
v-show
v-if ☆☆☆
v-else ☆☆☆
v-else-if ☆☆☆
v-for ☆☆☆
v-on ☆☆☆
v-bind ☆☆☆
v-model ☆☆☆
v-slot
v-pre
v-cloak
v-once

注意：☆代表重要常用的

一、v-text（v-指令名="变量"，变量需要data提供数值）

v-text="info"渲染页面结果为a，因为info是个变量，就直接展示变量所对应的值
v-text="'abc' + info"渲染页面结果为abca，当你想用字符串和变量拼接时，可以在字符串上增加单引号，这样程序就认为你这个是个字符串，字符串+info变量最后的结果就是字符串abca

二、v-html（可以解析html语法）有时候我们的Vue对象中，或者是后台返回给我们一个段原生的html代码，我们需要渲染出来，那么如果直接通过{{}}渲染，会把这个html代码当做字符串。这时候我们就可以通过v-html指令来实现。
示例代码如下：

ok'">
ok'">

以上两行代码除了用的vue指令不一样以外，没有任何区别，让我们先展示结果吧

okok

v-html可以解析html的标签，而text传的是字符串，不用管字符串里面具体的内容是什么，统一都直接展示出原来的字符

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

// 只渲染一次{{ msg }}

【Vue指令的学习】
四、v-cloak（防止页面闪烁）
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

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

{{message}}

正常来讲我们会通过编译最后在网页上显示hello，但是使用了v-pre指令后，就会跳过编译，直接展示原始的标签内容也就是{{message}}

六、v-bind

6.1 绑定属性
如果我们想要在html元素的属性上绑定我们Vue对象中的变量，那么需要通过v-bind来实现。