vue：指令（插值操作、指令（v-once、v-html、v-text、v-pre、v-cloak））

1、插值操作（显示data中的数据）

（1）Mustache

Mustache也就是双大括号

（2）Mustache的基本使用

<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2>{{message+'  '+name}}</h2>
    <h2>{{num*2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:document.querySelector("#app"),
        data:{
            message:'你好',
            name:'zhai',
            num:23,
        }
    })
</script>
</body>

不仅可以取出数据，还可以对取出的数据进行一些简单的计算。

2、基础指令

（1）v-once指令

<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:document.querySelector("#app"),
        data:{
            message:'你好',
        }
    })
</script>
</body>

将响应式变成了非响应式，只会在第一次展示数据，不会随着数据的改变而改变

（2）v-html

<body>
<div id="app">
    <h2>{{url}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:document.querySelector("#app"),
        data:{
            url:'<a href="https://www.cnblogs.com/zhai1997/"></a>'
        }
    })
</script>
</body>

不添加标签的时候被解析为文本

<body>
<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:document.querySelector("#app"),
        data:{
            url:'<a href="https://www.cnblogs.com/zhai1997/">博客园</a>'
        }
    })
</script>
</body>

添加v-html后url可以被解析为地址

（3）v-text

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

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

能够显示数据，但是与Mustache相比，v-text不够灵活

（4）v-pre

<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:document.querySelector("#app"),
        data:{
            message:"你好",
        }
    })
</script>
</body>

用于跳过这个元素和它的子元素的编译过程，用于显示原本的Mustache语法

（5）v-cloak

在vue解析之前，div中有一个属性v-cloak，当vue解析之后该属性就消失了