vue 简单指令/Mustache语法

（这几个指令除了mustache，其它的基本用不上）

1、Mustache

mustache（胡子语法） 语法，就是 双大括号 {{}}
{{}} 里面可以写 变量 也可以写 表达式 ，也可以简单的运算

<h3>{{message}}</h3>	<!-- 这里就是直接输出message，message是可变的 -->
<h3>{{firstName}},wang</h3>		<!-- 这里 firstName 可变， ，wang是固定的-->
<h3>{{firstName + lastName}}</h3>	<!-- 这里是将两个变量拼接 -->
<h3>{{1+1}}</h3>	<!-- 这里就是简单地运算 -->

2、v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

<!-- 该指定后面不需要跟任何表达式，该指令表示元素和组件只渲染一次，不会随着数据的改变而改变 -->
<h2 v-once>{{message}}</h2>

3、v-html (不要随便用)

更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

<!-- 该指令后面通常会跟一个 string 类型，会将 string 的 html 解析出来并进行渲染 -->
<h2 v-html="url"></h2>
<script>
data:{
	url:'<a href="http://www.baidu.com">百度一下</a>'
}
</script>

4、v-text

更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

<!-- v-text 用起来不灵活，如果h2标签里面有内容，会被v-text的内容覆盖掉 -->
<h2 v-text="message"></h2>

5、v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<!-- v-pre  直接显示标签里的内容，不做解析-->
<h2 v-pre>{{message}}</h2>

6、v-cloak （基本用不上）

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<!-- v-cloak 基本用不上-->
<h2 v-cloak>{{message}}</h2>