vue基礎(chǔ)之事件簡寫、事件對象、冒泡、默認行為、鍵盤事件實例分析
本文實例講述了vue基礎(chǔ)之事件簡寫、事件對象、冒泡、默認行為、鍵盤事件。分享給大家供大家參考，具體如下：
v-on:click/mouseover......
簡寫的:
@click="" 推薦
事件對象:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true; b).
@click.stop 推薦
默認行為(默認事件):
阻止默認行為:
a). ev.preventDefault();
b). @contextmenu.prevent 推薦
鍵盤:
@keydown $event ev.keyCode
@keyup
常用鍵:
回車
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....
簡寫的: @click="" 推薦
<input type="button" value="按鈕" v-on:click="show()"> <input type="button" value="按鈕" @click="show()">
事件對象:@click="show($event)"
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(ev,b){
alert(ev.clientX);
alert(b);
}
}
});
};
<div id="box">
<input type="button" value="按鈕" @click="show($event,112)">
</div>
事件冒泡
阻止冒泡:
a). ev.cancelBubble=true;
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(ev){
alert(1);
ev.cancelBubble=true;
},
show2:function(){
alert(2);
}
}
});
};
<div id="box">
<div @click="show2()">
<input type="button" value="按鈕" @click="show($event)">
</div>
</div>
b). @click.stop 推薦
<div id="box">
<div @click="show2()">
<input type="button" value="按鈕" @click.stop="show()">
</div>
</div>
默認行為(默認事件):
阻止默認行為:
a). ev.preventDefault();
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(ev){
alert(1);
ev.preventDefault();//這里阻止了右擊顯示菜單的事件
}
}
});
};
<div id="box">
<input type="button" value="按鈕" @contextmenu="show($event)">
</div>
b). @contextmenu.prevent 推薦
<div id="box">
<input type="button" value="按鈕" @contextmenu.prevent="show()">
</div>
鍵盤事件:
@keydown $event ev.keyCode
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(ev){
alert(ev.keyCode);
}
}
});
};
<div id="box">
<input type="text" @keydown="show($event)">
</div>
@keyup
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(ev){
alert(ev.keyCode);
}
}
});
};
<div id="box">
<input type="text" @keyup="show($event)">
</div>
常用鍵:
1、回車
a). @keyup.13
b). @keyup.enter
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(){
alert('您按回車了');
}
}
});
};
<div id="box"> <!--<input type="text" @keyup.13="show()">--> <input type="text" @keyup.enter="show()"> </div>
2、上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(){
alert("你按了左箭頭←");
}
}
});
};
<div id="box">
<input type="text" @keyup.left="show()">
</div>
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
vue用vis插件如何實現(xiàn)網(wǎng)絡(luò)拓撲圖
這篇文章主要介紹了vue用vis插件如何實現(xiàn)網(wǎng)絡(luò)拓撲圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
教你如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境
這篇文章主要介紹了如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境,文中給大家提到了如何讓 Vite 加載 Electron 的內(nèi)置模塊和 Node.js 的內(nèi)置模塊，需要的朋友可以參考下2022-11-11
這篇文章主要為大家介紹了Vue項目的打包方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
vuex是vue的狀態(tài)管理模式，主要可以解決父子組件嵌套層數(shù)較多，或者兄弟組件之間需要維護同一個狀態(tài)的情況。下面這篇文章主要給大家介紹了關(guān)于學習vuex的相關(guān)資料，需要的朋友可以參考學習，下面來一起看看吧。2017-04-04
這篇文章主要介紹了Vue組件公用方法提取mixin實現(xiàn)，多個組件共用一個方法時可以用?mixin?抽取到一個js文件中，作為共用方法，下面一起進入文章了解更多詳細內(nèi)容吧2022-03-03
vuex中this.$store.commit和this.$store.dispatch的基本用法實例
在vue的項目里常常會遇到父子組件間需要進行數(shù)據(jù)傳遞的情況,下面這篇文章主要給大家介紹了關(guān)于vuex中this.$store.commit和this.$store.dispatch的基本用法的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了解決vue頁面渲染但dom沒渲染的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue如何修改el-form-item中的label樣式修改問題
這篇文章主要介紹了vue如何修改el-form-item中的label樣式修改問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
VUE的history模式下除了index外其他路由404報錯解決辦法
在本篇文章里小編給大家分享的是關(guān)于VUE的history模式下除了index外其他路由404報錯解決辦法，對此有需要的朋友們可以學習下。2019-08-08
vue3-vue-router創(chuàng)建靜態(tài)路由和動態(tài)路由方式
這篇文章主要介紹了vue3-vue-router創(chuàng)建靜態(tài)路由和動態(tài)路由方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10