Vue 事件修饰符 详解
来源:互联网 发布:餐饮数据分析 编辑:程序博客网 时间:2024/05/17 10:38
本人后端程序员,由于绑页面需要使用vue,在自学的过程中不懂事件修饰符,特此请教后才理解,在这提出我的分享,忘各位大神指正.
vue官网上指出:
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
event.preventdefault():阻止默认事件发生,例如:a标签默认会刷新,表单的提交。
event.stopPropagation():终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。即不会再产生捕获和冒泡事件。
如图所示:嵌套div,每一个div都有click事件,点击目标事件,先走捕获->目标->冒泡 即捕获:从外到内依次执行click事件,冒泡:从内到外依次执行click事件
vue事件修饰符:
(1).stop // 阻止事件继续传播 即阻止它的捕获和冒泡过程
实例:如下点击内部点击,阻止了冒泡过程,即只执行tz这个方法,如果不加.stop,讲先执行方法,后执行gett方法。即通过了冒泡这个过程。
<div v-on:click="gett">外部点击 <div v-on:click.stop="tz">内部点击</div></div>
(2).prevent //阻止默认事件发生 即event.preventdefault():
实例: 阻止了a标签的默认刷新 <a href="" v-on:click.prevent>点击</a>
(3).capture // 添加事件监听器时使用事件捕获模式,即在捕获模式下触发
实例:在点击最里层的点击6时,gett方法先执行,因为gett方法在捕获模式执行的,先与冒泡事件。下列执行顺序 geet->set->tz ,因为后俩个还是冒泡模式下触发的事件。
<div v-on:click.capture="gett">外部点击5 <div v-on:click="tz">内部点击5 <div v-on:click="set">点击6</div> </div></div>
(4).self //当前元素自身时触发处理函数时才会触发函数,原理:是根据event.target确定是否当前元素本身,来决定是否触发的事件/函数
实例:如果点击内部点击2,冒泡不会执行gett方法,因为event.target指的是内部点击2的dom元素,不是外部点击1的,所以不会触发自己的点击事件
<div v-on:click.self="gett">外部点击1<div v-on:click="tz">内部点击2</div></div>
(5).once //只触发一次
实例:
<div v-on:click.once="tz">once</div>
全部代码
<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> </head> <body> <div id="app"> <button v-on:click="gett" >点击</button> <input type="text" v-on:keyup.13="gett" /> <div v-on:click="gett">外部点击 <div v-on:click.stop="tz">内部点击</div> </div> <a href="" v-on:click.prevent>dsfs</a> <div v-on:click.self="gett">外部点击1 <div v-on:click="tz">内部点击2</div> </div> <div v-on:click.capture="gett">外部点击5 <div v-on:click="tz">内部点击5 <div v-on:click="set">点击6</div> </div> </div> <div v-on:click.once="tz">once</div> </div> <div id='a'>外部点击3 <div id='b'>内部点击4</div> </div> <script src="js/mui.min.js"></script> <script src="js/vue.js"></script> <script type="text/javascript"> mui.init() </script> <script type="application/javascript"> var app = new Vue({ el: '#app', data: { name:'张三' }, methods:{ gett:function(e){ alert("111"); console.log(e.target); this.name='李四'; }, tz:function(e){ console.log(e.target); alert(222) }, set:function(e){ console.log(e.target); alert(333) } } }) document.getElementById('a').addEventListener('click',function(e){ console.log(e.target); alert('aaaa') },true) document.getElementById('b').addEventListener('click',function(e){ console.log(e.target); alert('bbbb') },true) </script> </body></html>
- Vue 事件修饰符 详解
- vue-事件修饰符
- vue事件修饰符
- 事件修饰符vue.js
- vue笔记--事件修饰符
- vue中常见的事件修饰符
- Vue 事件修饰符.self的用法
- vue基础事件\按键修饰符
- vue-事件修饰符和按键修饰符
- vue.js中的事件修饰符.self的用法。
- vue.js 中的.capture事件修饰符的用法。
- vue.js中的事件修饰符的使用
- 前端框架vue.js系列(4):事件修饰符与按键修饰符
- vue,js修饰符
- vue的修饰符
- vue-按键修饰符
- Vue.js- 修饰符
- vue .sync 修饰符
- Chrome浏览器扩展开发系列之一:初识Google Chrome扩展
- NASA利用AI操作操作无人机,无人机即将迈向新纪元?
- python PDF 下载
- 已知某个网址http://www.***.com,扒出所有的新闻
- 腾讯三维虚拟听觉解决方案 : 一场音效的新革命,开启沉浸感新纪元
- Vue 事件修饰符 详解
- 超链中含有汉字乱码问题不能下载
- Double Kill!卡巴斯基遭英美封杀将关闭华盛顿办公室
- 苹果公司将收购音乐识别应用Shazam,交易金额约4亿美元
- allegro操作总结(一)
- input file 上传 同一张图失败
- 局部加权回归
- ImageMagick之PHP进行图片合并
- Google 运行时请求权限处理