插值操作的指令

1.Mustach
Mustach语法就是{{ }}，所以也有人直接叫双括号语法

    <div id="app">
        <h1>{{message}}</h1>
        <h1>{{message}},bye!</h1>
        <h1>{{message + ' ' + message}}</h1>
        <h1>{{message}} + ' ' + {{message}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'good night'
            }
        })
    </script>

image.png

2.v-once
当我们希望页面中的数据只保持第一次渲染出的效果，不需要支持响应式的操作时，就可以使用v-once的属性

    <div id="app">
        <h1>{{message}}</h1>
        <h1 v-once>{{message}}</h1>
    </div>

在控制台修改message的值时，添加了v-once的h1中的值没有跟着变化，仍然展示着最初的数据

image.png

3.v-html
当后台传给我们的数据是个标签时，直接用Mustach展示的是未经解析完整的标签

    <div id="app">
        <h1>{{url}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'good night',
                url : <a href="http://www.baidu.com">百度一下</a>
            }
        })
    </script>

image.png

那我们希望展示按照HTML格式进行解析，并显示出相应的内容，就需要使用v-html指令

    <div id="app">
        <h1 v-html=url></h1>
    </div>

image.png

4.v-text
v-text能展示出文本信息，但是和Mustach相比不够灵活

    <div id="app">
        <h1 v-text=message></h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'good night',
            }
        })
    </script>

image.png

5.v-pre
v-pre能将数据不经过Vue的解析原封不动的展示出来

    <div id="app">
        <h1>{{message}}</h1>
        <h1 v-pre>{{message}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'good night',
            }
        })
    </script>

image.png

6.v-cloak
在Vue解析前，div会有一个v-cloak属性
在Vue解析后，div没有一个v-cloak属性

cloak是斗篷的意思，当遇到js文件没有解析完时，包含有Vue语法的HTML元素就像添加了v-pre的属性一样原封不动的展示数据，在js文件解析完成时，带有Vue语法的HTML代码会通过解析后生成相应的数据被展示出来，这个过程会有一个闪现的效果，用户体验感不好，所以给HTML元素添加v-cloak指令，并给带有v-cloak属性的HTML元素的样式设为dispaly:none，在js文件解析完后，v-cloak属行就会消失，想斗篷一样把自己罩住，display的样式也会失效，数据会通过Vue的解析展示出来。
可以用定时器的方式展示v-cloak的效果

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

    <div id="app">
        <h1 v-cloak>{{message}}</h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        setTimeout(function(){
            var app = new Vue({
            el : '#app',
            data : {
                message : 'good night',
            }
        })
        },1000)
    </script>

页面会在1秒后展示出good night，也因为v-cloak属行，在js没有解析完时，将数据用css的方法隐藏，没有显示出{{message}}，在1秒后js解析完毕，v-cloak的属性会自动消失，数据通过解析展示出good night。

image.png