以下是一份 Vue3 常用指令、属性、方法速查表,涵盖核心功能、Composition API 及实用技巧,方便快速查阅:
一、模板指令(Directives)
指令 |
说明 |
示例 |
v-bind / : |
动态绑定属性(支持简写 : ) |
<div :id="dynamicId"> |
v-model |
表单输入双向绑定(支持修饰符) |
<input v-model.trim="text"> |
v-on / @ |
绑定事件(支持简写 @ ) |
<button @click="handleClick"> |
v-for |
循环渲染元素(需加 key ) |
<li v-for="item in list" :key="item.id"> |
v-if / v-else |
条件渲染(动态添加/移除元素) |
<div v-if="show">显示内容</div> |
v-show |
条件显示(通过 display 切换) |
<div v-show="isVisible">显示内容</div> |
v-html |
渲染原始 HTML(注意 XSS 风险) |
<div v-html="rawHtml"></div> |
v-slot |
定义插槽内容(可简写为 # ) |
<template #header>标题</template> |
v-pre |
跳过编译(保留原始内容) |
<div v-pre>{
{ 此处不编译 }}</div> |
v-once |
只渲染一次(后续更新忽略) |
<div v-once>{
{ staticContent }}</div> |
v-memo |
缓存渲染结果(优化性能) |
<div v-memo="[value]">{
{ value }}</div> |
二、组件相关属性(Options & Props)
2.1 组件选项
属性 |
说明 |
示例 |
props |
定义组件接收的 props(支持类型校验) |
props: { title: String } |
emits |
声明组件触发的事件(推荐显式定义) |
emits: ['update:modelValue'] |
setup() |
Composition API 入口(替代 data /methods ) |
setup(props, { emit }) { ... } |
computed |
计算属性(基于响应式依赖缓存) |
computed: { fullName() { ... } } |
watch |
监听数据变化 |
watch: { count(newVal) { ... } } |
2.2 特殊属性