iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
Modern Web

少年學Vue,如隙中窺月系列 第 10

[Day10] 修飾符與簡寫

  • 分享至 

  • xImage
  •  

事件觀念

如果我們建立一個函數 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>

https://i.imgur.com/KD3OJAo.png

修飾符

前面提到,如果當我們點擊後觸發滑鼠事件,此時 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>

上一篇
[Day9] 操作頁面行為(v-on)
下一篇
[Day11] 資料綁定細節
系列文
少年學Vue,如隙中窺月30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言