Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符的示例詳解
一、v-on的基本用法
使用v-on:click
給button綁定監(jiān)聽事件以及回調(diào)函數(shù),@是v-on:
的縮寫,也就是簡(jiǎn)寫也可以使用@click
。方法一般是需要寫方法名加上(),在@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í)寫$event,才能調(diào)用事件對(duì)象。
<div id="app"> <!-- 事件沒傳參 --> <button @click="btnClick">按鈕1</button> <button @click="btnClick()">按鈕2</button> <!-- 事件調(diào)用方法傳參,寫函數(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>
事件沒傳參,可以省略()事件調(diào)用方法傳參了,寫函數(shù)時(shí)候省略了小括號(hào),但是函數(shù)本身是需要傳遞一個(gè)參數(shù)的,這個(gè)參數(shù)就是原生事件event參數(shù)傳遞進(jìn)去如果同時(shí)需要傳入某個(gè)參數(shù),同時(shí)需要event是,可以通過$event
傳入事件。
三、v-on的修飾詞
.stop
的使用,btn的click事件不會(huì)傳播,不會(huì)冒泡到上層,調(diào)用event.stopPropagation()
。
.prevent
調(diào)用event.preeventDefault
阻止默認(rèn)行為。
.enter
監(jiān)聽鍵盤事件;
once
事件只觸發(fā)一次(常用);
capture
使用事件的捕獲模式;
self
只有event.target是當(dāng)前操作的元素時(shí)才觸發(fā)事件;
passive
事件的默認(rèn)行為立即執(zhí)行,無需等待事件回調(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)聽鍵盤的事件 --> <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í)行,無需等待事件回調(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue?實(shí)現(xiàn)接口進(jìn)度條示例詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)接口進(jìn)度條功能,在請(qǐng)求數(shù)據(jù)的過程中,需要添加監(jiān)聽函數(shù)來監(jiān)測(cè)數(shù)據(jù)請(qǐng)求的過程變化,并更新組件相應(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)圖片遇到的問題及解決方法
這篇文章主要介紹了Vue項(xiàng)目pdf(base64)轉(zhuǎn)圖片遇到的問題及解決方法,需要的朋友可以參考下2018-10-10ant-design-vue 時(shí)間選擇器賦值默認(rèn)時(shí)間的操作
這篇文章主要介紹了ant-design-vue 時(shí)間選擇器賦值默認(rèn)時(shí)間的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨過來看看吧2020-10-10