【Vue2.0】—事件处理和事件修饰符(二)
【Vue2.0】—事件处理和事件修饰符(二)
<div id="root"><h2>{{name}},加油!</h2><!-- 阻止默认事件 --><a @click.prevent="showInfo" href="https:www.baidu.com">点我提示信息</a><!-- 阻止事件冒泡 --><div class="demo1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button></div><!-- 事件只触发一次 --><button @click.once="showInfo">点我提示信息</button><!-- 使用事件捕获模式 --><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div><!-- 只有event.target是当前操作的元素时才触发事件 --><div class="demo1" @click.self="showInfo"><button @click="showInfo">点我提示信息</button></div></div><script>Vue.config.productionTip = false;new Vue({el: '#root',data() {return {name: '张三'}},methods: {showInfo(e) {// e.preventDefault();alert('王同学,你好!')},showMsg(msg) {console.log(msg);}}});</script>
【Vue2.0】—事件处理和事件修饰符(二)相关推荐
- Vue2.0中的事件修饰符
Vue2.0中的事件修饰符: 1.prevent:阻止默认事件,原生js里面为event.preventDefault() 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture ...
- Vue事件处理(事件修饰符,键盘事件)
Vue中的事件修饰符:1.prevent:阻止默认事件(常用)2.stop: 阻止事件冒泡(常用)3.once: 事件只触发一次(常用)4.capture: 使用事件的捕获模式5.self:只有eve ...
- Vue2.0学习笔记:Vue事件修饰符的使用
事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
- vue判断是否双击_vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作...
Vue 事件处理方法 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. v-on:click 单击事件 + + - - v-on:dblclick 双击事件 ...
- Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用,尚硅谷Vue系列教程学习笔记(2)
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
- Vue.js:vue指令(给标签属性赋Vue变量v-bind,绑定事件 v-on)vue事件处理函数中, 拿到事件对象,6个事件修饰符
1. 给标签属性赋Vue变量v-bind 在vue中,v-bind指令可以动态的给标签的属性设置值, 语法:v-bind:属性名="vue变量" 简写::属性名="vue ...
- 黑马vue---13、事件修饰符的介绍
黑马vue---13.事件修饰符的介绍 一.总结 一句话总结: .stop 阻止冒泡:input type="button" value="戳他" @click ...
- Vue指令之v-on的缩写和事件修饰符||.stop 和 .self 的区别
事件修饰符: .stop 阻止冒泡 注:不阻止冒泡的话:先冒里面的那个元素,再冒外面的元素 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 注:捕获时间:先冒外面的 ...
- vue学习:事件传递(冒泡和捕获),事件委托,jquery中的事件委托,$event 获取元素,vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技 术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
最新文章
- 百度大脑开放日第三期:四大全新平台、两大场景方案助力开发者逐梦 AI
- 死磕Java并发:J.U.C之AQS:CLH同步队列
- 基于ARM 构架(带MMU)的copy_from_user与copy_to_user详细分析
- mybatis学习(22):查询排序
- 什么时候对象会进入老年代?
- 笨办法学 Python · 续 练习 50:`vi`
- 下一代防火墙评测--网界
- Android界面绘制流程--------How Android Draws Views
- 25个jQuery的编程小抄
- Maya的Xgen导向为什么非常宽?
- DBCA创建数据库实例
- java 锁 面试题_Java面试题-Java中的锁
- 有26个字母a~z,找出所有字母组合,a、b、c、ab、abc、a~z 都是一个组合(顺序无关)
- 浅谈征信大数据与撸贷
- 2018第二届中国通信业物联网大会精彩前瞻
- M1芯片已适配Final Cut Pro X苹果M1处理器安装新版FCPX教程(适配最新M1芯片处理器款mac,支持Big sur V10.5)
- 从金融到物联网 区块链的落地应用将如何改变世界?
- 计算机应用简单的微课制作,《计算机应用基础》微课制作经验谈.doc
- linux shell 脚本编程基本语法
- Python家族全家福