背景

如果我们要阻止默认事件，在 chrome 等浏览器中，我们可能要写一个：

event.preventDefault();

而在 IE 中，我们则需要写：

event.returnValue = false;

jquery ，跨浏览器的实现，我们统一只需要写：

event.preventDefault();

vue 中的 event 对象

相比于 jquery，vue 的事件绑定可以显得更加直观和便捷，我们只需要在模板上添加一个 v-on 指令（还可以简写为 @），即可完成类似于 $('xxx').bind 的效果，少了一个利用选择器查询元素的操作。我们知道，jquery 中，event 对象会被默认当做实参传入到处理函数中，如下：

$('body').bind('click', function (event) {console.log(typeof event);        // object
});

这里直接就获取到了 event 对象，那么问题来了，vue 中呢？

<div id="app"><button v-on:click="click">click me</button>
</div>
...
var app = new Vue({el: '#app',methods: {click(event) {console.log(typeof event);    // object}}
});

原来，vue.js通过将一个特殊变量 $event 传入到回调中解决这个问题！！！

简单总结其用法：

使用不带圆括号的形式，event 对象将被自动当做实参传入；
使用带圆括号的形式，我们需要使用 $event 变量显式传入 event 对象。

乌龙

类似下面的代码：

<div id="app"><button v-on:click="click(233)">click me</button>
</div>
...
var app = new Vue({el: '#app',methods: {click(val) {console.log(typeof event);    // object}}
});

丢进 chrome 里面一跑，经测试是可以的，打印 arguments.length，也是正常的 1
既没有传入实参，也没有接收的形参，这个 event 对象的来源window.event
window.event，ie 和 chrome 都在 window 对象上有这样一个属性：

window.event

代码丢进 Firefox 中运行，event 果然就变成了 undefined 了。

vue-js 特殊变量$event常识相关推荐

Vue.js：按键修饰符keyup,keyup.enter,keyup.alt.enter的使用
学习Vue.js第三天键盘事件keyup <label>你所在城市:</label><input type="text" v-on:keyup=&q ...
HTML使用vue的 event,vue-js 特殊变量$event常识
背景如果我们要阻止默认事件,在 chrome 等浏览器中,我们可能要写一个: event.preventDefault(); 而在 IE 中,我们则需要写: event.returnValue = ...
vue.js:590 [Vue tip]: Event “removeitem“ is emitted in component ＜TodoItems＞ but the handler is regi
报错信息 vue.js:590 [Vue tip]: Event "removeitem" is emitted in component <TodoItems> bu ...
js声明php变量,vue.js怎样声明变量
vue.js声明变量的方法:1.使用let定义,let是块级作用域,函数内部使用let定义后,对函数外部无影响:2.使用var定义,var定义的变量可以修改:3.使用const定义,const定义的变 ...
js去掉前后空格的函数_2020年最火爆的Vue.js面试题
2020年Vue面试题 Interview ●●●● 作者:@烦恼会解决烦恼 vue核心知识--理论篇 1.对于Vue是一套渐进式框架的理解渐进式代表的含义是:主张最少. Vue可能有些方面是不如R ...
【说人话】真正意义上讲清楚了如何用$emit()在Vue.js的自定义组件中实现v-model=“”双向绑定
子组件sg-component.vue代码 <template><div class="sg-component"><button @click=&q ...
vue.js快速入门
以前看到多少天学习系列,我都深感烦躁,短短几天怎么可以精通,那是对于他们而言.但是,今天我要写一个快速入门,本人觉得还是有一点用处,因为,我不可能在一天之内精通某种东西,却可以在一两小时入门. 回到v ...
Vue.js 学习笔记第5章内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车回顾一下第2.2节,我们己经介绍过指令(Di ...
Vue.js 2.x render 渲染函数 JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
Vue.js教程学习笔记
官方视频简易教程:https://learning.dcloud.io/ 1. 安装与部署第一阶段(初学)可以通过在html文件中引入脚本来完成安装 <script src="vue ...

vue-js 特殊变量$event常识

背景

vue 中的 event 对象

使用不带圆括号的形式，event 对象将被自动当做实参传入；

使用带圆括号的形式，我们需要使用 $event 变量显式传入 event 对象。

乌龙

vue-js 特殊变量$event常识相关推荐

最新文章

热门文章