Vue.js使用基于HTML的模板语法(因此能被遵循规范的浏览器和HTML解析器解析),可以声明式地将DOM绑定至底层Vue实例的数据.
在底层实现上,Vue将模板编译成虚拟DOM渲染函数,结合系统函数,Vue可以计算出最少需要重新渲染多少组件,并把DOM操作次数减到最少.
ps. 熟悉虚拟DOM或偏爱JS,可以不用模板,直接写渲染(render)函数,使用JSX.
1. 插值
1.1 文本
Mustache语法(双大括号)的文本插值:
// Mustache标签会被替换为对应数据对象上msg属性的值,无论何时,属性改变,插值都会更新.
<span>Message: {{ msg }}</span>
v-once指令执行一次性地插值,数据改变时,插值不会更新
<span v-once>这个将不会改变：{{ msg }}</span>
1.2 原始HTML
双大括号会将数据解析成普通文本,而非HTML代码
// span的内容会被替换成属性值rawHtml,直接作为HTML(会忽略解析属性值中的数据绑定)
<span v-html="rawHtml"></span>
ps. 不能使用v-html来复合局部模板,Vue不是基于字符串的模板引擎；反之对于用户界面(UI),组件更适合作为可重用、可组合的基本单位.
注：绝不要对用户提供的内容使用插值(动态渲染的任意HTML容易导致XSS攻击)
1.3 特性
Mustache语法不能作用在HTML特性上,可以用v-bind指令
<div v-bind:id="dynamicId"></div>
// 布尔特性(只要存在就意味着值为true)
// 如果isButtonDisabled的值是null、undefined或false,则disabledb特性甚至不会被包含在渲染出来的button元素中.
<button v-bind:disabled="isButtonDisabled">Button</button>
1.4 使用JS表达式
// 这些表达式会在所属Vue实例的数据作用域下作为JS被解析,每个绑定都只能包含单个表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list' + id"></div>
// 这是语句,不是表达式
{{ var a = 1 }}
// 流控制也不会生效,请使用三元表达式
{{ if (ok) { return message } }}
ps. 模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如Math、Date.不应该在模板表达式中访问用户定义的全局变量.
2. 指令
指令(Directives)是带有v-前缀的特殊特性,它的值预期是单个JS表达式(v-for除外).职责是当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM.
// v-if指令根据表达式seen值的真假来插入/移除p元素
<p v-if="seen">看见我了</p>
2.1 参数
一些指令能够接受一个"参数",在指令之后以冒号表示.
// 这里的href参数告知v-bind指令将该元素的href特性与表达式url的值绑定.
<a v-bind:href="url">...</a>
// v-on指令用于监听DOM事件,参数是监听的事件名.
<a v-on:click="doSomething">...</a>
2.2 动态参数
这里的attributeName会被作为一个JS表达式进行动态求值,求得的值将会作为最终的参数使用.
// 例如attributeName值为"href",则该绑定等价于v-bind:href
<a v-bind:[attributeName]="url">...</a>
同样地,也可以使用动态参数为一个动态的事件名绑定处理函数.
// 当eventName的值为"focus"时,v-on:[eventName]等价于v-on:focus.
<a v-on:[eventName]="doSomething">...</a>
ps. 对动态参数的值的约束
动态参数预期会求出一个字符串,异常情况下值为null,这个特殊的null值可以显性地用于移除绑定.任何其他非字符串类型的值都会触发警告.
ps. 对动态参数表达式的约束
某些字符(空格/引号)放在HTML特性名里是无效的,会触发编译警告.
// 可以使用没有空格/引号的表达式,或用计算属性替代这种复杂表达式
<a v-bind:['foo' + bar]="value">...</a>
在DOM中使用模板(直接在一个HTML文件里撰写模板)需要回避大写键名,浏览器会把特性名全部强制转为小写.
// 在DOM中使用模板时这段代码会被转换为v-bind:[someattr]
<a v-bind:[someAttr]="value">...</a>
2.3 修饰符
修饰符(modifier)是以半角句号.指明的特殊后缀,用来指出一个指令应该以特殊方式绑定.
// .prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault().
<form v-on:submit.prevent="onSubmit">...</form>
3. 缩写
v-前缀作为一种视觉提示,用来识别模板中Vue特定的特性.使用vue.js为标签添加动态行为时,v-很有帮助.
然而使用频繁的指令就会很繁琐,且在构建由vue管理所有模板的单页面应用程序(SPA),v-就没那么有必要了.因此,Vue为v-bind和v-on两个常用的指令提供了特定简写.
3.1 v-bind 缩写
// 完整语法
<a v-bind:href="url">...</a>
// 缩写
<a :href="url">...<a/>
3.2 v-on 缩写
// 完整语法
<a v-on:click="doSomething">...</a>
// 缩写
<a @click="doSomething">...</a>