vue事件有两方面内容:DOM事件 和 自定义事件。

DOM事件
vue中采用DOM2级事件的处理方式,为IE9以上的浏览器服务。下面我们先来讲解一下什么是DOM2级事件吧!

JS中DOM0级事件有两种:标签内绑定事件 和 js中绑定事件;

没有DOM1级事件:因为1级DOM标准中没有定义与事件相关的内容;

DOM2级事件:只有一种监听方法 addEventListener(事件名,func,false冒泡阶段调用)/removeEventListener()。
DOM2级事件包含三个事件:事件捕获阶段、目标阶段、事件冒泡阶段。

vue绑定事件

1.通过指令 v-on:事件名=“函数名”绑定事件 eg:<button v-on:click="doThis"></button>
2.通过语法 @事件名=“函数名”绑定事件 eg:<button @click.stop="doThis"></button>

vue解绑事件

通过修饰符修饰事件后,vue再去解绑事件只是解绑了修饰之前的事件,所以解绑最终是失败的。
我们可以合理的运用委托事件来解决大部分事件绑定引起的性能问题。

vue自定义事件

vue自定义事件是为组件间的通信设计,有$on、$off、$once、$emit触发事件、$brodcast事件广播、$dispath派发事件几个API。

每个vue实例都有两个私有变量:vm._events存储所有自定义事件
vm._eventsCount存储事件广播后,子组件触发自定义事件的数量。

vm.$on(event,callback):监听当前实例上的自定义事件;
vm.$once(event,callback):监听当前实例上的一个自定义事件,触发后立即移除事件;
vm.$off(event,callback):移除当前实例上的自定义事件监听器;
vm.$emit(event,[...args]):触发当前实例上的自定义事件;

vue2.0中已经废弃$brodcast和$dispath事件,利用props+emit或者vuex代替。

vue的事件绑定的更多相关文章

  1. [js高手之路] vue系列教程 - vue的事件绑定与方法(2)

    一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...

  2. Vue之事件绑定

    Vue事件绑定 点击事件 @click="事件名" or v-on:click="事件名" 结构部分: <el-button type="pri ...

  3. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  4. Vue - 事件绑定

    1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...

  5. vue 基础重要组件 模板指令 事件绑定

    组件:data methods watch new vue({ data:{ a:1, b:[] }, methods:{ dosomething:function(){ this.a++; } }, ...

  6. vue事件绑定处理

    事件监听指令 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码,通常是触发一个函数,简写@ <template> <div id="app" ...

  7. Vue之变量、数据绑定、事件绑定使用举例

    vue1.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  8. angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式

    基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...

  9. vue.js的一些事件绑定和表单数据双向绑定

    知识点: v-on:相当于: 例如:v-on:click==@click ,menthods事件绑定 v-on修饰符可以指定键盘事件 v-model进行表单数据的双向绑定 <template&g ...

随机推荐

  1. SPOJ10707 COT2-Count on a tree II

    COT2 - Count on a tree II 中文题意 离线询问一颗树上路径(u,v)中经过所有点的权值的种类数. 题解 树上莫队.即在树的欧拉序列上进行莫队.同一个点加第一次时增加,第二次时减 ...

  2. shell脚本使用需要注意的地方

    shell脚本中,函数内部定义变量可以为局部变量和全局变量,局部变量使用local定义,全局变量不带local,全局变量可以在函数外部可见,如下: #!/bin/bash function calle ...

  3. 廖雪峰Java11多线程编程-2线程同步-4wait和notify

    wait和notify synchronized解决了多线程竞争的问题 我们可以在synchronized块中安全的对一个变量进行修改,但是它没有解决多线程协调的问题. 例如设计一个TaskQueue ...

  4. 来杭州云栖大会,全面了解企业如何实现云上IT治理

    企业上云的现状与趋势 云计算,如今已经成为了像水和电一般关系到国计民生的国家基础设施.云计算为企业带了前所未有的资源交付效率和运维效率的提升,同时也用全新的技术帮助企业在新的价值网络中创造新的商业赛道 ...

  5. jquery ajax 放在重复点击事件beforeSend方法

    防止重复数据在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数 ...

  6. Mysql自带查询阻塞语句

    select r.trx_id waiting_trx_id, r.trx_mysql_thread_Id waiting_thread, r.trx_query waiting_query, b.t ...

  7. IOS6 新特性之UIActivityViewController详解

    新的IOS6增加了一些新特性.因为应用需要,所以在国庆的几天里.研究了一下IOS6的说明文档,然后大概地总结了一下UIActivityViewController的用法与大家分享. 首先 从实际效果入 ...

  8. Neo4j-Cypher语言语法

    Neo4j-Cypher语言语法 梦飞扬 2018-03-15 264 阅读 Neo4j 本文是记录Neo4j图数据库中实用的Cypher语言语法. Cypher是什么 "Cypher&qu ...

  9. leetcode 854. K-Similar Strings

    给定两个字符串, 判断最少经过多少次swap 可以使得 两个字符串一致, 首先类似的问题 是存在一个 underlying graph 的. 每一个字母都对应着一个节点,两个字符串的不一致表示为图上的 ...

  10. 08-background详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...