【溯源篇】从头看vue（三）——事件修饰符的使用方式（.prevent、.once、.self、.stop、.capture）

最新推荐文章于 2024-04-05 13:33:40 发布
最新推荐文章于 2024-04-05 13:33:40 发布
阅读量289 收藏
点赞数 1
分类专栏： vue基础教程【单页面示例】 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43361722/article/details/115308037
版权

学习地址：https://www.bilibili.com/video/BV1mz4y127UG?p=10

<body>
    <div class="bgcolor" id="app">
    	<!-- 内容-->
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',

        // 数据
        data:{
            message:'今天好热啊！想吃雪糕！',
            tag:'<strong>i am strong</strong>',
            tag1:'<a href="http://www.baidu.com">百度</a>',
        },
        methods:{
            fun(){
                console.log("这是一条打印")
            },
            fun1(e){
                console.log('~~~~' + e )
            }
        }
    });
</script>

.prevent

<!-- .prevent ———— 阻止默认行为，比如a跳转 -->
<a href="http://www.baidu.com" @click.prevent="fun()">百度</a>

// 结果：只执行fun（）不跳转

.once

<!-- .once ———— 只有第一次触发 -->
<button @click.once="fun()">只能点一次的按钮</button>

.self

		<!-- 事件冒泡 -->
        <!-- .self ———— 点击本身触发（三层div同时加.self才能生效，否则冒泡还是存在） -->
        <div @click.self="fun1('父亲元素')">
            父亲元素
            <div @click.self="fun1('儿子元素')">
                儿子元素
                <div @click.self="fun1('孙子元素')">孙子元素</div>
            </div>
        </div>

		// 结果:点击孙子元素只打印“孙子元素”，点击儿子元素只打印“儿子元素”，点击父亲元素只打印“父亲元素”，

.stop

		<!-- .stop ———— 阻止当前标签事件冒泡 -->
        <div @click="fun1('父亲元素')">
            父亲元素
            <div @click="fun1('儿子元素')">
                儿子元素
                <div @click.stop="fun1('孙子元素')">孙子元素</div>
            </div>
        </div>
        
        // 结果:点击孙子元素只打印“孙子元素”，点击儿子元素打印“儿子元素 父亲元素”

.capture

		<!-- .capture ———— 由外到内事件捕获 -->
        <div @click.capture="fun1('父亲元素')">
            父亲元素
            <div @click="fun1('儿子元素')">
                儿子元素
                <div @click="fun1('孙子元素')">孙子元素</div>
            </div>
        </div>
		
		// 结果:点击孙子元素打印“父亲元素 儿子元素 孙子元素”，与初始状态相反
