vue的插值操作

目录

mustache（ {{}} ）语法

v-once指令

v-html指令

v-text指令

v-pre指令

v-cloak指令

mustache（ {{}} ）语法

1.标签内渲染完数据之后，后面还可加其他东西
2.大括号内可以是表达式的形式
3.一个标签可以渲染多个数据
4.大括号{{}}内可进行运算

运行结果：

v-once指令

1.该指令后面不需要跟任何表达式.
2.该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变，即禁止响应式。

在控制台改变message的值，会看到第一个h3标签里面的message值变了，而第二个h3标签里面message的值没有变。

在控制台输入：

页面显示结果：

v-html指令

如果我们从服务器请求到的数据本身就是一个HTML代码，但是我们希望的是按照HTML格式进行解析，并且显示对应的内容。我们就可以使用v-html指令。
html指令：
1.该指令后面往往会跟上一个string类型
2.会将string的html解析出来并且进行渲染

运行结果：

v-text指令

1.v-text作用和Mustache({{}})比较相似∶都是用于将数据显示在界面中
2.与{{}}不同的是，{{}}不会覆盖标签里面的内容，而v-text会覆盖标签里面的内容
3.v-text通常情况下，接受一个string类型

运行结果:

v-pre指令

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
比如:

运行结果：

1.第一个h2元素中的内容会被编译解析出来对应的内容
2.第二个h2元素中会直接显示{{message}}
 

v-cloak指令

在某些情况下，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。可以使用 v-cloak 指令来解决屏幕闪动这一问题
解决步骤：
1.在html中

2.在css中

3.在js中