1. v-on 事件監(jiān)聽(tīng)

監(jiān)聽(tīng)DOM事件使用 v-on 指令。該指令通常在模板中直接使用，在觸發(fā)事件時(shí)會(huì)執(zhí)行一些 JavaScript 代碼。

v-on 指令的基本用法

（1）在 HTML 中使用 v-on 指令，后面可以是所有的原生事件名稱(chēng)?；居梅ㄈ缦拢?/p>

<button v-on:click="show">顯示</button>

將 click 單擊事件綁定到 show 方法中，單擊“顯示”按鈕時(shí)，執(zhí)行 show() 方法，show() 方法在 Vue實(shí)例中定義。

（2）在使用 v-on 指令的過(guò)程中，Vue.js 提供了 v-on 指令的簡(jiǎn)寫(xiě)形式 “@” ，上述代碼可改寫(xiě)為如下：

<button @click="show">顯示</button>

（3）v-on 指令的簡(jiǎn)單用法如下：

<div id="box">
			<!--v-on 基本用法-->
			<button v-on:click="count1++">計(jì)數(shù)</button>
			<p>按鈕被點(diǎn)擊{{count1}}次</p>
			<!--v-on 簡(jiǎn)單用法-->
			<button @click="count2++">計(jì)數(shù)</button>
			<p>按鈕被點(diǎn)擊{{count2}}次</p>
</div>
		   <script type="text/javascript">
				var vm = new Vue({
					el : '#box',
					data:{
						count1:0,
						count2:0
					}
					
				});
			</script>

v-on 指令的簡(jiǎn)單用法如下圖所示：

事件處理方法

在使用 v-on 指令過(guò)程中，通過(guò) v-on 指令需要將事件和某個(gè)方法進(jìn)行綁定，而綁定的方法作為事件處理器定義在 methods 選項(xiàng)中。示例代碼參考如下：

<div id="box">
			<button v-on:click="show">顯示</button>
		</div>
		   <script type="text/javascript">
				var vm = new Vue({
					el : '#box',
					data:{
						name:'曉茗',
						age: 29,
						occupation:'演員'
					},
					methods:{
						show:function(){
							alert('姓名：'+this.name+'年齡：'+this.age+'職業(yè)：'+this.occupation);
						}
					}
					
				});
			</script>

v-on 指令將點(diǎn)擊事件與顯示方法綁定的結(jié)果圖片如下：

使用內(nèi)聯(lián) JavaScript 語(yǔ)句

（1）使用 v-on 指令除了直接綁定到一個(gè)方法之外，v-on 指令也支持內(nèi)聯(lián) JavaScript 語(yǔ)句，但前提是只可以使用一個(gè)語(yǔ)句。示例代碼參考如下：

<div id="box">
			<button v-on:click="show('明日之星')">顯示</button>
		</div>
		   <script type="text/javascript">
				var vm = new Vue({
					el : '#box',
					methods:{
						show:function(message){
							alert('消息：'+message);
						}
					}
					
				});

使用內(nèi)聯(lián) JavaScript 語(yǔ)句的運(yùn)行結(jié)果如下圖所示：

（2）在內(nèi)聯(lián)語(yǔ)句中需要獲取原生的 DOM 事件對(duì)象時(shí)，可以將一個(gè)特殊變量 $event 傳入方法中。示例代碼如下：

<div id="box">
			<a  rel="external nofollow"  v-on:click="show('明日之星',$event)">{{message}}</a>
		</div>
		   <script type="text/javascript">
				var vm = new Vue({
					el : '#box',
					data:{
						message:'你好'
					},
					methods:{
						show:function(message1,e){
							e.preventDefault();
							alert(message1);
						}
					}
					
				});
			</script>

