[Vue3]模板语法

官网文档： https://cn.vuejs.org/guide/essentials/template-syntax.html

 

每个组件都是由createApp创建

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

 

Vue3.4+ 支持v-bind同名简写

如果属性名称与要绑定的 JavaScript 值相同，语法可以进一步缩短，省略属性值

<!-- same as :id="id" -->
<div :id></div>

<!-- this also works -->
<div v-bind:id></div>

 

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。

v-bind 在这种场景下的行为略有不同：

 

<button :disabled="isButtonDisabled">Button</button>

 

当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

 

动态绑定多个值

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

<!--通过不带参数的 v-bind，你可以将它们绑定到单个元素上： -->
<div v-bind="objectOfAttrs"></div>

 

受限的全局访问​

模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。
没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。

 

指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内： 

<!-- 注意，参数表达式有一些约束，参见下文 -->
<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

<!-- 相似地，你还可以将一个函数绑定到动态的事件名称上 -->
<a v-on:[eventName]="doSomething"> ... </a>

<!-- 简写 -->
<a @[eventName]="doSomething">

​动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。
动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的。
如果需要传入一个复杂的动态参数，我们推荐使用计算属性替换复杂的表达式。