1.vue的插值操作

1.v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点被视作为静态内容并跳过。

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

    </div>
    <script src="../vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                message:"你好啊"
            }
        })
    </script>

 

运行结果

2.v-html

一个链接

 <div id="app">
        <h2>{{url}}</h2>
        <h2 v-html="url"></h2>

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

3.v-text

更新元素的文本

一般不使用它

 <div id="app">
        <!-- 不推荐使用，字符串拼接不方便 -->
        <!-- <h2>{{message}}，王小燕</h2>
        <h2 v-text="message">，王小燕</h2>这个会进行覆盖 -->
        <h2>{{message}}</h2>
        <h2 v-text="message"></h2>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊"
            }
        })
    </script>

4.v-pre：不需要解析 原方不动的显示出来

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


    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊"
            }
        })
    </script>

5.v-cloak：和css规则如[v-cloak]{display:none}一起使用时，这个指令可以隐藏未编译的mustache标签直到实例准备完毕

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

    </div>
    <script src="../vue.js"></script>
    <script>
        //在vue解析之前，div中有一个属性v-cloak
        //在vue解析之后，div中没有一个属性v-cloak
        setTimeout(function () {
            const app = new Vue({
                el: "#app",
                data: {
                    message: "你好啊"
                }
            })
        },2000)

    </script>

想象这是一个gif，它在前面的时候没有出现，等到两秒之后会出现。