​Vue3 常用指令、属性、方法速查表

以下是一份 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 特殊属性

属性
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值