Vue常用指令和表单、事件修饰符的含义(萌新必看)

指令

v-text  只能输出文本,不解析标签
v-html  可以解析标签
v-bind  添加属性  简写形式  :
v-on  绑定事件   简写形式 @
v-cloak  解决 {{}} 闪烁问题 在标签内定义 v-cloak,然后在style样式里面写入
		 [v-cloak]{display:none}
v-model  双向数据绑定
v-once  添加这个指令,渲染的元素或者组件后期在修改不会跟着变化,静态
v-pre  可以阻止解析,会直接原样输出
v-if  v-else  v-else-if   显示隐藏
v-show  显示隐藏
v-for  列表渲染
v-slot  插槽  当子组件模板使用了slot 插槽后,子组件表内就可以写内容
		呈现在插槽中
directive  自定义指令
{{}}  输出指定数据

事件修饰符

.stop  阻止冒泡
.prevent  阻止默认行为
.capture  捕获,如果里面有冒泡的事件,谁加上它就先触发谁
.self  只有当 target 是当前元素才会被触发,冒泡和捕获都不能触发
.once  被它修饰的事件只会触发一次
.passive  不阻止默认行为,尽量不要和 parvent 一起使用,不然会失效
.enter  点了回车之后才能执行

表单修饰符

.lazy  不会实时更新,当你按下回车,才会更新一次
.trim  去除表单两边的空白符
.number  input输入的内容默认是字符串类型,可以使用 number 表单修饰符
		和它转换成数值类型

这次写的比较精简,希望能够帮助刚学习 Vue 的萌新方便理解.下期见!

<think>我们正在讨论Vue事件修饰符事件修饰符Vue为v-on指令提供的特殊后缀,用于处理DOM事件细节。 常用事件修饰符包括: .stop - 调用 event.stopPropagation(),阻止事件冒泡 .prevent - 调用 event.preventDefault(),阻止默认行为 .capture - 添加事件侦听器时使用 capture 模式(即事件捕获阶段处理) .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调(即事件源是自身才触发) .once - 只触发一次回调 .passive - 以 { passive: true } 模式添加侦听器,提升移动端性能(尤其滚动性能) 此外,还有按键修饰符(如 .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right)系统修饰键(如 .ctrl, .alt, .shift, .meta)等。 下面我们将详细说明这些事件修饰符的用法场景。</think>### Vue 常用事件修饰符详解 事件修饰符Vue 为 `v-on` 指令提供的特殊后缀,用于简化常见 DOM 事件处理逻辑。以下是核心修饰符及其应用场景: --- #### **基础事件修饰符** 1. **`.stop`** - 阻止事件冒泡 ```html <button @click.stop="handleClick">点击不会向上冒泡</button> ``` 2. **`.prevent`** - 阻止默认行为 ```html <form @submit.prevent="onSubmit">阻止表单默认提交</form> ``` 3. **`.capture`** - 使用捕获模式(从外向内触发) ```html <div @click.capture="outer">外层先触发</div> ``` 4. **`.self`** - 仅当事件源是元素自身时触发(忽略子元素冒泡) ```html <div @click.self="onlySelf">子元素点击不会触发</div> ``` 5. **`.once`** - 事件只触发一次 ```html <button @click.once="oneTime">仅生效一次</button> ``` 6. **`.passive`** - 提升滚动性能(不阻塞主线程) ```html <div @scroll.passive="onScroll">移动端优化</div> ``` --- #### **按键修饰符** 7. **系统按键** ```html <!-- 组合键 --> <input @keyup.ctrl.enter="submit"> <!-- 精确按键 --> <input @keyup.exact.esc="close"> ``` 8. **常用按键别名** | 修饰符 | 对应按键 | |--------------|----------------------| | `.enter` | Enter 回车键 | | `.tab` | Tab 键 | | `.delete` | Delete / Backspace | | `.esc` | Esc 键 | | `.space` | 空格键 | | `.up`/`.down`| 上下方向键 | --- #### **鼠标修饰符** 9. **鼠标按键限定** ```html <div @click.middle="middleClick">中键点击</div> <div @click.right.prevent>禁用右键菜单</div> <!-- 其他:.left, .right, .middle --> ``` --- ### 修饰符链式调用 可串联使用多个修饰符: ```html <!-- 阻止冒泡 + 阻止默认行为 + 只触发一次 --> <a @click.stop.prevent.once="doSomething">链接</a> ``` --- ### 性能与场景对比 | 修饰符 | 典型场景 | 注意事项 | |--------------|--------------------------|--------------------------| | `.passive` | 移动端滚动事件 | 不能与 `.prevent` 共用 | | `.exact` | 精确控制系统修饰键组合 | 需 Vue 2.5+ | | `.once` | 一次性操作(如表单提交) | 解绑后不影响手动触发 | ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值