Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符的示例詳解
一、v-on的基本用法
使用v-on:click
給button綁定監(jiān)聽(tīng)事件以及回調(diào)函數(shù),@是v-on:
的縮寫(xiě),也就是簡(jiǎn)寫(xiě)也可以使用@click
。方法一般是需要寫(xiě)方法名加上(),在@click
中可以省掉,如上述的<button @click="increment">加</button>
。
以簡(jiǎn)單的計(jì)數(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中定義的方法,我們可以進(jìn)行調(diào)用,可以帶上(),也可以不帶()
如下的btnClick的調(diào)用中,加了()想要調(diào)用,里面必須要有值,如果不加小括號(hào),就只會(huì)調(diào)用事件對(duì)象。
btnClick3想要傳入event,需要在調(diào)用時(shí)寫(xiě)$event,才能調(diào)用事件對(duì)象。
<div id="app"> <!-- 事件沒(méi)傳參 --> <button @click="btnClick">按鈕1</button> <button @click="btnClick()">按鈕2</button> <!-- 事件調(diào)用方法傳參,寫(xiě)函數(shù)時(shí)候省略小括號(hào),但是函數(shù)本身需要傳遞一個(gè)參數(shù) --> <button @click="btnClick2(123)">按鈕3</button> <button @click="btnClick2()">按鈕4</button> <button @click="btnClick2">按鈕5</button> <!-- 事件調(diào)用時(shí)候需要傳入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("點(diǎn)擊XXX"); }, btnClick2(value){ console.log(value+"----------"); }, btnClick3(event,value){ console.log(event+"----------"+value); } } }) </script>
事件沒(méi)傳參,可以省略()事件調(diào)用方法傳參了,寫(xiě)函數(shù)時(shí)候省略了小括號(hào),但是函數(shù)本身是需要傳遞一個(gè)參數(shù)的,這個(gè)參數(shù)就是原生事件event參數(shù)傳遞進(jìn)去如果同時(shí)需要傳入某個(gè)參數(shù),同時(shí)需要event是,可以通過(guò)$event
傳入事件。
三、v-on的修飾詞
.stop
的使用,btn的click事件不會(huì)傳播,不會(huì)冒泡到上層,調(diào)用event.stopPropagation()
。
.prevent
調(diào)用event.preeventDefault
阻止默認(rèn)行為。
.enter
監(jiān)聽(tīng)鍵盤(pán)事件;
once
事件只觸發(fā)一次(常用);
capture
使用事件的捕獲模式;
self
只有event.target是當(dāng)前操作的元素時(shí)才觸發(fā)事件;
passive
事件的默認(rèn)行為立即執(zhí)行,無(wú)需等待事件回調(diào)執(zhí)行完畢;
<style> .div { height:80px; background:#f00; } </style> </head> <body> <div id="app"> <!--1. .stop的使用,btn的click事件不會(huì)傳播,不會(huì)冒泡到上層,調(diào)用event.stopPropagation() --> <div @click="divClick"> <button @click.stop="btnClick">按鈕1</button> </div> <!-- 2. .prevent 調(diào)用event.preeventDefault阻止默認(rèn)行為 --> <form action="www.baidu.com"> <button type="submit" @click.prevent="submitClick">提交</button> </form> <!--3. 監(jiān)聽(tīng)鍵盤(pán)的事件 --> <form @submit.prevent=''> 賬號(hào)<input type="text" name="user"/> 密碼<input type="text" name="password" @keyup.enter="submit"/> <input type="submit" value="登錄"/> </form> <!--4. 事件只觸發(fā)一次(常用) --> <button @click.once="showInfo">點(diǎn)我提示信息</button> <!--5. capture使用事件的捕獲模式 --> <div class="box1" @click.capture="show(111)"> div1外面 <div class="box2" @click="show(222)"> div2里面 </div> </div> <!-- 6.只有event.target是當(dāng)前操作的元素時(shí)才觸發(fā)事件 --> <div class="div" @click.self="showself"> <button @click="showself">點(diǎn)我</button> </div> <!-- 7.passive事件的默認(rèn)行為立即執(zhí)行,無(wú)需等待事件回調(diào)執(zhí)行完畢 --> </div> <script src="vue.js"></script> <script> const app = new Vue({ el:"#app", methods:{ btnClick(){ console.log("點(diǎn)擊button"); }, divClick(){ console.log("點(diǎn)擊div"); }, submitClcik(){ console.log("提交被阻止了") }, submit(){ console.log("keyup點(diǎn)擊") }, showInfo(){ alert('web學(xué)習(xí)真有趣') }, show(msg){ console.log(msg) }, showself(e){ console.log(e.target); }, } }) </script> </body>
到此這篇關(guān)于Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符的文章就介紹到這了,更多相關(guān)Vue中v-on參數(shù)傳遞和修飾符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 淺談Vue.js 中的 v-on 事件指令的使用
- 詳解vue中v-on事件監(jiān)聽(tīng)指令的基本用法
- 聊聊vue 中的v-on參數(shù)問(wèn)題
- 關(guān)于Vue v-on指令的使用
- Vue.js中v-on指令的用法介紹
- vue中v-model、v-bind和v-on三大指令的區(qū)別詳解
- Vue中的v-model,v-bind,v-on的區(qū)別解析
- Vue.js基礎(chǔ)之監(jiān)聽(tīng)子組件事件v-on及綁定數(shù)據(jù)v-model學(xué)習(xí)
- vue3常用的指令之v-bind和v-on指令用法
- vue v-on傳遞參數(shù)和事件修飾符的使用
相關(guān)文章
Vue?實(shí)現(xiàn)接口進(jìn)度條示例詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)接口進(jìn)度條功能,在請(qǐng)求數(shù)據(jù)的過(guò)程中,需要添加監(jiān)聽(tīng)函數(shù)來(lái)監(jiān)測(cè)數(shù)據(jù)請(qǐng)求的過(guò)程變化,并更新組件相應(yīng)的屬性和界面元素,本文結(jié)合實(shí)例代碼詳細(xì)講解,需要的朋友可以參考下2023-04-04Vite處理html模板插件之vite-plugin-html插件使用
這篇文章主要給大家介紹了關(guān)于Vite處理html模板插件之vite-plugin-html插件使用的相關(guān)資料,Vite是一個(gè)現(xiàn)代化的前端構(gòu)建工具,而vite-plugin-html是Vite的一個(gè)插件,用于在構(gòu)建時(shí)自動(dòng)生成HTML文件,需要的朋友可以參考下2023-10-10Vue項(xiàng)目pdf(base64)轉(zhuǎn)圖片遇到的問(wèn)題及解決方法
這篇文章主要介紹了Vue項(xiàng)目pdf(base64)轉(zhuǎn)圖片遇到的問(wèn)題及解決方法,需要的朋友可以參考下2018-10-10vue在.js文件中引入store和router問(wèn)題
這篇文章主要介紹了vue在.js文件中引入store和router問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03詳解通過(guò)JSON數(shù)據(jù)使用VUE.JS
本篇文章主要介紹了詳解通過(guò)JSON數(shù)據(jù)使用VUE.JS,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05ant-design-vue 時(shí)間選擇器賦值默認(rèn)時(shí)間的操作
這篇文章主要介紹了ant-design-vue 時(shí)間選擇器賦值默認(rèn)時(shí)間的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨過(guò)來(lái)看看吧2020-10-10vue2.x中monaco-editor的使用說(shuō)明
這篇文章主要介紹了vue2.x中monaco-editor的使用說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08