本文参考自：https://mp.weixin.qq.com/s?src=3&timestamp=1527154113&ver=1&signature=tWGeTa86gyK*RL0P7nwlA6-8V14FjzxUTh7CM9kQLjl0DV3sx*2hKauMGZKoYBkTSp14Zw6MOD8pU-haYmJoNTSBI5rptCZwf3wTIXLUMUOYDOPZtxm9wJaSm0l7vqshH98ToXQCcfm-5jR-Y66eAYzuFM5ja4W2NsJr7D2VLfs=

Vue中为DOM元素绑定事件是采用DOM2级事件的处理方式，因为Vue服务的是IE9以上的现代浏览器，他们也都是支持DOM2级事件。因此下例中

 <div @click="func"></div>

实际上相当于

  el.addEventListener('click', func)

可见 v-on 指令既可为DOM元素绑定事件也可为组件绑定自定义事件

Vue DOM事件的更多相关文章

  1. vue.js事件，属性，以及交互

    这是我学习vue的第二天,今天主要学习了如何利用vue阻止事件冒泡,阻止事件的默认行为,键盘事件以及如何添加class.style这些属性,以及如何利用vue来进行数据交互,利用百度的一个API来写一 ...

  2. 记一下vue.js事件的修饰等问题

    在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更好的方式是 ...

  3. Angular4.x Event (DOM事件和自定义事件)

    Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)=&qu ...

  4. v-on指令监听dom事件

    一.无参 <div id="J_app"> <button v-on:click="eatWhat">吃啥</button> ...

  5. Vue入门---事件与方法详解

    一. vue方法实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  6. vue 的事件冒泡

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  7. 重新认识vue之事件阻止冒泡

    冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...

  8. vue的事件绑定

    vue事件有两方面内容:DOM事件 和 自定义事件. DOM事件 vue中采用DOM2级事件的处理方式,为IE9以上的浏览器服务.下面我们先来讲解一下什么是DOM2级事件吧! JS中DOM0级事件有两 ...

  9. Vue的事件修饰符

    转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...

随机推荐

  1. Mysql实战之主从复制的读写分离

    author:JevonWei 版权声明:原创作品 ProxySQL构建主从复制的读写分离 ProxySQL官网及下载地址 http://www.proxysql.com/ 架构角色 mysql-sl ...

  2. 【bzoj2127】happiness 网络流最小割

    题目描述 高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己的喜悦值,而一对好朋友如果能同时选文 ...

  3. Error:Cannot find module 'stylus'

    在webpack 里面用了 stylus-loader,但npm instatll 没有正确安装,出现error: Cannot find module ‘stylus’. 解决办法: 重新npm i ...

  4. 关于在生命周期当中进行setState操作的问题

    当需要监听组件的属性改变的时候有两个生命周期componentWillReceiveProps和componentWillUpdate 当使用componentWillUpdate的时候可以获取到将要 ...

  5. 设置Animation 的播放位置

    AnimationState.normalizedTime 官方文档的描述 Description The normalized time of the animation. A value of 1 ...

  6. hdu 4502 dp

    吉哥系列故事——临时工计划 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tot ...

  7. 51Nod 1003 1004 1009

    1003 阶乘后面0的数量 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 n的阶乘后面有多少个0? 6的阶乘 = 1*2*3*4*5*6 = 720,720后面有1 ...

  8. AC日记——[NOI2006]最大获利 bzoj 1497

    1497 思路: 最小割: 来,上代码: #include <cstdio> #include <cstring> #include <iostream> #inc ...

  9. JS-JavaScript String 对象-string对象方法2: indexOf()、lastIndexOf()、charAt()

    1.indexOf():可返回某个指定的字符串值在字符串中首次出现的位置. 1).语法:string.indexOf(searchvalue,start):     searchvalue:必需.规定 ...

  10. ef core 2.1 利用Query Type查询视图

    ef core新加入的功能“Query Type”可以让我们很方便的查询视图而不需要做任何特殊处理.不过在代码上和普通的查询有些不同. 先贴文档:https://docs.microsoft.com/ ...