【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】—事件处理和事件修饰符(二)相关推荐

  1. Vue2.0中的事件修饰符

    Vue2.0中的事件修饰符: 1.prevent:阻止默认事件,原生js里面为event.preventDefault() 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture ...

  2. Vue事件处理(事件修饰符,键盘事件)

    Vue中的事件修饰符:1.prevent:阻止默认事件(常用)2.stop: 阻止事件冒泡(常用)3.once: 事件只触发一次(常用)4.capture: 使用事件的捕获模式5.self:只有eve ...

  3. Vue2.0学习笔记:Vue事件修饰符的使用

    事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...

  4. vue判断是否双击_vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作...

    Vue 事件处理方法 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. v-on:click 单击事件 + + - - v-on:dblclick 双击事件 ...

  5. Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用,尚硅谷Vue系列教程学习笔记(2)

    尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...

  6. Vue.js:vue指令(给标签属性赋Vue变量v-bind,绑定事件 v-on)vue事件处理函数中, 拿到事件对象,6个事件修饰符

    1. 给标签属性赋Vue变量v-bind 在vue中,v-bind指令可以动态的给标签的属性设置值, 语法:v-bind:属性名="vue变量" 简写::属性名="vue ...

  7. 黑马vue---13、事件修饰符的介绍

    黑马vue---13.事件修饰符的介绍 一.总结 一句话总结: .stop 阻止冒泡:input type="button" value="戳他" @click ...

  8. Vue指令之v-on的缩写和事件修饰符||.stop 和 .self 的区别

    事件修饰符: .stop 阻止冒泡 注:不阻止冒泡的话:先冒里面的那个元素,再冒外面的元素 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 注:捕获时间:先冒外面的 ...

  9. vue学习:事件传递(冒泡和捕获),事件委托,jquery中的事件委托,$event 获取元素,vue事件修饰符

    事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技 术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...

最新文章

  1. 百度大脑开放日第三期:四大全新平台、两大场景方案助力开发者逐梦 AI
  2. 死磕Java并发:J.U.C之AQS:CLH同步队列
  3. 基于ARM 构架(带MMU)的copy_from_user与copy_to_user详细分析
  4. mybatis学习(22):查询排序
  5. 什么时候对象会进入老年代?
  6. 笨办法学 Python · 续 练习 50:`vi`
  7. 下一代防火墙评测--网界
  8. Android界面绘制流程--------How Android Draws Views
  9. 25个jQuery的编程小抄
  10. Maya的Xgen导向为什么非常宽?
  11. DBCA创建数据库实例
  12. java 锁 面试题_Java面试题-Java中的锁
  13. 有26个字母a~z,找出所有字母组合,a、b、c、ab、abc、a~z 都是一个组合(顺序无关)
  14. 浅谈征信大数据与撸贷
  15. 2018第二届中国通信业物联网大会精彩前瞻
  16. M1芯片已适配Final Cut Pro X苹果M1处理器安装新版FCPX教程(适配最新M1芯片处理器款mac,支持Big sur V10.5)
  17. 从金融到物联网 区块链的落地应用将如何改变世界?
  18. 计算机应用简单的微课制作,《计算机应用基础》微课制作经验谈.doc
  19. linux shell 脚本编程基本语法
  20. Python家族全家福

热门文章

  1. Spark团队开源新项目MLflow发布0.2版本,内置TensorFlow集成
  2. tomcat启动问题
  3. Ionic如何实现单选二级菜单切换
  4. 获取指定进程所对应的可执行(EXE)文件全路径(代码)
  5. LVS学习笔记--DR模式部署
  6. Android应用程序窗口(Activity)与WindowManagerService服务的连接过程分析
  7. python写的系统常用命令(二)
  8. 13个DNS 根服务器
  9. 029、JVM实战总结:大厂面试题:最新的G1垃圾回收器的工作原理,你能聊聊吗
  10. php 编译记录文件,php-7.1编译记录