【Nuxt.js v2】v-on, v-bind, v-modelの使い方

v-on

イベントを設定できる。
（click, dblclick, mouseover, keydownなどがある）

<a v-on:click="clickEvent">
<!-- ↓省略記法 -->
<a @click="clickEvent">

呼び出した関数では、イベントオブジェクトが引数として受け取れる。

export default {
  methods: {
    clickEvent (e) {
      // ・・・
    }
  }
}

v-bind

変数の内容を属性に紐付ける。

<div v-bind:style="exampleStyle">
<!-- ↓省略記法 -->
<div :style="exampleStyle">

export default {
  data() {
    exampleStyle: '{ display: none; }'
  }
}

v-model

変数の内容を紐付け、HTML側での入力内容が変数に反映される。

<input type="text" v-model="userName">
<!-- 省略記法なし -->

export default {
  data() {
    userName: ''
  }
}