今天的码农女孩学习了关于插值操作的知识

1.Mustache语法：可以直接写变量，可以写简单的表达式，可以直接做运算

     <div id="app">
        <h2>{{message}}</h2>
        <h2>{{message}},码农女孩</h2>
        <h2>{{one + two}}</h2>
        <!-- 两个名字之间加空格两种写法 -->
        <h2>{{one + ' ' + two}}</h2>
        <h2>{{one}} {{two}}</h2>
        <h2>{{num * 2}}</h2>
     </div>
     <script>
         var app=new Vue({
            el:"#app",
            data:{
                message:"你好",
                one:'hello',
                two:'kitty',
                num:1
            }
        })
     </script>

2. v-once指令：该指令后面不需要跟任何表达式（比如之前的v-for后面是由跟表达式的），该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

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

<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"hello kitty"
        }
    })
</script>

3.v-html指令：如果我们直接通过{{}}来输出，会将html代码一起输出，使用v-html指令，后面会跟一个string类型将string的html解析处理并进行渲染

    <div id="app">
        <h2 v-html="url"></h2>
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                url:"<a href='http://www.baidu.com'>百度一下</a>"
            }
        })
    </script>

4. v-text指令:作用和Mustache比较相似都是用于将数据显示在页面上，通常情况下接收一个string类型，但v-text不常用,使用起来不灵活

    <div id="app">
        <!-- 两者展示效果一样-->
        <h2>{{message}}</h2>
        <h2 v-text="message"></h2>
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello kitty"
            }
        })
    </script>

5. v-pre指令：用于跳过这个元素和它的子元素的编译过程，用于显示原本的Mustache语法

    <div id="app">
        <!-- 第一个h2显示编译内容你好；第二个h2会直接显示{{message}} -->
        <h2>{{message}}</h2>
        <h2 v-pre>{{message}}</h2>
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello kitty"
            }
        })
    </script>

6. v-cloak指令：在vue解析之前，div中有一个属性v-cloak;在vue解析之后，div没有一个属性v-cloak

<div id="app" v-cloak>{{message}}</div>
<script>
    setTimeout(function(){
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello kitty"
            }
        })
    },2000)
</script>