HTML使用vue的 event,vue-js 特殊变量$event常识

背景

如果我们要阻止默认事件，在 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 中呢？

click me

...

var app = new Vue({

el: '#app',

methods: {

click(event) {

console.log(typeof event); // object

}

});

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

简单总结其用法：

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

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

乌龙

类似下面的代码：

click me

...

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 了。

HTML使用vue的 event,vue-js 特殊变量$event常识相关推荐

Vue中键盘快捷键-JS键盘事件
在VUE中键盘快捷键-JS键盘事件键盘事件在vue项目中监听键盘事件--keydown 键盘常用键的keyCode值键盘事件在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘 ...
html 全景图three,vue中利用three.js实现全景图的完整示例
粗暴一点,直接上代码: 第一步: 通过指令下载three.js npm install three -S 第二步: 在组件中引用 import * as THREE from 'three' 第三步: ...
【笔记-vue】《imooc-vue.js高仿饿了么》、《imooc-vue 音乐app》、《imooc-vue.js源码全方位解析》
20170709 - 20171128:<imooc-vue.js高仿饿了么> 一.第一章课程简介 1-1课程简介 1.需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译 ...
vue动态加载js和css以及部分页面加载特定的js和css
vue动态加载js和css以及部分页面加载特定的js和css vue项目第一次加载很慢的,发现在第一次加载要很大的js导致卡顿.可以使用cdn加速和其他gzip方式效果不是很明显.因此考虑每个页面动态 ...
html vue 3D之Three.js（第二节）
第一节:html vue 3D之Three.js(第一节)_加金开发的博客-CSDN博客实列模型下载:https://download.csdn.net/download/qq_33131171/8 ...
vue如何使用原生js写动画效果_手摸手，带你用 vue 动画实现原生 app 切换效果，丝滑般的体验...
先来看效果图完整源码在 github 中欢迎 star: 准备开始之前您需要有 vue 基础,以及安装好 vue-cli 开始新建 vue 项目:vue init webpack vuexle ...
vue导入非es6 js文件_Vue项目兼容IE11
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但对于 IE9+,Vue 底层是支持. 由于开发过程中,我们经常会使用一些第三方插件或组件 ...
vue 动态路由_Vue.js应用性能优化三
在上一篇Vue.js应用性能优化二中,我们学习了足够强大的模式,可以显着提高应用程序的性能 - 按照路由分割代码.虽然按照路由拆分代码非常有用,但在用户访问我们的站点后,仍然有很多内部代码不需要.在本 ...
vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...

HTML使用vue的 event,vue-js 特殊变量$event常识

HTML使用vue的 event,vue-js 特殊变量$event常识相关推荐

最新文章

热门文章