VUE——事件修饰符

最新推荐文章于 2024-05-29 18:15:03 发布
最新推荐文章于 2024-05-29 18:15:03 发布
阅读量118 收藏
点赞数
分类专栏： vue 学习笔记 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mintsolace/article/details/102962926
版权

.stop阻止冒泡

<body>
    <div id="app">
        <div class="inner" @click="div1handler">
            <input type="button" value="戳他" @click="btnHandler">
            <!--阻止冒泡是@click.stop="btnHandler-->
        </div>
    </div>
    <script>
        //创建Vue实例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                div1Handler(){
                    console.log('这是触发了inner div的点击事件')
                },
                btnHandler(){
                    console.log('这是触发了btn按钮的点击事件')
                }
            }
        });
    </script>
</body>

.prevent阻止默认事件

    <div id="app">
        <a href="www.baidu.com" @click="linkClick">有病治病</a>
        <!--阻止链接跳转是@click.prevent="linkClick"-->
    </div>
    <script>
        //创建Vue实例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                linkClick(){
                    console.log('触发链接的点击事件')
                }
            }
        });
    </script>

.capture添加事件侦听器时使用事件捕获模式

    <div class="inner" @click.capture="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
    </div>

    <script>
        //创建Vue实例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                div1Handler(){
                    console.log('这是触发了inner div的点击事件')
                },
                btnHandler(){
                    console.log('这是触发了btn按钮的点击事件')
                }
            }
        });
    </script>

.self只当事件在该元素本身（比如不是子元素）触发时触发回调

<!--使用.self实现只有点击当前元素，才会触发事件处理函数-->
<!--.self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为-->
    <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
    </div>

.once事件只触发一次

