本文参考自: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. 二分 by zzt

    #include <bits/stdc++.h> using namespace std; /* Problem description: There is an array A, the ...

  2. POJ 3321:Apple Tree(dfs序+树状数组)

    题目大意:对树进行m次操作,有两类操作,一种是改变一个点的权值(将0变为1,1变为0),另一种为查询以x为根节点的子树点权值之和,开始时所有点权值为1. 分析: 对树进行dfs,将树变为序列,记录每个 ...

  3. [AGC004F] Namori

    Description 现在给你一张N个点M条边的连通图,我们保证N−1≤M≤N,且无重边和自环. 每一个点都有一种颜色,非黑即白.初始时,所有点都是白色的. "全"想通过执行若干 ...

  4. datatable导出到Word / Excel / PDF / HTML .NET

    原文发布时间为:2011-01-21 -- 来源于本人的百度文章 [由搬家工具导入] IEnumerable - DataTable Export to Word / Excel / PDF / HT ...

  5. 配置微信api调扫码功能

    var url = encodeURIComponent(location.href.split('#')[0]); $.get(iapi+'/htweb/wx/getJsSdkSign?url='+ ...

  6. TCP/IP协议详解笔记——ARP协议和RARP协议

    ARP:地址解析协议 对于以太网,数据链路层上是根据48bit的以太网地址来确定目的接口,设备驱动程序从不检查IP数据报中的目的IP地址.ARP协议为IP地址到对应的硬件地址之间提供动态映射. 工作过 ...

  7. Selenium2+python自动化(学习笔记3)

    1.加载firefox配置 参考代码: # coding=utf-8from selenium import webdriver# 配置文件地址,打开Firefox点右上角设置--帮助--故障排除信息 ...

  8. Swift Perfect 服务器配置(Ubuntu16.0.4 主机、虚拟机)

    Mac 开发环境 brew install mysql@5.7 && brew link mysql@5.7 --force mysql.server startmysql_secur ...

  9. asp.net core 开发环境自定义域名及端口

    web项目上右键-> 选择属性-> 选择调试->编辑“应用url” ,再用vs启动web项目即可实现自定义url. 值得注意的是如果报“visual studio无法连接到iis e ...

  10. Web模糊测试工具Powerfuzzer

    Web模糊测试工具Powerfuzzer   Powerfuzzer是Kali Linux自带的一款Web模糊测试工具.该工具基于各种开源模糊测试工具构建,集成了大量安全信息.该工具高度智能化,它能根 ...