Vue.js 在事件處理上,主要是透過 v-on 去監聽事件,事件觸發後可以指定對應的動作。

像是點擊後用運算式處理對應的動作。


  Vue - Hello World

    Click
    
{{click}}

    new Vue({
      el: '#app',
      data:{
        click: 0
      }
    })

1.png

或是調用對應的方法處理。


  Vue - Hello World

    Click
    
{{click}}

    new Vue({
      el: '#app',
      data:{
        click: 0
      },
      methods: {
        onClick: function(event){
          this.click += 1
        }
      }
    })

若有需要,在方法調用時也可以附帶參數進去調用。


  Vue - Hello World

    Click
    
{{click}}

    new Vue({
      el: '#app',
      data:{
        click: 0
      },
      methods: {
        onClick: function(value){
          this.click += value
        }
      }
    })

2.png

需要 DOM event 做些處理的話,也可以透過 $event 將 DOM event 傳入對應的方法內使用。


  Vue - Hello World

    Click
    
{{click}}

    new Vue({
      el: '#app',
      data:{
        click: 0
      },
      methods: {
        onClick: function(value, event){
          if (event) event.preventDefault()
          this.click += value
        }
      }
    })