模板语法

Vue 使用一种基于HTML的模板语法,使我们能够声明式的将其组件实例的数据绑定到呈现的DMO上. 所有的Vue 模板都是合法的HTML,并且可以被解析器 和浏览器正确处理. 这意味着我们可以使用现有的工具和库来处理模板,例如 HTML编辑器和代码高亮.

文本插值

最基本的数据绑定形式,使用语法,将数据绑定到模板中.

<div id="app">{{ message }}</div>

双大括号标签会被替换相应组件实例中message属性的值,同时每次message属性更改时,它也会同步更新

原始 HTML

双大括号数据会被解释为纯文本,而不是 HTML. 为了输出真正的 HTML,你需要使用v-html指令

<div id="app">
  <div v-html="rawHtml"></div>
</div>

注意: 使用v-html指令时,请确保你只对可信内容使用该指令,因为恶意内容可能会导致 XSS 攻击.

这里我们使用的v-html被称为指令. 指令由v-作为前缀,标明他们是由Vue提供的特殊 attribute .

Attribute 绑定

想要响应式的绑定一个属性,应该使用v-bind指令

<div id="app">
  <a v-bind:href="url">Link</a>
</div>

v-bind指令将a标签的href属性绑定到组件实例的url属性上. 如果url属性的值发生变化,href属性也会相应地更新.如果绑定值是null或undefined,那么该属性不会在最终编译的HTML中出现

简写

v-bind指令可以简写为冒号:

<div id="app">
  <a :href="url">Link</a>
</div>

同名简写

• 仅支持3.4版本以上 如果属性的名称与绑定的JavaScript变量名称相同,那么可以进一步简化语法为:

<!-- 与 :id="id" 相同 -->
<div :id></div>

<!-- 这也同样有效 -->
<div v-bind:id></div>

布尔型属性

布尔型属性依据 true/false值来决定是否渲染属性. 如果属性值为null,undefined或false,则该属性不会渲染到DOM中

<div id="app">
  <button :disabled="isButtonDisabled">Button</button>
</div>

这里的isButtonDisabled是一个布尔值,如果为true,则按钮将被禁用,否则按钮将可用. 如果isButtonDisabled为null,undefined或false,则不会渲染disabled属性到最终的HTML中.

动态绑定多个值

如果定义这样一个包含多个属性的对象

data()
{
  return {
    attributes: {
      id: 'my-element',
      class: 'my-class',
      disabled: true,
    },
  }
}

那么可以使用不带参数v-bind指令将对象的所有属性绑定到元素上

<div id="app">
  <div v-bind="attributes"></div>
</div>

使用JavaScript表达式

在模板中,Vue提供了完整的JavaScript表达式支持,可以在模板中所有的数据绑定都支持完整的JavaScript表达式

{
  {
    number + 1
  }
}

{
  {
    ok ? 'YES' : 'NO'
  }
}

{
  {
    message.split('').reverse().join('')
  }
}

<div :id = "`list-${id}`" > ID < /div>

注意: 模板表达式会被作为JavaScript代码进行解析,所以只能访问到组件实例中data、computed、methods中的属性和方法. 不能访问其他组件实例中的属性和方法,也不能访问window、document等全局对象.

在Vue模板内,JavaScript表达式可以被用在一下场景中:

• 在文本插值中
• 在v-bind指令中

仅支持表达式

每个绑定仅支持单一表达式,不能包含语句. 例如,以下代码是无效的:

<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流程控制也不支持,请使用三元表达式 -->
{{ if (ok) { return message } }}
<!-- 这是语句,不是表达式 -->
{{ for (let i = 0; i < 10; i++) { console.log(i) } }}

调用函数

模板表达式可以调用组件实例中定义的函数,但是不能调用全局函数. 例如,以下代码是无效的:

{{ window.alert('hello') }} {{ console.log('hello') }}

Tips 绑定的表达式中的方法在组件每次更新时都会被重新调用,因此不应该产生任何副作用,比如改变数据或者触发异步操作等

