vue3模版语法

Vue 的模板语法（template syntax）是 Vue 框架中用于声明式地绑定 DOM 的方式，核心是将 HTML 与 Vue 实例的数据绑定起来。
下面是常用的 Vue 模板语法总结（以 Vue 3 Composition API 为基础，也适用于 Vue 2 的 Options API）：

基本语法

插值语法（Interpolation）

用于绑定文本、属性等。

<!-- 文本插值 -->
<p>{{ message }}</p>

<!-- HTML 插值 -->
<p v-html="rawHtml"></p>

⸻

指令语法（Directives）

Vue 指令以 v- 开头，用于在模板中执行特殊操作。

常用指令：

• v-bind：绑定属性（可简写为 :）

<img v-bind:src="imageUrl">
<img :src="imageUrl">

• v-model：双向绑定表单元素

<input v-model="inputText">

• v-on：绑定事件（可简写为 @）

<button v-on:click="doSomething">点击</button>
<button @click="doSomething">点击</button>

• v-if / v-else-if / v-else：条件渲染

<p v-if="seen">显示</p>
<p v-else>隐藏</p>

• v-show：通过 display 控制显示隐藏（不会移除 DOM）

<p v-show="isVisible">内容</p>

• v-for：列表渲染

<li v-for="(item, index) in items" :key="index">{{ item }}</li>

计算属性和方法

虽然这不是模板语法本身，但它们是模板表达式常用的依赖来源：

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

<template>
  <p>{{ double }}</p>
  <button @click="increment">加一</button>
</template>

事件修饰符

<form @submit.prevent="onSubmit">...</form>
<!-- 常用修饰符有 .stop .prevent .capture .self .once 等 -->

键修饰符

<input @keyup.enter="onEnter">

模板语法的 底层机制

模板编译过程

Vue 模板最终会被编译成 render 函数，例如：

<p>{{ message }}</p>

会被编译成：

createVNode("p", null, ctx.message)

也就是说，模板语法只是语法糖，Vue 会将它转化为虚拟 DOM 的构造代码。

模板表达式的限制

模板中的表达式是 JavaScript 表达式，但有一些限制：

✅ 允许的：
• 属性访问（如 user.name）
• 方法调用（如 sayHi()）
• 三元运算（如 isOk ? ‘yes’ : ‘no’）
• 算术运算（如 count + 1）

❌ 不允许的：
• 语句（如 if, while, try）
• new, eval 等全局对象创建
• 多行表达式
• 修改数据（比如 count++ 是不允许的）

Vue 会在构建阶段对模板做静态分析并抛出警告。

动态指令参数

<!-- 动态绑定属性名 -->
<input v-bind:[propName]="value">

<!-- 动态事件名 -->
<button v-on:[eventName]="handler">

注意：[propName] 和 [eventName] 必须是合法的 JS 表达式，并且最终解析为字符串。

插槽与作用域插槽（高级用法）

插槽是 Vue 组件复用的核心机制之一。

普通插槽

<MyCard>
  <template #default>
    <p>插入的内容</p>
  </template>
</MyCard>

具名插槽

<MyCard>
  <template #header>头部</template>
  <template #footer>底部</template>
</MyCard>

作用域插槽（从子组件获取数据）

<!-- 子组件 -->
<slot :item="item"></slot>

<!-- 父组件 -->
<MyList v-slot="{ item }">
  <p>{{ item.name }}</p>
</MyList>

v-for 的细节

• v-for 默认没有 key，会发出性能警告。
• 可以和 v-if 一起使用，但最好避免在同一个元素上同时使用。

<li v-for="item in list" :key="item.id">
  {{ item.name }}
</li>

性能优化技巧

静态内容优化

Vue 会将静态内容抽取成 hoisted 静态节点，避免重复创建。

使用 v-once 静态渲染一次

<p v-once>{{ staticText }}</p>

使用 v-memo（Vue 3.2+）

<!-- 仅当 key 变化时重新渲染 -->
<p v-memo="[someReactiveDep]">{{ expensiveComputation }}</p>

模板 VS JSX

Vue 支持 JSX 语法（特别是在组合式 API 中），但模板语法更适合非工程师和组件声明。

结合 Composition API 的场景

使用

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">点击 {{ count }}</button>
</template>