Vue.jsのv-on【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsのv-onについて、簡単に解説していきます。

v-onとは

Vue.jsのv-onを使うとVueインスタンスのメソッドを発火できます。

例えば、v-on:clickにメソッドを指定すると、クリック時にメソッドが発火します。

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反転</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: '123456789'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

上記のコードでは、反転ボタンをクリックするとmessageの内容が反転するようにしています。

引数の指定も可能

メソッド名の指定ではなく引数の指定も可能です。

通常のJavaScriptと同じ書き方がVue.jsでもできます。

<div id="app">
  <button v-on:click="greet('Good morning')">午前の挨拶</button>
  <button v-on:click="greet('Good afternoon')">午後の挨拶</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    greet: function (message) {
      alert(message)
    }
  }
})
</script>

上記のコードの例では、関数の呼び出し時に文字列を引数に指定しています。

DOMイベントを渡すこともできる

DOMイベントを引数で渡すこともできます。

DOMイベントを渡すには引数に$eventと書く必要があります。

<div id="app">
    <button v-on:click="getButtonClickEvent($event)">
      イベント情報のログ出力
    </button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    getButtonClickEvent: function (event) {
      if (event) {
        event.preventDefault()
      }
      console.log(event)
    }
  }
})
</script>

上記の例では、getButtonClickEventメソッドを呼び出す際にDOMイベントも渡しています。