vue的事件绑定
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的事件绑定的更多相关文章
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...
- Vue之事件绑定
Vue事件绑定 点击事件 @click="事件名" or v-on:click="事件名" 结构部分: <el-button type="pri ...
- [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...
- Vue - 事件绑定
1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...
- vue 基础重要组件 模板指令 事件绑定
组件:data methods watch new vue({ data:{ a:1, b:[] }, methods:{ dosomething:function(){ this.a++; } }, ...
- vue事件绑定处理
事件监听指令 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码,通常是触发一个函数,简写@ <template> <div id="app" ...
- Vue之变量、数据绑定、事件绑定使用举例
vue1.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式
基本语法: 动态属性: vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]= ...
- vue.js的一些事件绑定和表单数据双向绑定
知识点: v-on:相当于: 例如:v-on:click==@click ,menthods事件绑定 v-on修饰符可以指定键盘事件 v-model进行表单数据的双向绑定 <template&g ...
随机推荐
- Pthread spinlock自旋锁
锁机制(lock) 是多线程编程中最常用的同步机制,用来对多线程间共享的临界区(Critical Section) 进行保护. Pthreads提供了多种锁机制,常见的有:1) Mutex(互斥量): ...
- leetcode146周赛-5130-等价多米诺骨牌对的数量
题目描述: 方法一: class Solution(object): def numEquivDominoPairs(self, dominoes): """ :type ...
- 洛谷 2197 nim游戏
题目描述 甲,乙两个人玩Nim取石子游戏. nim游戏的规则是这样的:地上有n堆石子(每堆石子数量小于10000),每人每次可从任意一堆石子里取出任意多枚石子扔掉,可以取完,不能不取.每次只能从一堆里 ...
- Extjs4 似bug非bug的东西修改
/** hzm modify * method: Ext.panel.Table.hasLockedColumns: function(columns) {} * function:支持extjs g ...
- Poj 2559 最大矩形面积 v单调栈 分类: Brush Mode 2014-11-13 20:48 81人阅读 评论(0) 收藏
#include<iostream> #include<stack> #include<stdio.h> using namespace std; struct n ...
- 06_Hibernate缓存
一.缓存概述 什么是缓存: 缓存将数据库/硬盘上文件中数据,放入到缓存中(就是内存中一块空间).当再次使用的使用,可以直接从内存中获取. 缓存的好处: 提升程序运行的效率.缓存技术是Hibernate ...
- Apache Pig学习笔记(二)
主要整理了一下,pig里面的一些关键词的含义和用法,pig虽然是一种以数据流处理为核心的框架,但数据库的大部分关键词和操作,在pig里面基本上都能找到对应的函数,非常灵活与简洁,春节前的最后一篇文章 ...
- hive设置列头(永久模式)
到hive目录下的hive-site <property> <name>hive.cli.print.header</name> <value>true ...
- Luogu P2101 命运石之门的选择(分治+搜索)
P2101 命运石之门的选择 题意 题目描述 在某一条不知名世界线的冈伦今天突然接到了一条\(dmail\),上面说世界线将会发生巨大变动,未来的他无论如何都无法扭转这种变动回到原来的世界线.而世界线 ...
- JAXL连接Openfire发送房间消息
使用composer形式安装的JAXL <?php require_once "vendor/autoload.php"; $client = new JAXL(array( ...