如果我們建立一個函數 show
,並且將 event
當成它的參數,函數執行在 console
印出 event
參數是什麼,此時我們透過 v-on
將點擊事件還有 show
函數綁在一起,在不傳入任何值給 show
當參數的狀況下,當我們點擊 click
,此時 console
會顯示出 MouseEvent
,這就是當我們滑鼠點擊所觸發的 click
滑鼠事件,其他比較常見的還有 keyup
按鍵事件。
<body>
<div id=app>
<a href="https://www.google.com/?hl=zh_tw" v-on:click='show'>點擊</a>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
methods: {
show:function(event){
console.log(event)
}
}
})
</script>
前面提到,如果當我們點擊後觸發滑鼠事件,此時 a
標籤的預設功能就會啟動,我們會連結到 href
的網址上,如果我們想要點擊 a
標籤卻沒有啟動 a
標籤的預設功能,使 a
標籤不會連結到其他網址,我們可以在 cl2
方法中,將 e
事件參數設定 preventDefault()
,他就會將 a
標籤 DOM
本身就擁有連結的功能給消失。而 Vue 中提供了修飾符
的用法,當我們使用 v-on
綁定 click
事件時,加上.prevent
,此時 a
標籤預設連結的功能就會消失。
<body>
<div id=app>
<a href="https://www.google.com/?hl=zh_tw" v-on:click.prevent='cl1'>點擊1</a>
<a href="https://www.google.com/?hl=zh_tw" v-on:click='cl2'>點擊2</a>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
methods: {
cl1:function(){
console.log('點擊成功')
},
cl2:function(e){
e.preventDefault()
console.log('點擊成功')
}
}
})
</script>
先前提到,如果我們要綁定一個觸發事件,可以使用 v-on:
,也可以直接簡寫成@
,結果都會是一樣的。還有我們使用動態綁定屬性的 v-bind
指定,也可以直接簡寫 :
符號,增加開發效率。
<body>
<div id=app>
<a href="https://www.google.com/?hl=zh_tw" v-on:click.prevent='cl1'>v-on:</a>
<a href="https://www.google.com/?hl=zh_tw" @click.prevent='cl1'>@</a>
<img v-bind:src="url" alt="">
<img :src="url" alt="">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
url:'http://img.ewebweb.com/uploads/20190614/14/1560492017-TUpfOhVQro.jpg'
},
methods: {
cl1:function(){
console.log('點擊成功');
}
}
})
</script>