除了向 show() 方法傳遞一個(gè)值外，還傳遞了一個(gè)特殊變量 $event，該變量的作用是當(dāng)點(diǎn)擊超鏈接時(shí)，對(duì)原生 DOM 事件進(jìn)行處理，應(yīng)用 preventDefault() 方法阻止該超鏈接的跳轉(zhuǎn)行為。當(dāng)單擊 “你好” 超鏈接時(shí)，會(huì)彈出對(duì)話(huà)框，運(yùn)行結(jié)果如下圖所示：

2. 事件處理修飾符

所謂修飾符，就是以半角句點(diǎn)符號(hào)指明的特殊后綴。Vue.js 為 v-on 指令提供了多個(gè)修飾符，包括事件修飾符和按鍵修飾符。
事件修飾符
在事件處理程序中經(jīng)常會(huì)調(diào)用 preventDefault() 或 stopPropagation() 方法來(lái)實(shí)現(xiàn)特定的功能。為處理這些 DOM 事件細(xì)節(jié)，Vue.js 為 v-on 指令提供了事件修飾符。常用的事件修飾符及其說(shuō)明如下表所示：

修飾符可以串聯(lián)使用，而且可以只使用修飾符，而不綁定事件處理方法。事件修飾符的使用方式如下：

<!-- 阻止單擊事件繼續(xù)傳播-->
<a v-on:click.stop="doSomething"></a>
<!-- 阻止表單默認(rèn)提交事件-->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 只有當(dāng)事件從當(dāng)前元素本身觸發(fā)時(shí)才調(diào)用處理函數(shù)-->
<div v-on:click.self="doSomething"></div>
<!-- 修飾符串聯(lián)，阻止表單默認(rèn)提交事件且阻止冒泡-->
<a v-on:click.stop.prevent="doSomething"></a>
<!-- 只有修飾符，而不綁定事件-->
<form v-on:submit.prevent></form>

應(yīng)用一個(gè) .stop 修飾符阻止事件冒泡的示例代碼如下：

<div id="box">
			<div v-on:click="show('div事件觸發(fā)')">
				<button v-on:click.stop="show('按鈕的事件觸發(fā)')">顯示</button>
			</div>
		</div>
		   <script type="text/javascript">
				var vm = new Vue({
					el : '#box',
					methods:{
						show:function(message){
							alert(message);
						}
					}
					
				});
			</script>

當(dāng)單擊”顯示“按鈕時(shí)，只會(huì)觸發(fā)該按鈕的單擊事件。如果在按鈕中未使用 .stop 修飾符，當(dāng)單擊”顯示“按鈕時(shí)，不但會(huì)觸發(fā)該按鈕的單擊事件，還會(huì)觸發(fā) div 的單擊事件，會(huì)彈出兩個(gè)對(duì)話(huà)框。運(yùn)行結(jié)果如下圖所示：
（1）使用 .stop 修飾符：

（2）未使用.stop 修飾符點(diǎn)擊確定后顯示：

按鍵修飾符

除事件修飾符之外，Vue.js 還為 v-on 指令提供了按鍵修飾符，以便監(jiān)聽(tīng)鍵盤(pán)事件中的按鍵。當(dāng)觸發(fā)鍵盤(pán)事件時(shí)需要檢測(cè)按鍵的 keyCode值，代碼如下：

<input v-on:keyup.13="submit">

應(yīng)用 v-on 指令監(jiān)聽(tīng)鍵盤(pán)的 keyup 事件，鍵盤(pán)中回車(chē)鍵的 keyCode 值是13，所以，在文本框輸入內(nèi)容后，單擊回車(chē)鍵時(shí)就會(huì)調(diào)用 submit()方法。
對(duì)上述所示的代碼，可以使用其別名的方式，回車(chē)鍵別名為 Enter ，代碼如下：

<input v-on:keyup.enter="submit">

Vue.js 為常用的按鍵提供的別名如下表所示：

備注：后期會(huì)繼續(xù)跟進(jìn) Vue.js前端框架：表單控制綁定，希望大家的多多支持和關(guān)注。

到此這篇關(guān)于Vue.js前端框架之事件處理小結(jié)的文章就介紹到這了,更多相關(guān)Vue.js事件處理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論