vue学習ノート-イベントリスニング

最も簡単なクリックイベント

"example-1">
  "counter += 1">Add 1
  
The button above has been clicked {{ counter }} times.


var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

 button 。  JavaScript    counter+1  ui 

 
v-on:clickがメソッドを実行する方法:

"example-2">
  
  "greet">Greet

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  //   `methods`  
  methods: {
    greet: function (event) {
      // `this`   Vue  
      alert('Hello ' + this.name + '!')
      // `event`   DOM  
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

インラインプロセッサでのメソッド

 ，  JavaScript  ：

"example-3">
  "say('hi')">Say hi
  "say('what')">Say what

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

イベント修飾子

イベントハンドラでevent.preventDefault()またはevent.stopPropagation()を呼び出すことは、非常に一般的な要件である.この点を方法で簡単に実現できるが,DOMイベントの詳細を処理するのではなく,純粋なデータ論理のみを方法とするのがより良い方法である.
この問題を解決するためにjsはv-onにイベント修飾子を提供する.前述したように、修飾子は点の先頭にある命令接尾辞で表される.

"doThis">

"onSubmit">
"doThat">
"doThis">...
"doThat">...
修飾子を使用する場合は、順序が重要です.対応するコードは同じ順序で生成されます.したがって、v-on:clickを用いる.prevent.selfはすべてのクリックを阻止し、v-on:click.self.preventは要素自体へのクリックを阻止するだけです.