01 Vue的插值操作

一、Mustache语法（又称双大括号语法）

示例：

    
{{message}}
    
{{message}}
    
{{firstName + lastName}}
    
{{firstName + ' ' + lastName}}
    
{{counter*2}}

二、v-once的使用

只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过。

    {{message}}
    
{{message}}

当你手动改 message 的值时就会发现它只会渲染一次

三、v-html的使用

如果后端返回包含了标签的内容，可以使用 V-html转化为html页面的形式展示

    
{{url}}
   

四、v-text 的使用

使用Mustache语法（也就是双大括号{{}}）可以很方便的让我们将数据源对象的属性渲染到Vue的DOM元素中。但其也有一定的弊端，比如让你的网速慢，或者数据加载失败的时候会在浏览器中直接渲染插值，比如{{message}}。或者说，当你的JavaScript报错，或者你的用户禁用页面所有JavaScript时，也会有类似现象
在这种情况之下，对用户的体验并不好，因为我们的用户并不知道{{xxx}}表示的是什么？在Vue中，除了使用{{}}这样的插值语法渲染数据之外，还提供了一个v-text指令

    
{{message}}
    

五、v-pre的使用

跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑
< h2 v-pre>{{message}}< /h2 >即使data里面定义了message这里仍然是显示的{{message}}

    
{{message}}
    
{{message}}

六、v-clock的使用

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。也就是说在vue解析之前，div中有一个属性v-cloak 解析之后v-cloak会被移除。

    
    




    {{message}}

解析之前：
解析之后：