- 模板语法
- Render
- template
- el
Vue模板语法具有三种方式，能够被渲染成虚拟DOM加载到页面，优先级由上到下。
插值
文本
使用“Mustache”语法 (双大括号) 的文本插值
<span>{{message}}</span>
绑定的数据对象上 message 属性发生了改变，插值处的内容都会更新。
使用 v-once 指令
<span v-once>{{message}}</span>
绑定的数据对象上 message 属性发生了改变，插值处的内容不会更新。
原始HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令
<!-- 输出 <span style='color:red;'>This should be red</span> -->
<div>{{rawHtml}}</div>
<!-- 输出 This should be red -->
<div v-html="rawHtml"></div>
特性
“Mustache”语法不能作用于HTML特性上，应该使用V-bind语法
<button v-bind:disabled="isButtonDisabled">Button</button>
用于绑定HTML特性
使用JavaScript表达式
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。每个绑定都只能包含单个表达式，模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
指令缩写
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
