Vue.jsのテンプレート構文について その3
その1はこちら
その2はこちら
Vue.jsでHTMLを描画する際に用いるテンプレートの構文について学んだことをまとめています。
まだ勉強を始めたばかりなため理解が追いついていない部分があるかと思います。間違った解釈をしているものなどあればお教えいただけると嬉しいです。
ディレクティブを学ぶ
ディレクティブとは
Vue.jsにおいてv-から始まる特別な属性。
全て先頭にv-をつける。
v-text、v-bind、v-htmlなど様々なものが用意されている。
v-on
v-onディレクティブを使うことで、DOM イベントの購読、イベント発火時の JavaScript の実行が可能になります。
イベント発生時に関数を実行できる。
イベントの名前を引数にとる
例：click省略記法は
@(例：@click="ok")
v-onディレクティブでメソッドを使用する
メソッド：関数をたくさん保持できる
v-onイベントオブジェクトを使用する
メソッドの引数にeventを指定することでマウスイベントを取得できる。(※eventでなく他の単語などでも動作はするが、eventを指定することが慣例となっているため基本的にeventを使用する)
カーソルの位置を検知して、X軸とY軸の位置を表示する
console.log(event)で内容を確認できるが、jsFiddleにおいてうまく作動しなかったためコードに記述していません。Vue CLIを使用して試したところ以下のgifのようにeventの内容が確認できます。
指定範囲内でマウスを動かすとその度に位置を検知しているのがわかると思います。clientX、clientYが画面上の位置を記しています。
これはこの位置に来たら要素を追加したり、など応用が利きそうですね。
イベントオブジェクトでの引数
v-onの引数には$eventを使用する
v-onの引数DOMイベント一覧
イベント修飾子
よく使うDOMイベントはVue.js側がすでに用意している。
以下の6つがある。この中でもよく使用される.stopと.preventについて記しておく。
.stop.prevent.capture.self.once.passive
.stop
JavascriptのstopPropagationメソッドを呼び出せる。
親要素へのバブリングを無効にする。
v-onディレクティブの引数に続けて.stopと記述する。
例：v-on:mousemove.stop、@mousemove.prevent
.prevent
Javascriptのevent.preventDefaultメソッドを呼び出せる。
要素のデフォルトの動作を無効にする。
v-onディレクティブの引数に続けて.preventと記述する。
例：v-on:click.prevent、@click.prevent
