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 + element動態(tài)多表頭與動態(tài)插槽
這篇文章主要介紹了vue + element動態(tài)多表頭與動態(tài)插槽，下面文章圍繞vue + element動態(tài)多表頭與動態(tài)插槽的相關(guān)資料展開文章的內(nèi)容，具有一定的參考價值，需要的小伙伴可以參考一下，希望對大家有所幫助2021-12-12
這篇文章主要給大家介紹了關(guān)于Vue全局loading及錯誤提示的思路與實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-08-08
watch 函數(shù)是 Vue.js 提供的一個強大工具,用于響應(yīng)數(shù)據(jù)變化并執(zhí)行相應(yīng)的回調(diào),通過合理使用 watch 函數(shù),我們可以實現(xiàn)異步數(shù)據(jù)請求、表單驗證、動態(tài)樣式等多種功能,這篇文章主要介紹了Vue.js 的 watch函數(shù),需要的朋友可以參考下2024-08-08
在vue3中父組件訪問子組件中的屬性和方法是需要借助于ref,蘇哦一本文小編給大家介紹了vue3父組件如何使用ref獲取獲取子組件的屬性和方法,文中詳細的代碼講解,需要的朋友可以參考下2023-11-11
這篇文章主要為大家介紹了OpenDataV低代碼平臺新增組件流程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了vue中點擊按鈕下載文件的實現(xiàn)方式,具有很的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue3的ref,reactive的使用和原理解析,分析了?reactive?的實現(xiàn)，以及?reactive?api?返回的?proxy?代理對象使用的?handlers?陷阱，并且對陷阱中我們最常用的?get?和?set?的源碼進行分析，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue中的axios配置及接口請求路徑api配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
路由懶加載是一項關(guān)鍵技術(shù),它可以幫助我們提高Web應(yīng)用的加載速度,本文主要介紹了React和Vue實現(xiàn)路由懶加載的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了Vue組件生命周期運行原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11