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. 设置编辑工具UltraEdit的背景色为护眼颜色

    1.视图--->主题--->管理主题---> 2.--->编辑器--->纯文本--->第二个框(背景色) 3.--->规定自定义颜色--->建议(色调: ...

  2. SQLite C++ Wrapper 是一个 C++ 语言对 SQLite 的最小封装包。

    SQLite C++ Wrapper 是一个 C++ 语言对 SQLite 的最小封装包. 示例代码1:   #include <string> #include <iostream ...

  3. 线性回归和梯度下降代码demo

    程序所用文件:https://files.cnblogs.com/files/henuliulei/%E5%9B%9E%E5%BD%92%E5%88%86%E7%B1%BB%E6%95%B0%E6%8 ...

  4. vuex基础知识总结

    项目中要求添加vuex,根据学习我这个小白总结了一点自己的心得,供大家参考 在学习之前,要知道两件事 为什么要用vuex?vuex要什么场景下应用? 简单点解释一下 1.项目中应用了vue脚手架之后, ...

  5. Office宏的基本利用

    前言 Office宏,译自英文单词Macro.宏是Office自带的一种高级脚本特性,通过VBA代码,可以在Office中去完成某项特定的任务,而不必再重复相同的动作,目的是让用户文档中的一些任务自动 ...

  6. System.Web.Mvc.RedirectToRouteResult.cs

    ylbtech-System.Web.Mvc.RedirectToRouteResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutr ...

  7. Ubuntu+Ruby+MySQL+Nginx+Redmine部署记录

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年7月26日) 周五的时候老大布置了一个任务下来,要部署一个Redmine用于研发部,同时升级工作室的Redmine ...

  8. Java 使用JDBC连接MySQL

    //  这学期本来不打算深入学习Java的,课上的小项目也就随便写了一个简单计算器和扫雷游戏就糊弄过去.可是我们的Eliza老师偏偏什么都讲了,考虑到期末也会涉及到JDBC的内容,前些天试着学习一番. ...

  9. 03_Sklearn的安装

    1.Scikit-learn库介绍:包含许多知名的机器学习算法的实现,文档完善.容易上手,丰富的API. 2.安装:创建一个基于Python3的虚拟环境(可以在已有的虚拟环境中):mkvirtuale ...

  10. C#窗体阴影

    /// <summary> /// 边框阴影 /// </summary> protected override CreateParams CreateParams { get ...