模板语法|Vue3
模板语法
Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。在底层机制中,Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统,当应用状态变更时,Vue 能够智能地推导出需要重新渲染的组件的最少数量,并应用最少的 DOM 操作。
文本插值
最基本的数据绑定形式,使用的是“Mustache”语法 (即双大括号)
<span>Message: {{ msg }}</span>
双大括号标签会被替换为相应组件实例中 msg
property 的值。同时每次 msg
property 更改时它也会同步更新。
原始 HTML
使用v-html指令,双大括号将会将数据插值为纯文本,而不是 HTML。
<span v-html="rawHtml"></span>
注意:在网站上动态渲染任意 HTML 是非常危险的,因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html
,并且永远不要使用用户提供的 HTML 内容。
Attribute 绑定
使用v-bind指令,将元素的 id
attribute 与组件的 dynamicId
property 保持一致。如果绑定的值是 null
或者 undefined
,那么该 attribute 将会从渲染的元素上移除。
<div v-bind:id="dynamicId"></div>
简写语法:
<div :id="dynamicId"></div>
布尔型 Attribute
依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled
就是最常见的例子之一。
<button :disabled="isButtonDisabled">Button</button>
但是在以上场景有所不同,当 isButtonDisabled
为真值或一个空字符串 (即 <button disabled="">
) 时,元素会包含这个 disabled
attribute。而当其为假值时 attribute 将被忽略。
动态绑定多个值
如下包含多个attribute 的 JavaScript 对象
const objectOfAttrs = {
id: 'container',
class: 'wrapper'
}
通过不带参数的 v-bind
,可以将它们绑定到单个元素上
<div v-bind="objectOfAttrs"></div>
使用 JavaScript 表达式
Vue数据绑定支持完整的javascript表达式,如下:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>
仅支持表达式
注意:仅支持单一表达式,如下将被忽略
<!-- 这是一个语句,而非表达式 -->
{{ var a = 1 }}
<!-- 条件控制同样不会工作,请使用三元表达式 -->
{{ if (ok) { return message } }}
调用函数
在绑定的表达式中使用一个组件暴露的方法:
<span :title="toTitleDate(date)">
{{ formatDate(date) }}
</span>
注意:绑定在表达式中的方法在组件每次更新时都会被重新调用,因此不应该产生任何副作用,比如改变数据或触发异步操作。
受限的全局访问
模板中的表达式将被沙盒化,仅能够访问到有限的全局对象列表(如下)没有显式包含在列表中的全局对象将不能在模板内表达式中访问!不过,你可以自行在 app.config.globalProperties
上显式地添加他们,供所有的 Vue 表达式使用。
'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +
'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +
'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt'
指令
带有 v-
前缀的特殊 attribute。Vue 提供了许多内置指令,指令 attribute 的期望值为一个 JavaScript 表达式 (但是 v-for
、v-on
和 v-slot
将会是例外)。使用指令是为了在其表达式值变化时响应式地对 DOM 应用更新。如下:
<p v-if="seen">Now you see me</p>
v-if
指令会基于表达式 seen
的值的真假来移除/插入该 <p>
元素。
参数
有些指令会需要一个“参数”,在指令名后通过一个冒号隔开做标识。如下:
<a v-bind:href="url"> ... </a>
<!-- 简写 -->
<a :href="url"> ... </a>
另一个例子,监听click事件
<a v-on:click="doSomething"> ... </a>
<!-- 简写 -->
<a @click="doSomething"> ... </a>
动态参数
在指令参数上也可以使用一个 JavaScript 表达式,但需要包含在一对方括号内:
<!--
注意,参数表达式有一些约束,
参见下面“动态参数表达式约束”一节的解释
-->
<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>
attributeName
会作为一个 JavaScript 表达式被动态执行,计算得到的值会被用作最终的参数。如果你的组件实例有一个数据 property attributeName
,其值为 "href"
,那么这个绑定就等价于 v-bind:href
。
当然,也同样可以将一个函数绑定到动态的事件名称上
<a v-on:[eventName]="doSomething"> ... </a>
<!-- 简写 -->
<a @[eventName]="doSomething">
当 eventName
的值是 "focus"
时,v-on:[eventName]
就等价于 v-on:focus
。
动态参数值的限制
动态参数期望结果为一个字符串,或者是 null
。特殊值 null
意为显式移除该绑定。任何其他非字符串的值都将触发一个警告。
动态参数语法的限制
动态参数表达式因为某些字符的缘故有一些语法限制,比如空格和引号,在 HTML attribute 名称中都是不合法的。如下:
<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>
修饰符
以点开头的特殊后缀,表明指令需要以一些特殊的方式被绑定。比如.prevent
修饰符会告知 v-on
指令对触发的事件调用 event.preventDefault()
:
<form @submit.prevent="onSubmit">...</form>
最后,看下完整的指令语法示意图:
本文来自博客园,作者:七月的枫丶 ,部分内容摘自互联网,转载请注明原文链接:https://www.cnblogs.com/easybook/p/16171308.html