Vue 教程第五篇—— 修饰符

最新推荐文章于 2025-09-12 14:04:02 发布
最新推荐文章于 2025-09-12 14:04:02 发布
阅读量139 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000014462918
本文详细介绍了Vue.js中的事件修饰符和表单修饰符的使用方法，包括如何阻止事件冒泡、使用按键修饰符以及实现表单输入的自定义验证等功能。

事件修饰符

对事件添加一些通用的限制，比如阻止事件冒泡，Vue 对这种事件的限制提供了特定的写法，称之为修饰符
用法：v-on:事件.修饰符

    <!--阻止事件冒泡.stop-->
    <div id="div1" class="stop" @click.stop="event1(1)">
    <!--使用事件捕获模式.capture-->
    <div id="div4" class="stop" @click.capture="event1(4)">
    <!--事件只作用本身.self，类似于已阻止事件冒泡-->
    <div id="div7" class="stop" @click.self="event1(7)">
    <!--阻止浏览器默认行为.prevent-->
    <a href="https://github.com/dk-lan" target="_blank" @click.prevent="prevent">dk's github</a>
    <!--只作用一次.once-->
    <a href="https://github.com/dk-lan" target="_blank" @click.once="prevent">dk's github</a>
    <!--修饰符可以串联.click.prevent.once-->
    <a href="https://github.com/dk-lan" target="_blank" @click.prevent.once="prevent">dk's github</a>

事件修饰符效果预览

按键修饰符

<div id="app">
    <fieldset>
        <legend><h3>ASCII = 13 时触发</h3></legend>
        <p></p>
        <input @keyup.13="submit">  
    </fieldset>
    <fieldset>
        <legend><h3>按回车键时触发</h3></legend>
        <p></p>
        <input @keyup.enter="submit">
    </fieldset> 
    <fieldset>
        <legend><h3>自定义按键 Vue.config.keyCodes.number1 = 49</h3></legend>
        <input @keyup.number1="submit" />       
    </fieldset> 
</div>

按键修饰符效果预览

表单修饰符

        <!-- 在 "change" 而不是 "input" 事件中更新 -->
        <input v-model.lazy="counter">  
        <!-- 自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值） -->
        <input v-model.number="counter" type="number">          
        <!-- 自动过滤用户输入的首尾空格 -->
        <input v-model.trim="counter">

表单修饰符效果预览

