本文参考自：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. idea下的hibernate反向生成插件

    阅读目录 1. 打开 DataBase 窗口,添加数据源 2. 添加 hibernate 持久层支持,生成实体 Bean /配置文件 谈起 Hibernate 应该得知道 Gavin King 大叔, ...

  2. i++ 和++i 的理解 以防面试

    根本原理: //模拟 a++ function afterAdd(){ var temp = a; a = a+1; return temp; } //模拟++a; function beforeAd ...

  3. Codeforces Round #362 (Div. 2) A 水也挂

    A. Pineapple Incident time limit per test 1 second memory limit per test 256 megabytes input standar ...

  4. codeforce div2 426 D. The Bakery

    D. The Bakery time limit per test 2.5 seconds memory limit per test 256 megabytes input standard inp ...

  5. 用python获取服务器硬件信息[转]

    #!/usr/bin/env python # -*- coding: utf-8 -*- import rlcompleter, readline readline.parse_and_bind(' ...

  6. java中Map的entrySet 和keySet的使用

    存储这样的一个数据关系结构  使用嵌套map存储 可以通过调用  entrySet方法  或者 keySet方法 进行迭代或者增强for循环 便利输出 这里演示 迭代器的方式进行遍历 package ...

  7. 自做CA自签发SSL证书

    一.把证书准备好.步骤与使用OpenSSL自签发服务器https证书所述大同小异.在这里再重复一次.1.制作CA证书:ca.key CA私钥: openssl genrsa -des3 -out ca ...

  8. Codeforces Gym100971 F.Two Points (IX Samara Regional Intercollegiate Programming Contest Russia, Samara, March 13)

    这个题直接推公式就可以. 就是解一元二次方程,用高中学的公式,函数开口向上,求最大值为(4ac-b*b)/4a. 这个题推出来一元二次方程,然后将最大值的公式化简一下.公式很好推. 这个题有疑问,in ...

  9. Codeforces 586D Phillip and Trains（DP）

    题目链接 Phillip and Trains 考虑相对位移. 每一轮人向右移动一格,再在竖直方向上移动0~1格,列车再向左移动两格. 这个过程相当于每一轮人向右移动一格,再在竖直方向上移动0~1格, ...

  10. CSS定位与布局：普通流

    CSS定位与布局属于CSS的基础,也是CSS布局影响很大的一部分,具体主要包括三种定位与布局机制( Positioning schemes):普通流,浮动,绝对定位. 其实除了这三种之外,还有一些定位 ...