Vue中v-on的基礎用法、參數(shù)傳遞和修飾符的示例詳解
一、v-on的基本用法
使用v-on:click給button綁定監(jiān)聽事件以及回調(diào)函數(shù)，@是v-on:的縮寫，也就是簡寫也可以使用@click。方法一般是需要寫方法名加上()，在@click中可以省掉，如上述的<button @click="increment">加</button>。
以簡單的計數(shù)器為例
<body>
<div id="app">
<h2>{{count}}</h2>
<!-- <button v-on:click="count++">加</button>
<button v-on:click="count--">減</button> -->
<button @click="increment">加</button>
<button @click="decrement">減</button>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
count:0
},
methods: {
increment(){
this.count++
},
decrement(){
this.count--
}
}
})
</script>
</body>二、v-on的參數(shù)傳遞
在methods中定義的方法，我們可以進行調(diào)用，可以帶上（），也可以不帶（）
如下的btnClick的調(diào)用中，加了（）想要調(diào)用，里面必須要有值，如果不加小括號,就只會調(diào)用事件對象。
btnClick3想要傳入event，需要在調(diào)用時寫$event,才能調(diào)用事件對象。
<div id="app">
<!-- 事件沒傳參 -->
<button @click="btnClick">按鈕1</button>
<button @click="btnClick()">按鈕2</button>
<!-- 事件調(diào)用方法傳參，寫函數(shù)時候省略小括號，但是函數(shù)本身需要傳遞一個參數(shù) -->
<button @click="btnClick2(123)">按鈕3</button>
<button @click="btnClick2()">按鈕4</button>
<button @click="btnClick2">按鈕5</button>
<!-- 事件調(diào)用時候需要傳入event還需要傳入其他參數(shù) -->
<button @click="btnClick3($event,123)">按鈕6</button>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:"#app",
methods:{
btnClick(){
console.log("點擊XXX");
},
btnClick2(value){
console.log(value+"----------");
},
btnClick3(event,value){
console.log(event+"----------"+value);
}
}
})
</script>
事件沒傳參，可以省略()事件調(diào)用方法傳參了，寫函數(shù)時候省略了小括號，但是函數(shù)本身是需要傳遞一個參數(shù)的，這個參數(shù)就是原生事件event參數(shù)傳遞進去如果同時需要傳入某個參數(shù)，同時需要event是，可以通過$event傳入事件。
三、v-on的修飾詞
.stop的使用，btn的click事件不會傳播，不會冒泡到上層，調(diào)用event.stopPropagation()。
.prevent調(diào)用event.preeventDefault阻止默認行為。
.enter監(jiān)聽鍵盤事件;
once事件只觸發(fā)一次（常用）；
capture使用事件的捕獲模式；
self只有event.target是當前操作的元素時才觸發(fā)事件；
passive事件的默認行為立即執(zhí)行，無需等待事件回調(diào)執(zhí)行完畢；
<style>
.div {
height:80px;
background:#f00;
}
</style>
</head>
<body>
<div id="app">
<!--1. .stop的使用，btn的click事件不會傳播，不會冒泡到上層，調(diào)用event.stopPropagation() -->
<div @click="divClick">
<button @click.stop="btnClick">按鈕1</button>
</div>
<!-- 2. .prevent 調(diào)用event.preeventDefault阻止默認行為 -->
<form action="www.baidu.com">
<button type="submit" @click.prevent="submitClick">提交</button>
</form>
<!--3. 監(jiān)聽鍵盤的事件 -->
<form @submit.prevent=''>
賬號<input type="text" name="user"/>
密碼<input type="text" name="password" @keyup.enter="submit"/>
<input type="submit" value="登錄"/>
</form>
<!--4. 事件只觸發(fā)一次（常用） -->
<button @click.once="showInfo">點我提示信息</button>
<!--5. capture使用事件的捕獲模式 -->
<div class="box1" @click.capture="show(111)">
div1外面
<div class="box2" @click="show(222)">
div2里面
</div>
</div>
<!-- 6.只有event.target是當前操作的元素時才觸發(fā)事件 -->
<div class="div" @click.self="showself">
<button @click="showself">點我</button>
</div>
<!-- 7.passive事件的默認行為立即執(zhí)行，無需等待事件回調(diào)執(zhí)行完畢 -->
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:"#app",
methods:{
btnClick(){
console.log("點擊button");
},
divClick(){
console.log("點擊div");
},
submitClcik(){
console.log("提交被阻止了")
},
submit(){
console.log("keyup點擊")
},
showInfo(){
alert('web學習真有趣')
},
show(msg){
console.log(msg)
},
showself(e){
console.log(e.target);
},
}
})
</script>
</body>到此這篇關于Vue中v-on的基礎用法、參數(shù)傳遞和修飾符的文章就介紹到這了,更多相關Vue中v-on參數(shù)傳遞和修飾符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了詳解vue2.0組件通信各種情況總結與實例分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
vue+element創(chuàng)建動態(tài)的form表單及動態(tài)生成表格的行和列
這篇文章主要介紹了vue+element創(chuàng)建動態(tài)的form表單及動態(tài)生成表格的行和列 ,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
ElementUI Tag組件實現(xiàn)多標簽生成的方法示例
這篇文章主要介紹了ElementUI Tag組件實現(xiàn)多標簽生成的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
vxe-table?實現(xiàn)表格數(shù)據(jù)分組功能(按指定字段數(shù)據(jù)分組)
文章介紹了如何使用樹結構實現(xiàn)表格數(shù)據(jù)分組,并提供了官方文檔的鏈接,本文結合實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要介紹了Vue操作DOM解決顯示位置問題,文中通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-12-12
vue+Ant?Design進度條滑塊與input聯(lián)動效果實現(xiàn)
最近接到這樣一個需求滑塊進度與輸入框為一致,默認值為80,最小不能小于30,最大為100，怎么實現(xiàn)這個聯(lián)動效果呢，下面小編給大家分享下基于vue+Ant?Design進度條滑塊與input聯(lián)動效果的實現(xiàn)，感興趣的朋友跟隨小編一起看看吧2022-12-12
Element的el-tree控件后臺數(shù)據(jù)結構的生成以及方法的抽取
這篇文章主要介紹了Element的el-tree控件后臺數(shù)據(jù)結構的生成以及方法的抽取，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要介紹了Vue替代vuex的存儲庫Pinia，聽說pinia與vue3更配,便開啟了vue3的學習之路，pinia 和 vuex 具有相同的功效， 是 Vue 的存儲庫，它允許您跨組件/頁面共享狀態(tài)2022-09-09
這篇文章主要介紹了關于移動端與大屏幕自適應適配方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
今天小編就為大家分享一篇vue使用prop可以渲染但是打印臺報錯的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11