模板语法

阅读: 10265     评论:0
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 代码。想要输出真正的 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>

如果绑定的值是 nullundefined,那么该属性将不会在DOM元素中出现。

对于布尔类型的属性 (它们只要存在就意味着值为 true),v-bind 工作起来略有不同,在下面的例子中:

<button v-bind:disabled="isButtonDisabled">按钮</button>
注意和下面的进行区别
<button disabled="isButtonDisabled">按钮</button>

如果 isButtonDisabled 的值是 truthy,那么 disabled 属性将生效。如果该值是一个空字符串,它也会被包括在内,类似<button disabled=""> 。对于其他 falsy值,该属性将被忽略。

提示:从现在开始,你要牢固树立一个概念,有Vue指令的属性与普通属性是完全两码事!

使用 JavaScript 表达式

迄今为止,在我们的模板中,一直都只绑定简单的属性键值。

但实际上,对于所有的数据绑定,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-bindv-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>

 起步 数据和方法 

评论总数: 0


点击登录后方可评论