小鱼小鱼干
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue.js中事件修饰符.self的用法(详解)
11-26
总的来说，Vue.js 的 `.self` 事件修饰符提供了一种优雅的方式来限制事件处理器的触发，使得开发者可以更精准地控制事件的传播。通过使用`.self`，你可以确保事件处理函数只响应目标元素自身的事件，而不是任何间接...
Vue.js 事件修饰符的使用教程
10-17
在实际开发中，不可避免的会使用到对于事件的操作，如何处理 DOM 事件流，成为我们必须要掌握的技能。这篇文章主要介绍了Vue.js 事件修饰符的使用教程,需要的朋友可以参考下
vue中事件修饰符，stop,prevent,capture,self,once
很多时候犯错都是在不知情的情况下发生的
06-27 1237
https://blog.csdn.net/weixin_44994731/article/details/103925106?utm_source=app&app_version=4.9.3&code=app_1562916241&uLinkId=usr1mkqgl919blen 1 1,stop修饰符，能够阻止冒泡事件，按照案例说明如下： 按钮在div容器中。 ①，点击框中非按钮的位置，会触发div的事件 ②点击图中 “stop事件” 按钮 ，会发生冒泡事件，执行按钮
09 Vue3中的v-once指令
Python私教
12-18 541
v-once主要用来实现一次渲染，有点类似于单例模式的概念。使用v-once渲染的内容，无论后来如何发生变化，是否为响应式，在页面中显示的始终是第一次展示给用户的内容。不过，这个指令使用的场景也非常少，作为了解即可。
初识Vue 3.0 —— v-once : 一次性地插值
QUX轻博客
12-14 261
<h5>8.v-once一次性地插值，数据再发生变化就不再更新了:</h5> <p class="oncebox" ><sp...
Vue3 中的 v-once 指令：只渲染一次，提高性能
m0_73311728的博客
05-10 868
Vue3 中的v-once指令是优化组件性能的一个好工具，它可以帮助我们在需要只渲染一次的静态场景中提高页面性能。但需要根据具体的使用场景来决定是否应用它，否则会对组件正常的数据更新产生影响。在实际开发中，我们可以通过定期使用性能分析工具来检查应用的性能问题，并根据分析结果采取相应的优化措施，从而提高应用的整体性能和用户体验。
Vue的常用指令3（v-once和v-cloak）
lihui61357457的博客
12-01 297
详情可见 v-once <!-- 1.什么是指令? 指令就是Vue内部提供的一些自定义属性, 这些属性中封装好了Vue内部实现的一些功能 只要使用这些指令就可以使用Vue中实现的这些功能 2.Vue数据绑定的特点 只要数据发生变化, 界面就会跟着变化 3.v-once指令: 让界面不要跟着数据变化, 只渲染一次 --> <!--这里就是MVVM中的View--> <div id="app"> <p v-once>原始数据: {{ name }}&
Vue的v-bind属性绑定和v-on事件触发及事件修饰符(.stop、.prevent、.capture、.self、.once)
01-08
一、v-bind 先来一个常见场景： 在vue里定义了个名为mytitle的属性 var vm=new Vue({ el:#app, data:{ mytitle:This is a title! }, ...此时 只会将mytitle当作普通字符串 并不会去vue...使用v-bind的时候 还可在
Vue 事件处理 -- 事件修饰符（prevent、stop、capture、self、once）
最新发布
libingjiedd的博客
04-05 1339
5.self：只有event.target是当前操作的元素时才触发事件；如果不使用Vue指令，那么怎么阻止事件冒泡呢？1.prevent：阻止默认事件（常用）；4.capture：使用事件的捕获模式；//阻止 vue 在启动时生成生产提示。3.once：事件只触发一次（常用）；-- 阻止默认事件（常用） -->2.stop：阻止事件冒泡（常用）；-- 引入Vue -->-- 准备好一个容器–>如果不加指令会怎么样？
Vue3只渲染一次 v-once
xiaowude_boke的博客
03-05 496
vue3 只渲染一次 v-once
element-ui el-tabs标签@keydown.native.capture.stop.prevent阻止键盘控制切换导致el-tab-pane里的el-input等无法输入
wzm51854的博客
11-11 260
使用。
有谁还不知道Vue3中的事件响应，过来~
m0_67227657的博客
02-26 463
1、行内处理 v-on： 事件名=“事件响应” 缩写形式：@click=“num++” eg： v-on：click=“num++” 缩写形式：@click=“num++” 2、方法响应 @click="say" methods:{ say(e) //默认会有个事件参数 } } 3、内联传参 @click=“say(msg,$event)” //$event 当前单击的事件对象，x，y位置，元素 say(msg,e){} 4、事件修饰符 .stop 阻止事件冒泡 .prev
vue中事件修饰符.once.self.stop.prevent
weixin_48727085的博客
09-12 437
<!DOCTYPE HTML> <html lang= 'en'> <head> <meta charset = 'UTF-8'/> </head> <body> <div id = 'box'> <button @click = 'handleClick'>click</button> <button @click = 'handleClick()'>click
【vue3】Vue中的事件修饰符及示例
芳草萋萋鹦鹉洲哦
03-30 1076
5、once：事件只触发一次（常用）
Vue基础3之事件处理
qq_34306228的博客
11-08 3566
事件的基本使用：Vue中的事件修饰符： a标签的页面不会跳转 showTip事件不会触发 不使用self时候，点击按钮，会发生冒泡，打印两次，但是event.target还是button事件，所以两次输出的当前操作的元素都是button事件 使用self时候，点击按钮，但是由于外层的div当前操作元素是button不是div，所以外层即便冒泡也不会打印输出 鼠标滚轮滚动，即便滚动到最底部，也能依旧触发该事件，但是如果是页面滚动条事件的话，到底部之后就再不会触发该事件了。 正常运行
Vue 键盘事件（keyup、keydown）
雨声学java
03-29 1万+
介绍：keyup表示键盘按键抬起事件，keydown表示键盘按下事件 用法：利用 v-on/ @ 来绑定事件 在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。 ​ 注意：但是，如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用到.native修饰符了，如： <el-input v-model="inputName" placeholder="搜索你的文件" @keyup....
第六天
qq_42151188的博客
03-12 144
之前遇到一个问题就是在使用vue中的router的时候在浏览器手动输入跳转页面会吧#号变成 23%，对于这样的问题我直接用localhost运行就没问题，我用的是vscode ，用这个就不会了。 名称案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
@keyup.enter.native和@click.native.prevent是什么意思
热门推荐
NSX-Truth
07-19 1万+
@keyup.enter.native和@click.native.prevent是什么意思 一、 @keyup.enter.native 一般vue的监听组件，是这样写 <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"> 但是， 如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native <el-input v-model="account" placeholder="
vue的事件修饰符之.stop
qq_58174484的博客
01-24 9138
事件冒泡的解决方法
vue 按键修饰符 .native .prevent .stop .self
09-08
在Vue中，按键修饰符是用于监听键盘事件的一种方式，可以通过在事件监听器后面使用点符号(.)和修饰符来指定特定的条件。 1. .native修饰符： 当我们使用某个组件的根元素时，通常希望直接监听原生的DOM事件，而不是组件内部经过处理后的事件。在这种情况下，可以使用.native修饰符来实现原生事件的监听。 例如： ``` <my-component @click.native="handleClick"></my-component> ``` 上面的代码中，my-component组件内部可能会有自己的点击事件处理，但是我们使用.native修饰符可以监听到组件根元素的原生点击事件。 2. .prevent修饰符： 在某些场景下，我们希望阻止某个默认的事件行为，比如阻止表单提交、超链接跳转等。可以使用.prevent修饰符来阻止元素默认事件的触发。 例如： ``` <form @submit.prevent="handleSubmit"> <!-- 表单内容 --> </form> ``` 上面的代码中，@submit.prevent修饰符阻止了表单提交事件的默认行为，使得我们可以在handleSubmit方法中手动处理表单数据的提交。 3. .stop修饰符： 在Vue中，事件的冒泡机制是默认开启的，子组件中的事件会向上传递给父组件进行处理。但是在某些情况下，我们希望阻止事件的冒泡传递，只触发当前元素的事件，可以使用.stop修饰符来停止事件的冒泡。 例如： ``` <div @click="handleParentClick"> <button @click.stop="handleChildClick">子按钮</button> </div> ``` 上面的代码中，@click.stop修饰符阻止了子按钮点击事件的冒泡，只会触发handleChildClick方法，而不会触发handleParentClick方法。 4. .self修饰符： 在事件冒泡的过程中，会依次触发子元素和父元素的事件，如果我们只想在事件发生的元素本身上触发事件，而不包括其子元素，可以使用.self修饰符。 例如： ``` <div @click.self="handleClick"> <button>子按钮</button> </div> ``` 上面的代码中，@click.self修饰符只会触发div元素上的handleClick方法，不会在点击子按钮时触发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值