イベントハンドラ – v-on属性を使ってみる –

jQueryで言う所のonclickイベントをVueで記述しようとした場合、こんな感じになる。

// template(html)部分
<button v-on:click="メソッド名">Greet</button>
または、
<button @click="メソッド名">Greet</button>

// JS部分
data() {
  message: 'Hello Vue!'
},
methods: {
  メソッド名(引数) {
    // 処理
  }
}

v-on:は@に短縮することも可能
ただし、他にもあるので最初から使うと何が何やら分からなくなるので注意しないといけない。

See the Pen vue05 by Kotacr (@qurimuk) on CodePen.0

イベント色々

クリックイベント v-on:click=”hoge” or @click=”hoge”

クリックしたら文字を表示。

See the Pen vue_on_click by Kotacr (@qurimuk) on CodePen.0

フォーカスイベント v-on:focus=”hoge” or @focus=”hoge”

フォーカスされたタイミングで文字を表示。

See the Pen vue_on_focus by Kotacr (@qurimuk) on CodePen.0

データバインディング v-model=”hoge”

form要素でv-modelを利用すると、双方向データバインディングを作成する事ができる。

v-model は、内部的には input 要素に応じて異なるプロパティを使用し、異なるイベントを送出します:

テキストと複数行テキストは、value プロパティと input イベントを使用します
チェックボックスとラジオボタンは、checked プロパティと change イベントを使用します
選択フィールドは、value プロパティと change イベントを使用します

引用元:Vue.js

ここは別途まとめようかな。

ブラーイベント v-on:blur=”hoge” or @blur=”hoge”

逆にブラーイベント。
現時点では、これを使ってバリデートするのかな?と思ってしまうが、それはまたちょっと別の話。

See the Pen vue_on_blur by Kotacr (@qurimuk) on CodePen.0

チェンジイベント v-on:change=”hoge” ot @change=”hoge”

See the Pen vue_on_blur by Kotacr (@qurimuk) on CodePen.0

当然ながら、form関連のイベントと返ってくるプロパティの取り扱いは頻繁になりそうですね。

その他イベント達

他にも色々あるのでまとめて記述。

dblclick:ダブルクリック
submit:サブミット

keyup:キーアップ
keydown:キーダウン

mousedown:マウスクリックした時に反応
mouseup:クリック後に反応
mousemove:マウスが動いた

mouseover:カーソルを当てた(ホバー)
mouseout:カーソルを外した
mouseenter:カーソルを当てた時。子に影響しない
mouseleave:カーソルを外した時。子に影響しない

所感

どんなアプリケーションを作るかだけど、クリックイベント(@click)だけマスターしておけば問題なさそうな気がする。バリデーションとかはお手製である必要もないし..。

Similar Posts