本文参考自: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. spring boot redis代码与配置

    import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Co ...

  2. iptables + Denyhost抵御暴力破解

    使用iptables 现在每分钟连接ssh的次数 #允许本地环回接口访问   1 iptables -A INPUT -i lo -j ACCEPT #对已经建立的所有链接都放行   1 iptabl ...

  3. [HDU3480] Division [四边形不等式dp]

    题面: 传送门 思路: 因为集合可以无序选择,所以我们先把输入数据排个序 然后发先可以动归一波 设$dp\left[i\right]\left[j\right]$表示前j个数中分了i个集合,$w\le ...

  4. http content-type总结

    content-type 媒体类型,即MIME类型,包括媒体格式和编码两部分 例如:Content-Type:text/html;charset:utf-8 常见的媒体格式类型如下: text/htm ...

  5. 小w的喜糖(candy)

    小w的喜糖(candy) 题目描述 废话不多说,反正小w要发喜糖啦!! 小w一共买了n块喜糖,发给了n个人,每个喜糖有一个种类.这时,小w突发奇想,如果这n个人相互交换手中的糖,那会有多少种方案使得每 ...

  6. IDEA 注册问题,创建 和 删除项目

    目录 .....2016.3/2017.1 IDEA 注册码 .....IDEA 创建项目 .....IDEA 删除项目 IDEA 注册码 复制使用别人的注册码,启动选择如下: 复制粘贴如下代码: 这 ...

  7. client、offset、scroll

    1. client 客户区大小 1.1. clientHeight和clientWidth element.clientHeight表示元素可视区域的高度,包括可视区域中元素的 CSS height+ ...

  8. 股票交易(bzoj 1855)

    Description 最近lxhgww又迷上了投资股票,通过一段时间的观察和学习,他总结出了股票行情的一些规律. 通过一段时间的观察,lxhgww预测到了未来T天内某只股票的走势,第i天的股票买入价 ...

  9. mongoDB最新版安装

    转载自:http://www.higis.org/2012/04/25/ubuntu-install-mongodb/ ubuntu上安装mongodb本可以直接通过sudo apt-get inst ...

  10. configurationmanager.getsection usage example.

    1.app.config(note that attribute case sensitive!) <?xml version="1.0" encoding="ut ...