vue插值操作及相关指令（mustache语法，v-once,v-pre,v-text,v-html，v-cloak）_使用mustache语法插入时为了输入真正的html代码需要的指令-优快云博客

本文详细介绍了Vue.js中的插值操作与指令用法，包括mustache语法、v-once、v-pre、v-text、v-html和v-cloak等，解释了它们如何在页面渲染中发挥作用，以及在不同场景下的应用。

vue的插值操作是将vue实例中data对象中的文本数据插入到HTML元素的content中去
在这里插入图片描述

<body>
    <div id="app">
       <h2>{{message}},world</h2>
       <h2 v-once>{{message}}</h2>
       <h2 v-pre>{{message}}</h2>
       <h2 v-text='message'>,world</h2>
       <h2 v-html='url'></h2>
        <h2 v-cloak>{{message}}</h2>
    </div>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',
                url:'<a href="www.baidu.com">百度</a>'
            },
            methods:{
            }
        })
    </script>
</body>

结果在这里插入图片描述
mustache：即是使用{{}}的形式将需要插入的数据括起来放到元素内容中，mustache语法不仅可以直接写变量也可以写简单的表达式，同时也可以将methods中的方法放入其中，这将展示方法返回的结果内容。
v-once：表示元素和组件只会渲染一次，不会随着所插入数据的改变而改变
v-pre：使用了v-pre指令的元素不会解析元素内容，会将元素的内容原封不动的显示出来
v-text：和mustache比较相似，不过用了v-text后，在元素中写的内容将会被v-text绑定的内容覆盖
v-html:会把数据的HTML解析出来并且进行渲染
v-cloak:某些情况下，如网络较卡时浏览器会显示出未编译的mustache语法内容，使用v-cloak后，在数据解析出来前元素不会显示，当元素中的数据解析出来后再正常显示，避免插值闪现。