Vue3 模板语法

Vue 模板语法是一种基于HTML 的模板语法；
Vue 会将模板编译成高度优化的 Javascript 代码；
不使用模板语法的话，可以使用 JSX 来手写渲染函数，但编译时优化的优先级低于模板语法；

文本插值

文本插值使用的是Mustache语法，即双大括号。

可以在文本插值中使用变量，调用函数等操作。

显示 HTML

双大括号会将数据处理成纯文本，想要显示原始的 HTML，需要使用 v-html 指令。

需要注意的是，在 HTML 中再使用文本插值或是调用函数时，这些数据绑定将会被解析为纯文本。

提示

你可以在上面的代码编辑器中的 span 标签使用文本插值来查看效果。

属性绑定

使用 v-bind 指令在 HTML 中绑定属性。

绑定的属性值类型可以是：string、boolean、number、object、array、function、null、undefined等。

简写

v-bind 指令可以使用简写的形式：v-bind:id="xxx" -> :id="xxx"。

布尔值属性

对于布尔值类型的属性，属性值为true时，该属性会存在于该元素上，值为false时，该属性将会被忽略。

提示

上面的例子中，点击按钮上不会存在disabled属性；如果绑定值是null或者undefined，那么该属性也会从渲染的元素上移除。

绑定多个值

使用对象来绑定多个值。

<template>
  <div v-bind="objectOfAttrs"></div>
</template>
<script setup>
  import { ref } from 'vue'

  const objectOfAttrs = ref({
    id: 'container',
    class: 'wrapper'
  })
</script>

1
2
3
4
5
6
7
8
9
10
11

相当于：

<template>
  <div :id="id" class="class"></div>
</template>
<script setup>
  import { ref } from 'vue'

  const id = ref('container')
  const class = ref('wrapper')
</script>

1
2
3
4
5
6
7
8
9

提示

这时候，v-bind不能使用简写形式。

使用 JS 表达式

vue 支持完整的 javascript 表达式。

javascript 表达式的使用场景有：

文本插值
指令

需要注意的事项：

仅支持表达式，不能是一个语句；

<template>
  <!-- 这是一个语句，而非表达式 -->
  {{ var a = 1 }}

  <!-- 条件控制也不支持，请使用三元表达式 -->
  {{ if (ok) { return message } }}
</template>

1
2
3
4
5
6
7

只能访问到有限的全局对象，比如 Math、Date、window;
没有显示的包含在列表中的全局对象不能在模板内的表达式中访问，比如用户自己添加在 window 上的属性；
可以使用 app.config.globalProperties 定义全局属性和全局方法；

指令

vue 的指令是带有 v- 前缀的特殊属性。

指令参数

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

<!-- 简写 -->
<a :href="url"> ... </a>
</template>

1
2
3
4
5
6

v-bind:href 表示使用 v-bind指令将url的值绑定到元素的href属性上，url 的值变化时，a 标签的 href 属性也会跟着改变，一般代码中使用简写形式。

<template>
<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>
</template>

1
2
3
4
5
6

v-on:click 表示监听元素的点击事件，点击事件触发时调用doSomething方法，一般代码中使用简写形式。

指令动态参数

可以在指令参数中使用 javascript 表达式。

<template>
  <!--
  注意，参数表达式有一些约束，
  参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
  -->
  <a v-bind:[attributeName]="url"> ... </a>

  <!-- 简写 -->
  <a :[attributeName]="url"> ... </a>
</template>
<script setup>
  import { ref } from 'vue'

  const attributeName = ref('href')
  const url = ref('www.konnga.cn')
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

attributeName 变量会被当做一个 javascript 表达式动态执行，得到值则是指令的最终参数。在上面的例子中，这个绑定等价于 v-bind:href。

<template>
  <a v-on:[eventName]="doSomething"> ... </a>

  <!-- 简写 -->
  <a @[eventName]="doSomething">
</template>
<script setup>
  import { ref } from 'vue'

  const eventName = ref('focus')
  const doSomething = () => {
    // ...
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

同样，绑定事件也可以使用动态参数，在上面的例子中，当eventName的值是 "focus" 时，v-on:[eventName] 就等价于 v-on:focus。

注意

动态参数的表达式的值应该是一个字符串或是null。值为 null 时，将会移除该绑定。
空格和引号，在 HTML 属性名称中都是错误的写法。

<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>
<!-- 避免使用大写的动态参数名 -->
<a :[someAttr]="value"> ... </a>

1
2
3
4

指令修饰符

以点开头的特殊后缀。

<template>
  <form @submit.prevent="onSubmit">...</form>
</template>

1
2
3

例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：

指令完整语法

内置指令及其修饰符

v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 在捕获模式添加事件监听器。
- .self - 只有事件从元素本身发出才触发处理函数。
- .{keyAlias} - 只在某些按键下触发处理函数。
- .once - 最多触发一次处理函数。
- .left - 只在鼠标左键事件触发处理函数。
- .right - 只在鼠标右键事件触发处理函数。
- .middle - 只在鼠标中键事件触发处理函数。
- .passive - 通过 { passive: true } 附加一个 DOM 事件。
v-bind
- .camel - 将短横线命名的 attribute 转变为驼峰式命名。
- .prop - 强制绑定为 DOM property。vue@3.2+
- .attr - 强制绑定为 DOM attribute。vue@3.2+
v-model
- .lazy - 监听 change 事件而不是 input
- .number - 将输入的合法字符串转为数字
- .trim - 移除输入内容两端空格
v-slot
v-pre - 跳过该元素及其所有子元素的编译。
v-once - 仅渲染元素和组件一次，并跳过之后的更新。
v-memo - 缓存一个模板的子树
v-cloak - 用于隐藏尚未完成编译的 DOM 模板。

Vue3 模板语法 #

文本插值 #

显示 HTML #

属性绑定 #

简写 #

布尔值属性 #

绑定多个值 #

使用 JS 表达式 #

指令 #

指令参数 #

指令动态参数 #

指令修饰符 #

指令完整语法 #

内置指令及其修饰符 #