由于Vue.js 使用了基于 HTML 的模板语法,所以能被遵循规范的浏览器和 HTML 解析器解析。
并且在底层实现上,vue将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
插值
文本插值
使用双大括号{{ }}实现文本插值,即文本数据绑定
通过使用 v-once 指令,也能执行一次性地插值,当数据改变时,插值处的内容不会更新。
原始html
如果需要插入编译后的html而不是纯文本,需要在html文件所需要插入html的标签上使用v-html指令,表示此处将插入html。例如:
<p v-html="rawHtml"</p>
p标签中将会被插入属性值 为rawHtml的html元素。
注意 :不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。反之,对于用户界面 (UI),组件更适合作为可重用和可组合的基本单位。
因为v-html是直接更新元素的innerHTML,vue当中的模板基于render机制,而v-html当中的是字符串,所以模板和v-html不能混用。
为了防止XSS 攻击。尽量只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。
标签属性
使用v-bind指令为标签绑定属性:v-bind:属性=" "
对于布尔 属性(只要存在就意味着值为 true)例如;
<button v-bind:disabled="isButtonDisabled">Button</button>
小坑:只有isButtonDisabled为false、null、undefined时,按钮点击才有效,如果为:“false”、""(空字符串)也是有效的。
使用js表达式
- 简单算数运算:±*/
- 多元运算:?:
- 函数运算:message.split(’’).reverse().join(’’)
每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
{{ var a = 1 }}
{{ if (ok) { return message } }}
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
<p v-if="seen">现在你看到我了</p>
这里,v-if 指令将根据表达式 seen 的值的真假来插入/移除
元素。
参数
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML attribute
<a v-bind:href="url">...</a>
动态参数
从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数。例如:
<a v-bind:[attributeName]="url"> ... </a>
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 data 属性 attributeName,其值为 “href”,那么这个绑定将等价于 v-bind:href
同样地,可以使用动态参数为一个动态的事件名绑定处理函数:
<a v-on:[eventName]="doSomething"> ... </a>
当 eventName 的值为 “focus” 时,v-on:[eventName] 将等价于 v-on:focus
动态参数表达式有一些语法约束,因为某些字符,如空格和引号,放在 HTML attribute 名里是无效的。变通的办法是使用没有空格或引号的表达式,或用计算属性替代这种复杂表达式。
在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写:
修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit">...</form>
缩写
v- 前缀作为一种视觉提示,用来识别模板中 Vue 特定的 attribute。当在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时,v- 前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时,v- 前缀也变得没那么重要了。因此,Vue 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>