基礎からメモ： Vue.js CH1-p40 イベントと関連付ける

Vue.js

ボタンクリックなどのHTMLのイベントと、Vueインスタンスを関連付ける。

[index03.html]

<div id="app">
  <button v-on:click="handleClick">Click!</button>
</div>

v-on:click=メソッド名で、クリックするとVue側のmethodsに定義された関数が実行される。

[main03.js]

var app = new Vue({
  el: '#app',
  data: {
    message: "Hello Vue.js!",
  },
  methods: {
    handleClick: function(event){
      alert(event.target); // [object HTMLButtonElement]
    }
  }
})

この例の場合はイベントのターゲットであるボタン要素名をアラートで表示する（[object HTMLButtonElement]）。

  • HTMLイベントと、Vueインスタンスを関連付けるにはv-onを使う。
  • v-on:イベント名=メソッド名で、イベントがあった場合にVueインスタンス側のメソッドが起動する。

    (例)v-on:click=メソッド名で、クリックするとVue側のmethodsに定義された関数が実行される。