1.使用Mustache语法（即双大括号`{{}}`）

1. 使用Mustache语法（即双大括号{{ }}）

DOM:

vue实例的数据：

const app = new Vue({
el: '#app',
data: {
message: 'hello,你好啊',
firstName: 'kobe',
lastName: 'bryant',
counter: 100
},
})


2. 其他的插值指令

（1）v-once

只显示第一次解析到的数据，当数据发生改变时，页面不跟着变。

{{message}}

（2）v-html

如果数据是一个HTML标签的字符串，使用v-html指令，把这个字符串解析成标签 显示到页面上。

data: {
url:"百度一下"
}


{{url}}

（3）v-text

把文本放到DOM上直接展示。

{{message}}

这两种写法的效果是一样的。区别在于：v-text指令不够灵活，比如下面的演示：

张***

message我们定义的是“你好啊”，这样写的话，“你好啊”会把“张**”覆盖，只显示“你好啊”。

（4）v-pre

不做解析，直接显示原本的Mustache语法。

{{message}}

（5）v-cloak

给HTML标签添加v-cloak属性后，vue解析标签的时候，如果没数据：保留v-cloak标签；如果有数据：删除v-cloak。

实现效果：配合css使用，可以做到有数据的时候显示标签，没数据的时候隐藏标签。

场景：程序实际的执行中，可能会有代码的卡顿或延迟，导致vue读取不到数据，当读取不到数据时，就会直接显示{{message}}，当解析到数据时，又会把{{message}}修改成数据。这样就会造成页面显示的混乱。我们希望有数据的时候显示标签，没数据的时候隐藏标签。

用法如下：

{{message}}

数据部分，我们使用一个定时器，模拟程序的卡顿或延迟。

setTimeout(function(){
const app = new Vue({
el:'#app',
data:{
message:'你好'
}
})
},1000)


这样写就实现了我们想要的效果：一开始没数据，v-cloak属性保留，显示{{message}}，后面有数据了，显示你好，并删除了v-cloak属性。

最后，指定css效果：

有v-cloak属性的时候，把这个标签隐藏，至此我们想要的效果就做好了。