前言

本系列將介紹 Rails with Vue 的基本概念，並且以一個簡單的專案 Todo 來說明如何使用 Rails with Vue。我將透過這一系列的文章記錄我學習的過程，並且將我所學到的知識分享給大家。

• 【Day 01】淺入淺出 Rails with Vue - Before We Begin
• 【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1
• 【Day 03】淺入淺出 Rails with Vue - Vue 的基本概念 - 2
• 【Day 04】淺入淺出 Rails with Vue - Vue 的基本概念 - 3
• 【Day 05】淺入淺出 Rails with Vue - Vue 的基本概念 - 4
• 【Day 06】淺入淺出 Rails with Vue - Vue 的基本概念 - 5
• 【Day 07】淺入淺出 Rails with Vue - Vue 的基本概念 - 6
• 【Day 08】淺入淺出 Rails with Vue - Vue 的基本概念 - 7
• 【Day 09】淺入淺出 Rails with Vue - Vue 的基本概念 - 8
• 【Day 10】淺入淺出 Rails with Vue - Vue 的基本概念 - 9
• 【Day 11】淺入淺出 Rails with Vue - Vue 的基本概念 - 10
• 【Day 12】淺入淺出 Rails with Vue - Vue 的基本概念 - 11
• 【Day 13】淺入淺出 Rails with Vue - Vue 的基本概念 - 12
• 【Day 14】淺入淺出 Rails with Vue - Vue 的基本概念 - 13

Event Handling

Method Event Handlers

當 js 的 logic 越來越複雜時，我們可以將 js 的邏輯放在 methods 裡面，並且在 html 中呼叫 methods。
如以下範例中，我們建立了一個 method 叫做 greet ，並且在 html 中呼叫 greet 這個 method。

<div id="example-2">
  <!-- `greet` is the name of a method defined below -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    greet: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

你也可以弄髒你的手，打開瀏覽器 console，並且在 console 中呼叫 greet 這個 method。

example2.greet() // => 'Hello Vue.js!'

Methods in Inline Handlers

我們也可以使用 inline javascript expression 來呼叫 methods。
如以下範例中，我們在 html 中使用 v-on:click 來呼叫 say 這個 method，並且傳入參數。

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

假如你想要在 method 中使用 event，你可以將 event 作為第二個參數傳入，傳入的格式為 $event。

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // now we have access to the native event
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

Event Modifiers

在 js 裡面使用 event.preventDefault() 或 event.stopPropagation() 是很常見的事情，但是在 Vue 中，我們可以使用 event modifiers 來達到同樣的效果。
為了達成這個效果，我們可以在 v-on 指令後面加上 . 來加入以下 event modifiers。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

範例如下：

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- just the modifier -->
<form v-on:submit.prevent></form>

<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div v-on:click.capture="doThis">...</div>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>

Vue 也提供了 .passive event modifier，對應到 addEventListener 的 passive option，用於提升 mobile devices 的滾動效能。

<!-- the scroll event's default behavior (scrolling) will happen -->
<!-- immediately, instead of waiting for `onScroll` to complete  -->
<!-- in case it contains `event.preventDefault()`                -->
<div v-on:scroll.passive="onScroll">...</div>

特別注意：.passive event modifier 與 .prevent event modifier 不能一起使用，因為 .prevent 會阻止滾動事件的預設行為。

Reference

• https://v2.vuejs.org/v2/guide/list.html