SimminonGarcia
关注
Vue 之 修饰符汇总
weixin_45092437的博客
01-05 1448
在Vue中，修饰符是一种特殊的语法，用于修改指令或事件绑定的行为，它们以点号（`.`）的形式添加到指令或事件的后面，并可以改变其默认行为或添加额外的功能。 Vue为我们提供了很多修饰符，相当于将一些常用DOM事件逻辑进行了封装，根据功能类别，共分为以下几类：① 事件修饰符。② 按键修饰符。③ 系统修饰符。④ 鼠标修饰符。 ⑤ 表单修饰符。⑥ 其他修饰符。
十四天学会Vue——Vue核心上篇（（理论+实战）第一天）
爱游戏爱学习的博客
05-22 1101
原理 解析版 双向数据绑定 v-bind单向数据绑定
vue中事件修饰符总结
weixin_44022586的博客
05-06 350
标题 vue中事件修饰符总结 .stop阻止冒泡 冒泡事件：同一事件从子元素向父元素触发，事件默认冒泡 .prevent阻止默认事件 .capture添加事件侦听器时使用事件捕获模式；同一事件从父元素向子元素触发 .self只当事件在该元素本身（比如不是子元素）触发时触发回调 .once事件只触发一次 事件函数只触发一次 可以和上面的修饰符连用；如果是阻止默认事件等，只阻止一次,就算...
VUE的事件修饰符总结
Seven_Amber的博客
10-09 326
.once 是将事件设置为只执行一次。如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件不再阻止。 <div v-on:click.once="alert(1)"> 只能执行一次，再次点击不会起作用//无once每次点击都可执行 </div> <a href="https://www.baidu.com"...
Vue中事件修饰符使用总结
欢迎大家交流前端开发技术、经验及各种知识沉淀
08-25 495
`在javaScript事件处理程序中经常调用event.preventDefault()和event.stopPropagation()等方法，在vue中对应着v-on的事件修饰符
Vue事件修饰符的总结
ChenHN98的博客
11-09 860
分为六点： 1.prevent 阻止默认行为(常用) 2.stop 阻止事件冒泡(常用) 3.once 事件值触发一次(常用) 4.capture 使用事件的捕获模式 5.self 只有event.target是当前操作的元素是才触发事件 6.passive 事件的默认行为立即执行 无需等待事件回调执行完毕 我们可以分别看一下具体是怎么使用...
vue学习经验总结（事件修饰符）
huhuhuja
08-18 202
1.常见时间修饰符 1.0.16 添加了两个额外的修饰符： 自定义全局按键修饰符 Vue.config.keyCodes.f2=113,就可使用了 <input @keyup.enter=“submit”> 全部的按键别名： enter tab delete esc space up down left right 6.使用ref获取dom元素 methods:{ getElement(){ console.log( this.$refs.myh3.innerText) }
Vue2的基础用法——Vue的指令
shhghvvh的博客
01-09 364
{{ }} ： vue提供的语法，专门用来解决v-text 会覆盖默认文本内容的问题。vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。指令(Directives)是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令。建议把数据项id属性的值作为key 的值（因为id属性的值具有唯一性)在vue中，可以使用v-bind:指令，为元素的属性动态绑定值;
从Vue2.0到React17——React开发入门
pingguocu3的博客
10-19 851
找工作时发现有一些公司是以React作为技术栈的，而且薪资待遇都不错，为了增加生存的筹码，所以还是得去学一下React，增加一项求生技能。因为我用Vue2.0开发项目已经四年了，故用Vue2.0开发项目的思路来学习React。前端项目是由一个个页面组成的，对于Vue来说，一个页面是由多个组件构成的，页面本身也是一个路由组件。对于React来说也是如此。
vue中常用的事件和修饰符简单总结
weixin_34090643的博客
06-11 215
1:阻止冒泡事件JS事件流其中一种是冒泡事件，当一个元素被触发一个事件时，该目标元素的事件会优先被执行，然后向外传播到每个祖先元素，恰如水里的一个泡泡似的，从产生就一直往上浮，到在水平面时，它才消失。在这个过程中，如果你只希望事件发生在目标元素，而不想它传播到祖先元素上去，那么你需要在“泡泡”离开对象之前刺破它。在vue中怎么写?2:阻止默认行为在vue中怎么写?3:键盘事件...
Vue 修饰符使用总结
薛定谔的猫-前端领域
05-25 601
修饰符是Vue的重要组成部分，利用好修饰符可以大大地提高开发的效率。 v-model lazy 修饰符——改变输入框的值时 v-model绑定的值 value 不会改变，当光标离开输入框时才会改变： <input type="text" v-model.lazy="value"> trim 修饰符——类似于JavaScript中的trim()方法，把v-model绑定的值的首尾空格给过滤掉： <input type="text" v-model.trim="value"&
Vue 中常用的事件总结（ 事件的概念 +事件要素+事件修饰符）
热门推荐
Love_malichao的博客
05-05 1万+
例如：methods：{//处理Click事件的逻辑。
vue学习-自定义事件
Rulelur的博客
10-28 252
与组件和 prop 一样，建议在父组件html使用kebab-case (短横线分隔命名)，在子组件用驼峰命名触发事件。 1.验证抛出的事件 要添加验证，将为事件分配一个函数，该函数接收传递给 $emit 调用的参数，并返回一个布尔值以指示事件是否有效 <template> <div @click="click()">{{ name }}</div> <input type="text" v-model="name" /> <bu
vue修饰符总结及积累
qq_40652539的博客
12-11 892
在vue中v-model、v-on除了常规用法，这些指令也支持特殊方式绑定方法，以修饰符的方式实现，通过在指令后面用小数点 .连接修饰符名称来调用修饰符，下面是对vue中的修饰符的总结及积累： 一、v-model的修饰符 v-model是用于在表单表单元素上创建双向数据绑定的指令。在 &amp;amp;lt;input&amp;amp;gt;和 &amp;amp;lt;textarea&amp;amp;gt;上，默认通过监听元素的 input 事件来更新绑定的...
关于vue2 和vue3 对比学习记录
cyadyx的博客
10-16 2612
1、创建一个 Vue 实例 https://v3.cn.vuejs.org/guide/instance.html#%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%AE%9E%E4%BE%8B vue2：每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ // 选项 }) vue3：每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的： Vue.createApp(/* 选项
VUE中自定义修饰符
weixin_42943920的博客
12-07 371
子组件created生命周期钩子触发时，modelModifiers会包含capitalize，且其值为true
vue3新特性
syl的博客
08-31 2265
Vue3新特性 节点标识 会自动识别某个节点是否是动态的，如果是动态的，会自动生成特定标识，(如: 内容文本标识，id标识等;) 目的: 在更新dom时，会自动跳过静态节点，定位到动态节点，大大提升效率; 静态节点: <spa>value</span> 动态节点: <span>{{ value }}</span> patchFlag setup(组合式API) 本质: setup 选项是一个接收 props 和 context 的函数; 执行时机
《Linux运维总结：Redis7.4.5哨兵集群开启ACL并配置用户》
最新发布
东城绝神
09-12 575
《Linux运维总结：Redis7.4.5哨兵集群开启ACL并配置用户》
前后端开发Mock作用说明，mock.ts
循环编织时间年轮，递归叩问存在本质，谁能在硅基荒原上，种出思想的玫瑰……
09-12 450
mock.ts是前端开发中用于模拟后端接口的TypeScript文件，通过生成虚假数据使前端无需等待后端即可独立开发。它定义数据结构、模拟请求响应，并提供与真实接口一致的调用方式。示例展示了如何生成用户数据并模拟分页接口，使用vite-plugin-mock等工具实现。前端代码调用Mock接口与调用真实接口方式相同，待后端完成时只需替换接口地址即可平滑切换，实现了前后端并行开发。
vue提示事件
03-26
### Vue.js 事件处理常见问题及提示 #### 1. 访问原生 JavaScript 事件对象 当需要在 Vue.js 的事件处理器中访问原生的 JavaScript 事件对象时，可以通过 `$event` 参数显式传递该对象。例如，在按钮点击事件中可以如下操作： ```html <div id="app"> <button @click="showEvent($event)">Click me</button> </div> <script> var app = new Vue({ el: '#app', methods: { showEvent: function (event) { console.log(event); // 打印整个事件对象[^1] alert(event.target.tagName); // 显示触发事件的目标标签名称 } } }); </script> ``` 如果忘记传递 `$event` 或者未正确定义方法参数，则可能导致 `undefined` 错误。 --- #### 2. 阻止默认行为和停止事件冒泡 Vue 提供了修饰符来简化常见的 DOM 操作，比如阻止默认行为或停止事件冒泡。以下是两个常用的修饰符及其用法： - **`.prevent`**: 阻止默认行为。 - **`.stop`**: 停止事件冒泡。 示例代码如下： ```html <!-- 阻止链接跳转 --> <a href="#" @click.prevent="handleLink">Go to Link</a> <!-- 停止子元素点击事件向父级传播 --> <div @click="parentHandler"> <button @click.stop="childHandler">Child Button</button> </div> ``` 上述代码展示了如何通过 `.prevent` 和 `.stop` 来控制事件的行为。 --- #### 3. 处理多个事件监听器 有时可能需要在同一元素上绑定多个事件监听器。此时需要注意优先级顺序以及逻辑冲突的可能性。例如： ```html <button @click.once="logOnce" @click="logEveryTime">Click Me Twice!</button> ``` 在此处，`@click.once` 只会在第一次点击时生效，而 `@click` 则每次都会执行。因此要特别注意不同修饰符之间的交互效果。 --- #### 4. 动态绑定事件 动态绑定事件允许开发者基于条件决定哪个事件被触发。这通常借助于模板语法完成： ```html <template> <button v-on:[eventName]="dynamicEventHandler">Dynamic Event</button> </template> <script> export default { data() { return { eventName: 'click' // 默认绑定 click 事件 }; }, methods: { dynamicEventHandler(e) { console.log('Triggered:', e.type); } } }; </script> ``` 此方式非常适合场景切换或者复杂业务逻辑下的事件管理。 --- #### 5. 全局错误捕获机制的重要性 尽管局部事件处理非常重要，但在大型应用中还需要考虑全局范围内的异常捕捉。这是因为即使单个组件内部实现了完善的错误检测手段，仍然可能存在跨模块调用失败等问题。为此推荐设置全局钩子函数来进行统一监控： ```javascript Vue.config.errorHandler = function(err, vm, info) { console.error(`Error in ${info}:`, err.message); }; ``` 这段代码片段能够帮助定位任何发生在渲染过程中的未知错误，并及时通知开发人员采取措施修复它们[^2]。 --- #### 6. Mixin 方法覆盖引发的问题 当使用混入（Mixin）技术共享可重用代码块时需格外小心，因为可能会发生命名冲突现象。“is not a function”的报错往往源于此类情况——即同名成员之间相互遮蔽所致。为了避免这种情况的发生建议遵循良好实践原则如前缀区分等方式加以规避[^5]。 --- ### 总结 以上列举了几种关于 Vue.js 中事件处理过程中可能出现的一些典型状况及相关解决方案。熟练掌握这些技巧有助于提高编码效率同时也增强了系统的健壮性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值