vue的插值操作

插值操作：将vue实例中data里面的某个值，插到页面DOM元素上进行显示。并改变data值可以动态改变显示。

1、Mustache

1.Mustache (胡子/胡须)
可以通过Mustache语法(也就是双大括号{{}})来进行插值操作；
数据绑定最常见的形式就是使用“Mustache”语法的文本插值
2.Mustache语法，不仅仅可以直接写变量，也可以写简单的表达式

 <div id="app">
        <h2>{{message}}</h2>
        <h2>{{firstName + lastName}}</h2>
        <h2>{{firstName + ' ' + lastName}}</h2>
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{counter *  2}}</h2>
    </div>

<script src="../js/vue.js"></script>
    const app = new Vue({
        el: "#app",
        data: {
            message: '你好啊！',
            firstName: 'koby',
            lastName: 'bryant',
            counter: 100
        }
    })

2、指令v-once

(1)作用：该指令表示元素和组件只会被渲染一次，之后不会随着数据的改变而改变；
即插值后，该指令所在的DOM元素中的插值内容只显示最开始的数据，不会变化。
(2)使用场景：在某些情况下，我们可能不希望界面随意的跟随改变，这个时候指令v-once，该指令后面不需要跟任何表达式，直接放上去就可以了。

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

3、指令v-html

(1)作用：可以将string内容进行解析，以html的形式展示出来，进行渲染。
(2)使用情况：
某些情况下，我们从服务器请求到的是一个HTML代码(带标签)，如果我们直接通过{{ }}来输出，会将HTML代码以字符串的格式插入到页面。如果我们希望将内容按照HTML格式进行解析，则可以用v-html指令

<div id="app">
   <h2>{{url}}</h2>
   <h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: '你好啊！',
            url: '<a href="http://www.baidu.com">百度一下</a>'
            //数据可能带标签，也可能是其他形式，则正常展示出来全是字符串；
            //v-html指令:对url进行解析，以html的形式来展示url，即为a标签
        }
    })
</script>

在这里插入图片描述
4、指令v-text

(1)作用:与Mustache比较相似，都是用于将数据显示在界面中；
(2)区别：Mustache后面可以任意拼接其他内容；指令v-text会将后面拼接的内容给覆盖掉；

 <div id="app">
    <h2>{{message}}朋友</h2> // 显示：你好啊！朋友
    <h2 v-text="message">朋友</h2> // 显示：你好啊！(朋友)被 (v-text的值你好啊！)覆盖
 </div>
 <script src="../js/vue.js"></script>
 <script>
     const app = new Vue({
         el: "#app",
         data: {
             message: '你好啊！'
         }
     })
 </script>

5、指令v-pre

用于跳过该元素和它子元素的编译过程，显示原本的内容。
即vue实例不去解析该元素中的内容，不按照data的内容显示数据，显示原本内容；

<div id="app">
   <h2>{{message}}</h2> // 显示：你好啊！
   <h2 v-pre>{{message}}</h2> // 显示：{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: '你好啊！'
        }
    })
</script>

6、指令v-cloak

(1)作用：可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。通常是和CSS的display：none结合使用。
(2)使用场景：在执行vue实例前，如果当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码，等执行vue实例后会再变成data对应的内容，这样体验感就不太好。我们可以使用 v-cloak 指令来解决这一问题。
(3)总结：在vue解析前指令v-cloak会起作用，设置内容不显示，在vue解析后v-cloak不会起作用，则显示出data中对应的数据。 (则不显示html中原本的内容，直接显示出解析后的数据)

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

<div id="app" v-cloak>
     <h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    // 在vue解析之前，div中有一个属性v-cloak,设置一个样式display：none，让{{message}}不显示出来；
    // 在vue解析之后，div中没有属性v-cloak,则属性样式无作用，则显示解析的内容；
    setTimeout(function () {
        const app = new Vue({
            el: "#app",
            data: {
                message: '你好啊！'
            }
        })
    }, 1000)
</script>