iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 12
1

Imgur

Event Handling

可以用 v-on 指令監聽 DOM 事件,並在觸發時執行一些 JavaScript 代碼。

v-on

當 button Greet被點擊的時候,會執行 method greet,也可利用 event.target 得到被點擊的目標。

官方範例:

<button v-on:click="greet">Greet</button>
data: {
  name: 'Vue.js'
},
methods: {
  greet: function (event) {
    alert('Hello ' + this.name + '!')
    if (event) {
      alert(event.target.tagName);
    }
  }
}

附上 fiddle https://jsfiddle.net/hunterliu/yva2or3m/2/

另外除了直接綁定 method 名稱外,也可以綁定一個 inline javascript statement,也就是說可以帶入參數。

例如下面的範例,在 say 這個 method 傳入 一個 string 為 hi 或是傳入msg這個 data,並且跳出警告訊息。

<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say(msg)">Say what</button>
data: {
  msg: 'what'
},
methods: {
  say: function (message) {
    alert(message)
  }
}

附上 fiddle https://jsfiddle.net/hunterliu/ayupapvh/

Event Modifiers(事件修飾符)

Vue.js 提供許多後綴修飾符例如(這邊以 v-on:click 為例):

@click.prevent

後綴修飾符.prevent可防止瀏覽器預設行為。

此範例為點擊atag時,避免連結到 Vue.js 的官網(咦?是很討厭Vue嗎XD)。

<a href="https://vuejs.org/" @click.prevent="preventDefault">button</a>
methods: {
  preventDefault: function() {
    alert('不會連結到 Vue.js官網');
  }
}

附上 fiddle https://jsfiddle.net/hunterliu/pq60qpna/1/

@click.stop

後綴修飾符.stop可阻止點擊事件往父層傳播。

此範例若將.stop後綴修飾符移除,則 method parent 也會觸發。

<div @click="parent">
  <button @click.stop="child">button</button>
</div>
methods: {
  parent: function() {
    alert('這是父層的 div');
  },
  child: function() {
    alert('這是子層的 button');
  }
}

附上 fiddle https://jsfiddle.net/hunterliu/3b4zxf99/3/

@click.capture

後綴修飾符.capture可將事件的傳遞改由父層往子層傳遞。

我簡單改寫上面的範例,即可發現點擊時先觸發了parent再來才是child

<div @click.capture="parent">
  <button @click.capture="child">button</button>
</div>
methods: {
  parent: function() {
    alert('這是父層的 div');
  },
  child: function() {
    alert('這是子層的 button');
  }
}

附上 fiddle https://jsfiddle.net/hunterliu/6e1ucvav/

@click.self

後綴修飾符.self僅僅觸發自己範圍的事件,不包含子層。

一樣改寫上面範例,這邊新增了一個middlemethod,並在parentdiv添加.self修飾符。

當點擊button時,僅觸發了childmiddle,原因是.self修飾符觸發的條件需為event.target 為自身時,而此處的event.targetbutton

<div @click.self="parent">
  <div @click="middle">
    <button @click="child">button</button>
  </div>
</div>
methods: {
  parent() {
    alert('這是父層的 div');
  },
  middle() {
    alert('這是中間的 div,而且只有我被觸發');
  },
  child() {
    alert('這是子層的 button');
  }
}

附上 fiddle https://jsfiddle.net/hunterliu/gvtwgLpf/

@click.once

後綴修飾符.once僅在按下第一次時被執行。

<button @click.once="runOneTime">button</button>
methods: {
  runOneTime: function() {
    alert('我只跑一次');
  }
}

附上 fiddle https://jsfiddle.net/hunterliu/ovjLLamx/

key modifiers(按鍵修飾符)

略。

參考資料


上一篇
用範例理解 Vue.js #11:List Rendering
下一篇
用範例理解 Vue.js #13:v-model and data binding
系列文
用範例理解 Vue.js30

尚未有邦友留言

立即登入留言