Vue提供了事件的绑定，方法写在methods对象中。

绑定dom中有两种方法：

　　方法一：v-on:click/dblclcick/mouseOver/mouseOut=“方法名”等等

这种和JQuery的事件差不多，在原生态js中去掉了on。

　　方法二：@click/dblclcick/mouseOver/mouseOut="方法名"。

相对于方法一，将v-on:替代为@。还是比较好用的。

事件修饰符：stop：阻止事件冒泡。事件冒泡指的是点击子元素，父元素的点击事件也被触发了

　　　　　　prevent：阻止默认事件触发。比如a标签默认点击会跳转，这时可以阻止这个触发

　　　　　　capture：使用捕获模式。html默认事件从里到外进行传播，捕获模式则会从外到进行触发

　　　　　　self：只有当前元素能够触发，既不能通过传播的方式

　　　　　　once：只能触发一次

这几个修饰符可以串联修饰，例如java中的修饰符

　　例如给a标签：

  1. <div>
  2.         <a href="1.jpg" @click.prevent.stop.capture.self></a>
  3.     </div>

在Vue2.0也多添加几个按键和鼠标修饰符，这样不用记一些键码。

注意一下，虽然Vue可以让组件自定义事件，但是不要使用驼峰命名法，html会将大写的字母变为小写，

可能导致出不来结果。Vue2.0好像已经不支持绑定的body上。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Vue事件</title>
  6.     <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  7.  
  8. </head>
  9. <body>
  10.     <div id=box>
  11.         <p>原始的方式</p>
  12.         <input type="button" value="点击一下" @click="say1" />
  13.         <hr>
  14.  
  15.         <p>Vue事件绑定之一 v-on:click/dblclick/...</p>
  16.         <input type="button" value="Vue事件绑定之一" v-on:click="say1">
  17.         <hr>
  18.  
  19.         <p>Vue事件绑定之二 @click/dblclick/...</p>
  20.         <input type="button" value="Vue事件绑定之二" @click="say1">
  21.         <hr>
  22.  
  23.         <p>Vue解决事件冒泡 </p>
  24.         <div @click="say1">
  25.         <input type="button" value="未解决事件冒泡" @click="say1">
  26.         </div>
  27.         <div @click="say2">
  28.         <p>原始方式解决事件冒泡 </p>
  29.         <input type="button" value="原始方式解决事件冒泡" @click="say2($event)">
  30.         </div>
  31.         <div @click="say3">
  32.         <p>Vue方式解决事件冒泡 </p>
  33.         <input type="button" value="Vue方式解决事件冒泡" @click.stop="say3()">
  34.         </div>
  35.  
  36.         <hr>
  37.         <p>html默认触发的事件</p>
  38.         <a href="http://cpc.people.com.cn/NMediaFile/2017/1018/MAIN201710181352077766232230363.jpg">进入十九大</a>
  39.         <p>html $event阻止默认触发的事件</p>
  40.         <a href="http://cpc.people.com.cn/NMediaFile/2017/1018/MAIN201710181352077766232230363.jpg" @click="say4($event)">进入十九大</a>
  41.         <p>html Vue阻止默认触发的事件</p>
  42.         <a href="http://cpc.people.com.cn/NMediaFile/2017/1018/MAIN201710181352077766232230363.jpg" @click.prevent="say5()">进入十九大</a>
  43.     </div>
  44. </body>
  45. <script type="text/javascript">
  46.     new Vue({
  47.         el:"#box",
  48.         data:{},
  49.         methods:{
  50.         say1:function(){
  51.             console.log(this);
  52.             alert("hello v-on");
  53.         },
  54.         say2:function(ev){
  55.             alert("原始方式解决事件冒泡");
  56.             ev.cancelBubble=true;
  57.  
  58.         },
  59.         say3:function(){
  60.             alert("Vue方式解决事件冒泡");
  61.         },
  62.         say4:function(ev){
  63.             console.log(this);
  64.             alert("阻止默认触发事件");
  65.             ev.preventDefault();
  66.         },
  67.         say5:function(){
  68.             console.log(this);
  69.             alert("vue阻止默认触发事件");
  70.         }
  71.         }
  72.     });
  73.  
  74.     </script>
  75. </html>

03Vue事件的更多相关文章

  1. JNI详解---从不懂到理解

    转载:https://blog.csdn.net/hui12581/article/details/44832651 Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 C ...

  2. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  3. 关于 Chrome 浏览器中 onresize 事件的 Bug

    我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 ...

  4. MVVM设计模式和WPF中的实现（四）事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  5. C++中的事件分发

    本文意在展现一个C++实现的通用事件分发系统,能够灵活的处理各种事件.对于事件处理函数的注册,希望既能注册到普通函数,注册到事件处理类,也能注册到任意类的成员函数.这样在游戏客户端的逻辑处理中,可以非 ...

  6. 移动端IOS点击事件失效解决方案

    解决方案 解决办法有 4 种可供选择: 1 将 click 事件直接绑定到目标元素(即 .target)上 2 将目标元素换成 <a> 或者 button 等可点击的元素 3 将 clic ...

  7. Android笔记——Button点击事件几种写法

    Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...

  8. HTML 事件(一) 事件的介绍

    本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...

  9. HTML 事件(二) 事件的注册与注销

    本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...

随机推荐

  1. 第2周作业-Java基本语法与类库(20170227-20170304)

    本周学习总结 (1)这周学习认识和熟悉了java的一些类型和变量: (2)学习了java的运算符基本使用方法: (3)了解了如何建立远程仓库和本地仓库,和如何让java代码在临时储存,本地仓库和远程仓 ...

  2. 201521123063 java第一周总结

    20152112306 <Java程序设计>第一周学习总结 1.本周学习总结(2.20-2.26) java语言的特点: (1)简约且简单 (2)平台无关性 (3)面向对象 (4)多线程. ...

  3. Python3.x 和Python2.x 区别

    1.性能Py3.0运行 pystone benchmark的速度比Py2.5慢30%.Guido认为Py3.0有极大的优化空间,在字符串和整形操作上可以取得很好的优化结果.Py3.1性能比Py2.5慢 ...

  4. 201521123017 《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 Q1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有什么办法实现互斥同步 ...

  5. PTA分享码-Java

    主要用于Java语法练习,非竞赛类题目.   1. Java入门          959dbf0b7729daa61d379ec95fb8ddb0   2. Java基本语法   23bd8870e ...

  6. logback：logback和slf4j中的：appender、logger、encoder、layout

    (1)appender 1.appender标签是logback配置文件中重要的组件之一.在logback配置文件中使用appender标签进行定义.可 以包含0个或多个appender标签. 2.a ...

  7. Mysql常用命令大全

    1.连接Mysql 格式: mysql ­h主机地址 ­u用户名 -p用户密码 2.1 创建数据库 命令:create database <数据库名> 例1:建立一个名为xhkdb的数据库 ...

  8. Project Euler：Product-sum numbers (problem 88) C++

    A natural number, N, that can be written as the sum and product of a given set of at least two natur ...

  9. 浅谈IT技术女转战微电商初体验

    今天闲来无事,突然想翻看下之前写的技术博客,很是意外,居然那么多阅读量,于是想想做微商也有一段时间了,决定写写初入微商的初体验. 先自我介绍一下,本人是一名理工女,做IT行业的,这个行业也许有人了解, ...

  10. jquery自定义banner图滚动插件---（解决最后一张图片倒回第一张图片的bug）

    banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...