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. software database is broken解决办法

    ubuntu切换中文时报software database is broken错误. 网上的办法千篇一律,还都没有用.都是去应用中心删除thundbird之类的,啊....... 在终端下执行 sud ...

  2. 串口通信中,QString 、QByteArray 转化需要注意的问题

    在做串口通信的时候,其中犯了一个错误.在此记录一下:QT中串口通信接到收据和发送数据的接口如下: QByteArray QIODevice::readAll()//接受数据 qint64 QIODev ...

  3. Android开发 获取View的尺寸的2个方法

    前言 总所周知,在activity启动的onCreate或者其他生命周期里去获取View的尺寸是错误的,因为很有可能View并没有初始化测量绘制完成.你这个时候获取的宽或的高不出意外就是0.所以,我们 ...

  4. ActiveMQ 知识点

    消息队列高可用 持久化,事务,签收,zookeeper+replicated-leveldb-store的主从集群 异步发送 同步发送: 明确指定同步发送 未使用事务的前提下,发送持久化消息(会使用同 ...

  5. 2-sat——暴力染色输出方案hdu1814

    因为要求输出字典序最小的解,所以用暴力染色 具体有点像二分图染色 遍历0-2*n-1个点,尝试将每个点染成1,该点所能到达的所有点都要染成1 如果不行,则把上该点的影响消除,再把对立点染成1,如果还不 ...

  6. css正則匹配、模糊匹配

    //所有class包含font-red的p标签 p[class~="font-red"] {color: red;} [abc^="def"] 选择 abc 属 ...

  7. java中自己对页面跳转问题的一些经验

    在eclipse中,如果你要在jsp页面跳转到servlet页面中,可以用action=“/根文件名/servlet文件名” 的方式跳转. 例如我创建了一个web application名字是test ...

  8. Git 之 版本回退

    1. git log 定义:该命令显示从最近到最远的提交日志.每一次提交都有对应的 commit id 和 commit message.    

  9. vue 实现单选框

    参考:https://blog.csdn.net/qq_42221334/article/details/81630634 效果: vue: <template> <div> ...

  10. XStream JavaBean对象转换成XML!

    代码实例: 1.javaBean类: package com.hsinfo.web.Demo.XStream; public class City { private String name; pub ...