Vue.js使用基于HTML的模板语法，允许开发者声明式地将DOM绑定到底层Vue实例。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，在应用状态改变时，Vue能智能地计算出重新渲染组件的最小代价并应用到DOM操作上。
如果你熟悉虚拟DOM并偏爱JS的原始力量，你也可不用模板直接写渲染(render)函数，使用可选的JSX语法。
插值
文本插值
数据绑定最常见的形式是使用"Mustache"（小胡子语法）语法(双大括号)的文本插值：
<p>{{message}}</p>
Mustache将会被替代为对应数据对象上的message属性的值，无论何时绑定的数据对象上message属性发生了改变，插值的文本内容都会更新。
<p v-once>{{message}}</p>
使用v-once指令也能执行一次性地插值，但是当数据改变时插值处的内容不会更新，请留心这会影响到该节点上所有的数据绑定。
原始HTML
Mustache双大括号将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需使用v-html指令。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{data.message}}</p>
<p v-html="html"></p>
<input type="text" v-model="data.message">
</div>
<script>
var data = {message:'hello', html:'<strong>world</strong>'};
var vm = new Vue({
el:'#app',
data:data
});
</script>
</body>
</html>
注意不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎。反之对于用户界面(UI)，组件更适合作为可重用和可组合的基本单位。
注意站点上动态渲染任意HTML可能非常危险，很容易导致XSS攻击，请只对可信内容使用HTML插值，绝不要对用户提供的内容使用插值。
特性
Mustache 语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{data.message}}</p>
<p v-html="html"></p>
<p v-bind:id="data.id"></p>
<input type="text" v-model="data.id">
</div>
<script>
var data = {id:1, message:'hello', html:'<strong>world</strong>'};
var vm = new Vue({
el:'#app',
data:data
});
</script>
</body>
</html>
在布尔特性的情况下，它们的存在即暗示为true， v-bind工作有所不同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{data.message}}</p>
<p v-html="html"></p>
<p v-bind:id="data.id"></p>
<input type="text" v-model="data.id">
<button v-bind:disabled="data.isBtnDisabled">Button</button>
</div>
<script>
var data = {
id:1,
message:'hello',
html:'<strong>world</strong>',
isBtnDisabled:"disable"
};
var vm = new Vue({
el:'#app',
data:data
});
</script>
</body>
</html>
当isDisabledBtn的值是null、undefined、false时，则disabled特性甚至不会被包含在渲染出来的<button>元素中。
使用JS表达式
迄今为止模板都只绑定简单的属性键值，但实际上对于所有数据绑定，Vue.js都提供了完全的JS表达式支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{data.index+1}} {{data.ok?'YES':'NO'}} {{data.message.split('').reverse().join('')}}</p>
<p v-html="html"></p>
<p v-bind:id="'user-'+data.id"></p>
<input type="text" v-model="data.id">
<button v-bind:disabled="data.isBtnDisabled">Button</button>
</div>
<script>
var data = {
id:1,
index:10,
ok:true,
message:'hello',
html:'<strong>world</strong>',
isBtnDisabled:"disable"
};
var vm = new Vue({
el:'#app',
data:data
});
</script>
</body>
</html>
JS表达式会在所属Vue实例的数据作用域下座位JS被解析，不过每个绑定都只能包含单个表达式。
# 语句无法解析
{{var tmp = 1}}
# 流程控制无法生效
{{ if(ok){return message} }}
模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date。不要在模板表达式中试图访问用户定义的全局变量。
指令
- 指令(Directives)是带有
v-前缀的特殊属性 - 指令属性的值预期是单个JS表达式(
v-for例外) - 指令职责是当表达式值改变时，将其产生的连带影响，响应式地作用于DOM。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p v-if="data.seen">data seen</p>
<input type="text" v-model="data.seen">
</div>
<script>
var data = {
seen:false
};
var vm = new Vue({
el:'#app',
data:data
});
</script>
</body>
</html>
v-if指令将根据表达式seen的值的真假来插入/移除<p>元素。
参数
指令能接收一个“参数”，在指令名称后以冒号表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<a v-bind:href="data.url">link</a>
<input type="text" v-model="data.url">
</div>
<script>
var data = {
url:'#'
};
var vm = new Vue({
el:'#app',
data:data
});
</script>
</body>
</html>
href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<a v-on:click="data.todo">link</a>
</div>
<script>
var data = {
todo:function(){
alert('to do');
}
};
var vm = new Vue({
el:'#app',
data:data
});
</script>
</body>
</html>
v-on指令用于监听DOM事件，其参数是监听的事件名称。
修饰符
修饰符(Modifiers)是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
缩写
v-前缀作为一种视觉提示，用来识别模板中Vue特定的特性，当你在使用Vue.js为现有标签添加动态行为(dynamic behavior)时，v-前缀很有帮助，然后对于一些频繁用到的指令来说，就会感到繁琐。同时，在构建由Vue.js管理所有模板的单页面应用程序(SPA-single page application)时，v-前缀也变得没那么重要了。因此Vue.js为v-bind和v-on这两个常用指令提供特定缩写：
<a v-bind:href="url">...</a>
<a :href="url"></a>
<a v-on:click="todo">...</a>
<a @click="todo">...</a>
他们看起来可能与普通的HTML略有不同，但:和@对于特性名来说都是合法字符，在所有支持Vue.js的浏览器都能被正确地解析。而且它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着更深入地了解它们的行为，你会庆幸拥有它们。
