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. naptime

    naptime 有一个长度为n的序列\(a_i\),首尾相接组成了一个环,现在要在这个环上选出若干个区间,使区间长度之和恰好为b,然后忽略区间的顺时针开头元素,权值累加区间中所有的数字,问权值的最大值 ...

  2. Atcoder arc085

    C:HSI 期望模型,不想说. #include<cstdio> using namespace std; typedef long long ll; int main() { int n ...

  3. leetccode-130-被围绕的区域

    题目描述: 方法一:dfs class Solution: def solve(self, board: List[List[str]]) -> None: """ ...

  4. [JZOJ5232] 【NOIP2017模拟A组模拟8.5】带权排序

    题目 题目大意 有一个数列AAA,数列上的每个数都是在[li,ri][l_i,r_i][li​,ri​]范围内随机的数. 将这个数列进行稳定排序,得到每个位置在排序后的排名pip_ipi​. f(A) ...

  5. ThinkPHP 删除数据

    ThinkPHP删除数据使用delete方法,例如: 直线电机价格 $Form = M('Form'); $Form->delete(5); 表示删除主键为5的数据,delete方法可以删除单个 ...

  6. LUGOU P1092 虫食算

    传送门 解题思路 刚开始按yzy神犇给的方法写,就是每次要把能算出来的都算出来,结果因为太菜写挂了..后来直接爆搜水过.. #include<iostream> #include<c ...

  7. php数据结构课程---5、树(树的 存储方式 有哪些)

    php数据结构课程---5.树(树的 存储方式 有哪些) 一.总结 一句话总结: 双亲表示法:data parent:$tree[1] = ["B",0]; 孩子表示法:data ...

  8. JS-jquery 获取当前点击的对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. Android基础控件TextView

    1.常用属性 <TextView android:id="@+id/text11" //组件id android:layout_width="match_paren ...

  10. Lucene 的 Field 域和索引维护

    一.Field 域 1.Field 属性 Field 是文档中的域,包括 Field 名和 Field 值两部分,一个文档可以包括多个 Field,Document 只是 Field 的一个承载体,F ...