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. 3_基本框架_VMXON

    原理参考 3卷 23.7节等 本节实施流程参考Intel手册: 3卷 31.5节 1 vt整体框架; 首先 开锁: 1 开启 Cr4.[VMXE]: 上一节,检测了 VMX 需要的环境:最后一个 CR ...

  2. AutoIt自动化编程(2)【转】

    注意:窗口标题和窗口文本参数总是对大小写敏感的. 1.等待窗口系列命令/函数 AHK和AU3都提供了用法类似的一组窗口等待命令/函数:WinWait/WinWaitActive/WinWaitClos ...

  3. Java 的 JJWT 实现 JWT

    JJWT是一个提供端到端的JWT创建和验证的Java库 依赖 <dependency> <groupId>io.jsonwebtoken</groupId> < ...

  4. g2o学习资料

    g2o下载:https://github.com/RainerKuemmerle/g2o/tree/9b41a4ea5ade8e1250b9c1b279f3a9c098811b5a g2o的基本框架结 ...

  5. 第七章 Odoo 12开发之记录集 - 使用模型数据

    在上一篇文章中,我们概览了模型创建以及如何从模型中载入和导出数据.现在我们已有数据模型和相关数据,是时候学习如何编程与其进行交互 了.模型的 ORM(Object-Relational Mapping ...

  6. EF(Entity Framwork)结构

    初次接触EF,看了一些资料,将自己对EF结构的理解记录如下: EF的核心是EDM----实体数据模型(.edmx).它由三部分组成:概念模型(.csdl文件).存储模型(.ssdl文件).映射规范(. ...

  7. Hibernate O/R 映射

    O/R 映射 目前为止我们已经通过应用 Hibernate 见识过十分基础的 O/R 映射了,但是还有三个更加重要的有关映射的话题需要我们更详细的探讨.这三个话题是集合的映射,实体类之间的关联映射以及 ...

  8. PAT甲级题目1-10(C++)

    1001 A+B Format(20分) Calculate a+b and output the sum in standard format -- that is, the digits must ...

  9. 转:五种I/O模型和select函数简介

    源地址:http://blog.csdn.net/jnu_simba/article/details/9070955 一.五种I/O模型 1.阻塞I/O 我们在前面所说的I/O模型都是阻塞I/O,即调 ...

  10. PAT甲级——A1096 Consecutive Factors【20】

    Among all the factors of a positive integer N, there may exist several consecutive numbers. For exam ...