受限的全局访问

模板中的表达式将被沙盒化,仅能够访问到有限的全局对象列表.没哟显式包含在列表中的全局对象更不能在模板表达式中访问, 然而可以执行在app.config.globalProperties中显式声明的全局属性,提供给Vue表达式使用

指令 Directives

指令是带有v-前缀的特殊 attribute,指令 attribute 的期望值是一个JavaScript表达式(除了v-for和v-on之外). 指令的作用是当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM.以v-if为例:

<div id="app">
  <p v-if="seen">Now you see me</p>
</div>

v-if指令将根据seen属性的值来决定是否渲染<p>元素. 如果seen属性的值为true,则渲染<p>元素,否则不渲染<p>元素.

Tips
指令的值可以是一个JavaScript表达式,也可以是一个函数调用. 例如:

<div id="app">
  <p v-if="seen">Now you see me</p>
  <p v-if="message.length > 0">Message is not empty</p>
  <p v-if="message.length > 0 && message.length < 10">Message length is between 1 and 9</p>
</div>

参数 Arguments

某些指令会需要一个"参数".在指令名后通过一个冒号隔开做标识,比如使用v-bind指令来绑定一个HTML属性时,v-bind后面的href就是参数

<a v-bind:href="url">Link</a>

这里herf是参数,url是表达式的值. v-bind指令将href属性绑定到组件实例的url属性上. 如果url属性的值发生变化,href属性也会相应地更新. 在简写中参数前的一切都可以省略,例如:

<a :href="url">Link</a>

另一个例子是v-on指令,它用于监听事件. v-on指令的参数是事件名称,例如:

<button v-on:click="doSomething">Button</button>

这里click是参数,doSomething是表达式的值. v-on指令将监听click事件,当事件发生时,将调用组件实例的doSomething方法. v-on有一个对应的简写形式,使用@符号代替v-on,例如:

<button @click="doSomething">Button</button>

动态参数

有时我们需要动态地绑定指令的参数,可以使用方括号[]来包裹参数,例如:

<a v-bind:[attributeName]="url">Link</a>

这里attributeName是一个动态的属性名,它的值将作为参数传递给v-bind指令. 如果attributeName的值为href,那么v-bind指令将绑定href属性到组件实例的url属性上. 如果attributeName的值为data-id,那么 v-bind指令将绑定data-id属性到组件实例 的url属性上.

Tips 动态参数可以用于任何指令,例如:

<button v-on:[eventName]="doSomething">Button</button>

这里eventName是一个动态的事件名,它的值将作为参数传递给v-on指令. 如果eventName的值为click,那么v-on指令将监听click事件,当事件发生时,将调用组件实例的doSomething方法. 如果eventName的值为 mouseover,那么v-on指令将监听mouseover事件 ,当事件发生时,将调用组件实例的doSomething方法.

动态参数值的限制

动态参数中表达式的值当是一个字符串,或者是null,特殊值null意为显示移除该绑定,其他非字符串的值会触发警告

动态参数的语法限制

动态参数的的表达式因为某些字符的原因有一些语法限制,比如空格和引号

<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>

在绑定动态参数时要避免使用大写字母,因为浏览器会把特性名全部转为小写

<!-- 这会触发一个编译器警告 -->
<a v-bind:[someAttr]="value"> ... </a>

这个例子中最终将会被转换为:[someattr] ,这会导致警告,因为someAttr不是有效的DOM属性名,浏览器会把特性名全部转为小写. 所以需要使用kebab-case (短横线分隔命名)

<a v-bind:[some-attr]="value"> ... </a>

修饰符 Modifiers

修饰符是以点开头的特殊后缀,标明指令需要以一些特殊的方式被绑定 . 例如,.prevent修饰符告诉v-on指令在触发事件时调用event.preventDefault():

<button v-on:click.prevent="doSomething">Button</button>

完整的指令语法