我是怎么学会vue的06：插值（mustache语法及其他插值指令）

插值的意思就是把数据（值）插进dom里，数据定义在vue实例的data属性中。

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

DOM:

<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}}, 李银河!</h2>

  <!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
  <h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
</div>

vue实例的数据：

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

2. 其他的插值指令

（1）v-once

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

<h2 v-once>{{message}}</h2>

（2）v-html

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

data: {
    url:"<a href='http://www.baidu.com'>百度一下</a>"
}

<h2>{{url}}</h2>  <!--把a标签显示到页面上-->
<h2 v-html="url"></h2>    <!--把<a href='http://www.baidu.com'>百度一下</a>这个字符串显示到页面上-->

（3）v-text

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

<h2>{{message}}</h2>
<h2 v-text="message"></h2>

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

<h2 v-text="message">张伟</h2>

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

（4）v-pre

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

<h2 v-pre>{{message}}</h2>

（5）v-cloak

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

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

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

用法如下：

<h2 v-cloak>{{message}}</h2>

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

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

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

最后，指定css效果：

<style>
    [v-cloak] {
      display: none;
    }
  </style>

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