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>