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常识的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 1004 成绩排名 (20分)
- 下一篇： 天天生鲜商品详情页HTML+css