Vue中的插值操作

Mustache语法

mustache语法中，不仅仅可以直接显示变量，也可以写简单的表达式
例如：对于Vue中已申明的数据或方法等，可以再HTML中以以下方式写入

<h2>{{message}}</h2>
<h2>{{message}}, wyl</h2>
<h2>{{firstName + lastName}}</h2>
<h2>{{firstName + '-' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter * 2}}</h2>

v-once指令

只在界面中显示没有改数据之前的数据，数据更改后界面中不会跟着更改

<h2 v-once>{{message}}</h2>

v-html指令

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

v-html="url"表示以html的形式来展示url

v-text指令

<h2 v-text="message"></h2>

与mustache的展示效果一致，通常情况下接受一个String类型，但是使用较少，因为相较于message而言不够灵活，当想要拼接其他内容的时候，会覆盖掉想要拼接的内容
例如：

<h2 v-text="message">,wyl</h2>

这种就只会展示message的内容，后面的内容会被覆盖

v-pre指令

<h2 v-pre>{{message}}</h2>

用于跳过这个元素和它子元素的编译过程，用于显示原本的mustache语法，比如例子中只会展示{{message}}这一内容，不会做任何的解析

v-cloak指令

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

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

在Vue解析之前，div中有一个属性v-cloak
在Vue解析之后，div中的v-cloak就没有了
实现一种在Vue解析之前指定div中的原代码不被显示出来的效果