Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层组件实例的数据。 所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。 结合响应性系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。 如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板, [直接写渲染 (render) 函数](https://v3.cn.vuejs.org/guide/render-function.html),使用可选的 JSX 语法。
所谓的模板语法就是将Vue的功能和HTML的DOM元素结合起来的方法。
插值:将Vue管理的数据在HTML中展示或使用。
记住,插值的数据是双向绑定的,也就是说会联动,你变化了我也跟着变。
使用“Mustache” (双大括号) 进行文本插值:
<span>Message: {{ msg }}</span>
使用 v-once 指令,可以进行一次性地插值,当数据改变时,插值处的内容不会更新。
<span v-once>这个将不会改变: {{ msg }}</span>
双大括号会将数据解释为普通文本,而非 HTML 代码。想要输出真正的 HTML代码,请使用v-html
指令:
<p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p>
上面 span
标签的内容将会被替换成为属性值 rawHtml
所代表的内容,并直接作为 HTML代码的一部分。
该操作容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要将用户提供的内容作为插值。
Mustache双花括号语法不能直接在 HTML标签的属性中使用,需要使用专门的 v-bind
指令来告诉Vue,这里有特殊的代码,请帮我解析:
错误: <div id="{{dynamicId}}"></div> 正确: <div v-bind:id="dynamicId"></div>
如果绑定的值是 null
或 undefined
,那么该属性将不会在DOM元素中出现。
对于布尔类型的属性 (它们只要存在就意味着值为 true
),v-bind
工作起来略有不同,在下面的例子中:
<button v-bind:disabled="isButtonDisabled">按钮</button> 注意和下面的进行区别 <button disabled="isButtonDisabled">按钮</button>
如果 isButtonDisabled
的值是 truthy,那么 disabled
属性将生效。如果该值是一个空字符串,它也会被包括在内,类似<button disabled="">
。对于其他 falsy值,该属性将被忽略。
提示:从现在开始,你要牢固树立一个概念,有Vue指令的属性与普通属性是完全两码事!
迄今为止,在我们的模板中,一直都只绑定简单的属性键值。
但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div> // 上面都包含了Vue语法。如果没有Vue的存在,它们都是字符串。
这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。
但有个限制:每个绑定语法都只能包含单个表达式,所以下面的例子都不会生效。
<!-- 这是语句,不是表达式:--> {{ var a = 1 }} <!-- 流控制也不会生效,请使用三元表达式 --> {{ if (ok) { return message } }}
指令 (Directives) 是带有 v-
前缀的特殊属性。
指令的使用形式一般如下:
v-xxx="aaaa"
aaaa
通常是单个 JavaScript 表达式 (这个时候不能将他们当作字符串看待,要当作变量、函数名看待)。
指令的作用是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。回顾我们在介绍中看到的例子:
<p v-if="seen">现在你看到我了</p>
这里,v-if
指令将根据表达式 seen
的值的真假来插入/移除 <p>
元素。
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。
例如,v-bind
指令可以用于响应式地更新 HTML属性:
<a v-bind:href="url"> ... </a>
在这里 href
是参数,告知 v-bind
指令将超级链接a标签的 href
属性与表达式 url
(实际上就是个JS变量)的值绑定。
另一个例子是 v-on
指令,它用于监听 DOM 的动作事件:
<a v-on:click="doSomething"> ... </a>
在这里参数是监听的事件名,也就是当这个a标签被点击时,执行doSomething函数。
也可以在指令参数中使用 JavaScript 表达式,方法是用方括号括起来:
<!-- 注意,参数表达式的写法存在一些约束,如之后的“对动态参数表达式的约束”章节所述。 --> <a v-bind:[attributeName]="url"> ... </a>
这里的 attributeName
会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果组件实例的 data 属性中有一个attributeName
,其值为 "href"
,那么这个绑定将等价于 v-bind:href
。
同样地,你可以使用动态参数为一个动态的事件名绑定处理函数:
<a v-on:[eventName]="doSomething"> ... </a>
在这个示例中,当 eventName
的值为 "focus"
时,v-on:[eventName]
将等价于 v-on:focus
修饰符 (modifier) 是以半角句号 .
指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
例如,.prevent
修饰符告诉 v-on
指令对于触发的事件调用 event.preventDefault()
:
<form v-on:submit.prevent="onSubmit">...</form>
v-
前缀作为一种Vue语法提示,用来识别模板中 Vue 特定的属性,告诉用户,不可以把它当作纯HTML字符串看待。
对于一些频繁用到的指令来说,每次都书写v-xxx
会感到非常繁琐。因此,Vue 为 v-bind
和 v-on
这两个最常用的指令,提供了特定的简写:
v-bind
缩写为:
<!-- 完整语法 --> <a v-bind:href="url"> ... </a> <!-- 缩写 --> <a :href="url"> ... </a> <!-- 动态参数的缩写 --> <a :[key]="url"> ... </a>
v-on
缩写为@
<!-- 完整语法 --> <a v-on:click="doSomething"> ... </a> <!-- 缩写 --> <a @click="doSomething"> ... </a> <!-- 动态参数的缩写 (2.6.0+) --> <a @[event]="doSomething"> ... </a>