<!--使用.once只触发一次事件处理函数-->
<a href="www.baidu.com" @click.prevent.once="linkClick">有病治病</a>
mintsolace
关注
专栏目录
vue mint ui 使用以及例子
我竟然是凡人
10-24 1万+
npm 安装 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/
Vue 事件修饰符 详解
热门推荐
bk_yzw的博客
12-14 1万+
本人后端程序员，由于绑页面需要使用vue，在自学的过程中不懂事件修饰符，特此请教后才理解，在这提出我的分享，忘各位大神指正. vue官网上指出： 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为
Vue——事件修饰符
最新发布
专注写bug
05-29 2018
在官方文档中对于事件修饰符有一个很好的说明，本篇文章主要记录验证测试的案例。官方文档 事件修饰符。
学习VUE3——事件修饰符、按键修饰符
lss_033_lss的博客
05-22 798
为了让方法能更专注于数据逻辑而不用去处理 DOM 事件的细节，Vue 为 v-on 提供了事件修饰符。Tip：使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用会阻止元素及其子元素的所有点击事件的默认行为，而则只会阻止对元素本身的点击事件的默认行为。和修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。请勿同时使用和，因为已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则会被忽略，并且浏览器会抛出警告。
Vue框架学习笔记——事件修饰符
Aer_7z的博客
11-25 1045
在前文提到了“事件处理”后，我们可以为标签绑定事件，事件也存在着六种修饰符，称为事件修饰符。 它们分别是：prevent、stop、once、capture、self、passive，这些标签具有不同的功能，可以为事件叠加事件修饰符使用。 前三个常用，后三个了解就好。
Vue——事件处理及时间修饰符
m0_53912558的博客
03-06 611
3）methods对象中配置的函数，不要使用箭头函数！4）methods对象中配置的函数都是被Vue所管理的，this的指向是vm或组件实例对象。2）时间的回调要配置在methods对象中，最终会出现在Vue实例对象身上。5）self：只有event.target是当前操作的元素时才触发事件；6）passive: 时间的默认行为立即执行，无需等待事件回调执行完毕。4）capture：使用事件的捕获模式；'对不起，不能跳转，您已阻止默认事件！2）stop：阻止事件冒泡(常用)；1、Vue中的事件修饰符。
Vue——常用修饰符
qq812457115的博客
05-21 133
1. v-model修饰符 lazy：光标离开input框才会更新数据 trim：输入框过滤首尾的空格 number：先输入数字就会限制输入只能是数字，先字符串就相当于没有加number 2. 事件修饰符 stop：阻止事件冒泡，相当于调用了event.stopPropagation()方法 prevent：阻止默认行为，相当于调用了event.preventDefault()方法 self：只有元素本身触发时才触发方法，就是只有点击元素本身才会触发 once：事件只能用一次，无论点击几次，执行一次之
VUE学习——事件修饰符
JiangMeiXue的博客
02-09 413
父级和子级相互嵌套时，只触发子级，而不触发父级。
Vue技术——事件修饰符
u013140948的博客
11-19 436
Vue中的事件修饰符： 1.prevent: 阻止默认事件（常用）； 2.stop: 阻止事件冒泡（常用）； 3.once: 事件只触发一次（常用）； 4.capture: 使用事件的捕获模式； 5.self: 只有event.target是当前操作的元素时 才触发事件； 6.passive: 事件的默认行为立即执行，无需等待事件回调执行完毕； <div id="root"> <h2>欢迎来到{{name}}学习</h2> <a href="https://ww
详解Vue 事件修饰符capture 的使用
08-28
本文将详细介绍Vue中事件修饰符的一个非常重要的成员——capture修饰符。 首先，我们需要了解事件处理中的两个基本阶段：捕获阶段和冒泡阶段。当一个事件发生在一个DOM元素上时，该事件从最顶层的文档对象开始，...
vue中的.sync修饰符
最初的梦想
07-26 3540
vue中的.sync修饰符本质上是`@update：自定义事件名`这种方式的语法糖
vue——v-on指令的常用修饰符
weixin_44649210的博客
11-02 929
stop 作用： 阻止事件冒泡 <body> <div id="father" @click="bubbling('father')" style="background-color: red;"> <button id="son" @click="bubbling('son')">点击</button> </div> <script> let vm = new Vue({
Vue——事件监听
鹿蹊zz的博客
07-28 3545
​在前面的计数器案例中使用了v-onclick监听单击事件。​使用v-onclick给button绑定监听事件以及回调函数，@是的语法糖，也就是简写也可以使用@click。方法一般是需要写方法名加上()，在@click中可以省掉，如上述的。...
VUE——生命周期函数组建运行和销毁
mintsolace的博客
11-25 1260
</html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./lib/vue-2.4.0.js"></script>...
VUE——使用钩子函数
mintsolace的博客
11-24 812
指令定义函数提供几个钩子函数 bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。 update：所在组件的VNode更新时调用，但可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有。但可以通过比较更新前后的值来忽略不必要的...
VUE——全局过滤器的基本使用
mintsolace的博客
11-18 546
过滤器： Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustachc插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示； //过滤器调用时的格式，{{ name | 过滤器名称 }} Vue.filter('过滤器名称', function(){}) //过滤器中...
VUE——MVC、MVVM的关系图解 & vue基本代码
mintsolace的博客
10-29 500
MVVM是前端视图层的分层开发思想，主要把每个页面分成了M、V和VM。其中，VM是MVVM思想的核心；因为VM是M和V之间的调度者。 M：保存的是每个页面中单独的数据。 VM：是一个调度者，分隔了M和V。每个V层想要获取和保存数据的时候，都要由VM做中间的处理。 V：就是每个页面中的HTML结构 前端页面中使用MVVM的思想，主要是为了让我们开发更加方便，因为MVVM提供了数据的双向绑定； 注意：...
VUE——案例同上。根据关键字实现数组过滤
mintsolace的博客
11-17 463
<tbody> <!--之前，v-for中的数据，都是直接从data上的list中直接渲染过来的--> <!--现在，我们自定义一个search方法，同时把所有关键字通过传参的形式，传递给了search方法--> <!--在search方...
vue键盘事件修饰符
09-14
Vue.js 提供了键盘事件的修饰符，用于更方便地处理键盘事件。以下是一些常用的键盘事件修饰符： - `.enter`：监听 enter 键 - `.tab`：监听 tab 键 - `.delete`：监听 delete 键 - `.esc`：监听 esc 键 - `.space`：监听空格键 - `.up`：监听上箭头键 - `.down`：监听下箭头键 - `.left`：监听左箭头键 - `.right`：监听右箭头键 同时，你也可以结合其他修饰符使用键盘事件，例如： - `.ctrl`：监听同时按下 ctrl 键的情况 - `.alt`：监听同时按下 alt 键的情况 - `.shift`：监听同时按下 shift 键的情况 - `.meta`：监听同时按下 meta 键的情况（在 Mac 上，meta 键对应 command 键） 下面是一个示例代码，用于演示如何在 Vue.js 中使用键盘事件修饰符： ```html <template> <div> <input type="text" @keyup.enter="handleEnter" /> <input type="text" @keyup.tab="handleTab" /> <input type="text" @keyup.delete="handleDelete" /> </div> </template> <script> export default { methods: { handleEnter() { console.log('Enter key pressed'); }, handleTab() { console.log('Tab key pressed'); }, handleDelete() { console.log('Delete key pressed'); }, }, }; </script> ``` 在上面的示例中，我们使用了 `@keyup.enter`、`@keyup.tab` 和 `@keyup.delete` 来监听相应的键盘事件，并在触发时执行相应的处理函数。你可以根据需要修改处理函数的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值