Event Handling

Listening to Events

在vue也可以綁定事件，開啟事件用v-on並寫下想執行的js code

Syntax 
< tagName v-on:javascriptEvent="jsCode" >< /tagName >

縮寫

< tagName @javascriptEvent="jsCode" >< /tagName >
HTML 
< div id="example-1" >
  < button v-on:click="counter += 1" >Add 1< /button >
  < p >The button above has been clicked {{ counter }} times.< /p >
< /div >
javascript 
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
Result

The button above has been clicked {{ counter }} times.

Method Event Handlers

很複雜的話...做成function嘛

HTML 
< div id="example-2" >
  < !-- `greet` is the name of a method defined below -- >
  < button v-on:click="greet" >Greet< /button >
< /div >
Javasctipt 
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)
      }
    }
  }
})
Result

你也可以在console執行這一行，會跳出對話框，顯示 Hello Vue.js!

example2.greet()

Methods in Inline Handlers

可以直接在HTML的inline丟js的參數

HTML 
< div id="example-3" >
  < button v-on:click="say('hi')" >Say hi< /button >
  < button v-on:click="say('what')" >Say what< /button >
< /div >
Javascript 
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
Result

還可以用$event呼叫原生的event callback function的參數

此例就送出了一個submit，但是取消了預設行為，所以不會跳頁。

HTML 
< div id="example-3-1" >
  < button  v-on:click = "warn('Form cannot be submitted yet.', $event)" >
    Submit
  < /button >
< /div >
Javascript 
new Vue({
  el: '#example-3-1',
  methods: {
    warn : function ( message, event ) {
      // 現在我們可以訪問原生事件對象
      if (event) event.preventDefault()
      alert(message)
    }
  }
})
Result

Event Modifiers

事件有時需要event.preventDefault()(取消預設行為)或event.stopPropagation()(停止漣波效應)之類的，這往往和我們寫的邏輯混在一起。

最理想的情況是，邏輯歸邏輯、事件細節歸事件細節!!!

為了解決這個問題Vue提供「事件修飾符」，在事件名稱後加上.來呼叫

在此有些解說可以看一下

Result

兩層都有click，外層執行×2，內層執行＋1

一般情況, 先＋1再×2
內層stop, 停止漣波效應, 只有＋1
內外都capture, 先×2再＋1
外層self, 執行內層, self不capture, bubbling, 只有＋1
內層once, 內層只執行一次, 先＋1再×2，之後只有×2

counter: {{ counter }}

Key (key code) Modifiers

指定鍵盤的鍵。

< !-- 只有在keyCode 是13 時呼叫vm.submit() -- >
< input  v-on:keyup.13 = "submit" >

還有為特別的鍵提供別名

Result

點一下，＋1

按enter, ＋1
按tab, ＋1 ??
按delete, ＋1
按esc, ＋1
按space, ＋1
按up, ＋1
按down, ＋1
按left, ＋1
按right, ＋1

counter: {{ counter }}

你也可以自訂別名(全域設定)

// enable v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

Modifier Keys

還支援Ctrl等...的操作

Result

點一下，＋1

按ctrl再點擊, ＋1
按alt再點擊, ＋1 ??
按shift再點擊, ＋1
按meta再點擊, ＋1

counter: {{ counter }}

其中meta在各個鍵盤上的定義有些許不同。可以看看官網文件

使用上，是按下ctrl再keyup其它指定的鍵，才會觸發method

< !-- Alt + C -- >
< input @keyup.alt.67="clear" >
< !-- Ctrl + Click -- >
< div @click.ctrl="doSomething" >Do something< /div >

Mouse Button Modifiers

滑鼠的左鍵、中鍵、右鍵

Result??

點一下，＋1

滑鼠的左鍵點擊, ＋1
滑鼠的中鍵點擊, ＋1
滑鼠的右鍵點擊, ＋1

counter: {{ counter }}

Why Listeners in HTML?

這看似違背關注點分離的做法，其實有它的好處。
傳統的做法上，js歸js，html歸html，使得js上混著事件細節、畫面邏輯，而且該function都是全域的。
在Vue的做上，所有的邏輯都自己寫，所有的事件細節交給Vue，該function都在Vue物件中，不會是全域的。
官網文件提出了幾個解釋