iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 21
1
自我挑戰組

前端史萊姆與Vue的三十天時光冒險系列 第 21

Day21 寫於開始實作前(2):Vue.js的Methods以及監聽事件 (v-on)

本文同步發表於斜槓女紙部落格:Day21 寫於開始實作前(2):Vue.js的Methods以及監聽事件 (v-on)

Day21 寫於開始實作前(2):Vue.js的Methods以及監聽事件 (v-on)

實作到目前為止,大部分還在處理靜態網頁的畫面。但是呢~別忘了我們的設計稿是一份包含『預約訂房』功能可以與瀏覽者(消費者)互動的動態網頁。今天就要來和大家聊聊在Vue.js中能掌控網頁元素所有動作的監聽事件(v-on)

何謂「靜態網頁設計」? 何謂「動態網頁設計」?

What is v-on?

v-on是用來在HTML元素中加入事件監聽器,即可找到對應的事件處理方法。用在自定義元素組件上時,也可以監聽子組件觸發的自定義事件。同等於JavaSctiptaddEventListener以及jQuery中的.on()

在HTML元素上使用v-on建立監聽事件時,我們並需在new Vue中使用methods這個屬性用來定義方法,如果我們在UI操作了什麼動作,都可以寫methods去回傳方法,執行相對應的事件,通常methods定義方法的方式是一個包住functionobject

  • 縮寫:@
  • 表達式:function、inline statement、object

實際範例

  1. 直接綁定methodsfunction名稱
    讓我們稍微改寫一下昨天的範例來解釋,首先在<button>上利用v-on綁定show事件,點下按鈕實會跳出alert
<button v-on:click="show">點我出現alert</button>
new Vue({
  el: '#demo',
  methods: {
		show: function (){
			alert('哈囉你好嗎!');
			return false;
		},
	},
})
  1. 行內敘述inline statement寫法
    這次改用另一種寫法,我們在say這個method傳入 一個『我是鐘小呆』的字串,注意字串要使用單引號 ‘包起來。 點下按鈕後回直接回傳我們所帶入在v-on的字串。
<button v-on:click="say('我是鐘小呆')">行內敘述寫法,點我</button>
new Vue({
  el: '#demo',
  methods: {
    say: function (message) {
      alert(message)
    },
	},
})

事件修飾符 (Event Modifiers)

Vue.js 藉由事件修飾符 (Event Modifiers) 處理了許多 DOM 事件的細節,讓我們能專注於程式邏輯的撰寫。

寫法為v-on:事件.修飾符,如v-on:click..prevent,也可同等於@click.prevent

修飾符號 用途
.stop 呼叫js中的event.stopPropagation(),停止事件往父層繼續傳遞。
.prevent 呼叫js中的event.preventDefault(),防止執行瀏覽器事件的預設行為。
.capture 可將事件的傳遞改由父層往子層傳遞。
.self 僅僅觸發自己範圍的事件,不包含子層。
.native 監聽元件根元素的原生事件。
.once 事件只能被執行一次。
.passive 2.3.0版本後加入,會以{ passive : true }的模式添加事件監聽器。

今天就先與大家分享到這,明天終於要來看Scroll Down button的實作過程囉!


參考資料


上一篇
Day20 寫於開始實作前(1):不用抱大腿也能直接使用Vue製作過場效果及動畫
下一篇
Day22 閒不下來的史萊姆(三):scroll down按鈕實作
系列文
前端史萊姆與Vue的三十天時光冒險30

尚未有邦友留言

立即登入留言