事件監聽
基礎用法
-
監聽dom事件使用v-on指令： v-on:事件類型="一個函數" 。這個事件類型可以自定義。
-
v-on 指令綁定事件后，就會監聽相應的事件，並在觸發時運行一些 JavaScript 代碼。
<div id="box1">
<button v-on:click="counter += 1">點我</button>
<p>已點擊 {{ counter }} 次</p>
</div>
<script>
var practice1 = new Vue({
el: '#box1',
data: {
counter: 0
}
})
</script>
展示效果
縮寫
v- 前綴作為一種視覺提示，用來識別模板中 Vue 特定的特性。當你在使用 Vue.js 為現有標簽添加動態行為 (dynamic behavior) 時，v- 前綴很有幫助，然而，對於一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構建由 Vue 管理所有模板的單頁面應用程序 (SPA - single page application) 時，v- 前綴也變得沒那么重要了。因此，Vue 為 v-on 提供了特定簡寫：
<!-- 完整語法 -->
<a v-on:click="doSomething">click</a>
<!-- 縮寫 -->
<a @click="doSomething">click</a>
@click是v-on:click的簡寫形式，@即表示v-on:。- 它們看起來可能與普通的 HTML 略有不同，但 : 與 @ 對於特性名來說都是合法字符，在所有支持 Vue 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記中。縮寫語法是完全可選的。
作用
綁定事件監聽，表達式可以是一個方法的名字或一個內聯語句，
如果沒有修飾符也可以省略，用在普通的html元素上時，只能監聽原生DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。
常用事件
- v-on:click
- v-on:keydown
- v-on:keyup
- v-on:mouseenter
- v-on:mouseleave
- v-on:mousedown
- v-on:mouseover
- v-on:submit
示例
<!-- v-on:submit 阻止默認行為 -->
<form v-on:submit.prevent></form>
Vue.js 提供了一個 $event 變量，使用它可以訪問原生 DOM 事件。$event 變量可以通過方法傳入。
<div id="app">
<!-- 內聯語句 -->
<a href="www.163.com" v-on:click="openUrl('被禁用嘍',$event)">被禁用嘍</a>
</div>
<script>
var app = new Vue({
el:"#box",
data: {
count:0
},
methods: {
openUrl:function (param,event) {
event.preventDefault();
console.log("param"+ param);
}
}
})
</script>
輸出結果：
param:被禁用咯
這個示例利用傳入的 event 參數，禁用了原有的鏈接跳轉邏輯。
事件修飾符
.stop
<!-- v-on:click.stop 阻止事件冒泡 -->
<button v-on:click.stop="show">B</button>
.prevent
<!-- v-on:click.prevent 阻止默認行為 -->
<a href="http://www.baidu.com/" v-on:click.prevent>A</a>
<!-- 沒有表達式-->
<a href="http://www.baidu.com/" v-on:click.prevent="show">B</a>
<!-- 有表達式 -->
<!-- 舉例 -->
<div id="app">
<a href="http://www.baidu.com/" v-on:click.prevent>A</a>
<br />
<a href="http://www.baidu.com/" v-on:click.prevent="show">B</a>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
methods:{
show(){
console.log("1")
}
}
})
</script>
A鏈接的默認事件是跳轉到baidu.com，添加了prevent后，點擊A，默認事件無效。
B鏈接的默認事件也是跳轉到baidu.com，添加了帶有表達式的prevent后，點擊B，跳轉事件無效，但手動添加的show方法有效，
控制台中顯示1，因為show不是默認事件。
.capture
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">text</div>
.self
<!-- v-on:click.self -->
<div v-on:click.self="show2"></div>
功能：當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
舉例：
<div id="app">
<div style="width: 100px;height: 100px;background-color: #008000;" v-on:click="show1">
第一層
<div v-on:click.self="show2">
第二層
<div v-on:click="show3">
第三層
<div v-on:click="show4">
第四層
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
methods: {
show1() {console.log("1")},
show2() {console.log("2")},
show3() {console.log("3")},
show4() {console.log("4")}
}
})
</script>
假設我們沒有在第二層的div上添加self，那么我們點擊第四層的時候，控制台將會出現結果4 3 2 1（冒泡），
添加了之后，點擊第四層，控制台顯示4 3 1，因為第二層的self把第二層的事件設置成了僅自己調用時才有效，
所以冒泡把第二層跳過了。
.keyCode | keyAlias
<!-- .{keyCode | keyAlias} 用特定按鍵觸發事件 -->
<input type="text" v-on:keydown.13="show1" /><br/>
<!-- 使用KeyCode 13代表enter鍵 -->
<input type="text" v-on:keydown.right="show2" />
<!-- 使用別名，right代表方向鍵右 -->
.native
功能：監聽組件根元素的原生事件。
<div id="app">
<mycomponent v-on:click.native="myfn"></mycomponent>
</div>
<script type="text/javascript">
Vue.component('mycomponent',{
template:`<a href="#">點我</a>`
})
var vm = new Vue({
el: '#app',
methods:{
myfn(){
console.log(1);
}
}
});
</script>
- 使用native修飾符需要先創建一個自定義組件，然后在html中調用組件時，再使用。
- 如果v-on:click不加.native,那么點擊是無效的，控制台不會出現任何內容。
.once
功能：只觸發一次回調。多次點擊，控制台只出現一次結果。
<mycomponent v-on:click.native.once="myfn"></mycomponent>
- 使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 @click.prevent.self 會阻止所有的點擊，而 @click.self.prevent 只會阻止元素上的點擊。
動態參數
2.6.0 新增
從 2.6.0 開始，可以用方括號括起來的 JavaScript 表達式作為一個指令的參數：
<a v-on:[eventName]="doSomething"> ... </a>
在這個示例中，當 eventName 的值為 "focus" 時，v-on:[eventName] 將等價於 v-on:focus。