Vue特有のv-から始まるディレクティブをまとめてみました。
＜環境＞
Vue.js v2
v-text
dataの文字列表示。{{}}と同じ意味を持ち、同じ使い方をする。
<h1 v-text="message"></h1>
<h1>{{message}}</h1>
<!-- どちらの書き方でも表示は同じ -->
v-once
一度だけ表示させたい時に使う。
<h1 v-once>{{message}}</h1>
v-html
vueで作成したHTMLを表示させる。
HTMLをそのまま表示させるため、XSS（クロスサイトスクリプティング）の脆弱性があるので注意。
<div id="app">
<div v-html="html"></div>
</div>
<script>
new Vue({
el:'#app',
data:{
html:'<h1>見出し</h1>'
}
})
</script>
v-bind（重要）
属性（classやstyle等）を引数に入れる事で、(※1)データバインディングするディレクティブ。
※1…データと対照とを結びつけること。
<div id="app">
<a v-bind:href="url">moryブログ</a>
</div>
<script>
new Vue({
el:'#app',
data:{
url:'https://morymory.com/'
}
})
</script>
v-bindを省略して書く
<a :href="url">moryブログ</a>
JavaScript式を引数に使う
<div id="app">
<a :[attribute]="url">moryブログ</a>
</div>
<script>
new Vue({
el:'#app',
data:{
url:'https://morymory.com/',
attribute:'href'
}
})
</script>
v-on（重要）
クリックしたりマウスを動かした瞬間に何かをさせたい時に使用するディレクティブ。
引数にDOMイベント名を入れる。
DOMイベント一覧はこちら
<button v-on:click="countUp()">counter</button>
＜メモ＞
どのような時に（）が必要かのメモ。
v-on:click=”countUp()“
●methodsプロパティを使う時 = ()必要
〇conputedプロパティを使う時 = ()不要
イベント修飾子
EventインターフェースのメソッドをVueが簡単に呼び出せるようにした修飾子。
ドット(.)で繋げることができ、複数のイベント修飾子を繋げて記載することも可能。
※繋げて記載する際の順番に決まりはない。
下記で紹介したほかにも、 .capture .self .once .passive がある。
イベント修飾子について書かれている公式サイトはこちら
.stop
event.stopPropagation() を実装させる。
.stopが付いた子要素にはイベントを実行させない。
<div v-on:click="countUp()">counter<span v-on:click.stop>クリックしてもcountしません</span></div>
.prevent
event.preventDefault() を実装させる。
デフォルトの挙動をさせない。
<a :href="mory" v-on:click.prevent>moryブログ</a>
キー修飾子
キーボードのイベント時に発火する。
イベント修飾子同様に複数の修飾子を繋げて書くことができる。
<div id="app">
<input type="text" v-on:keyup.enter="enterAlert()">
</div>
<script>
new Vue({
el:'#app',
methods:{
enterAlert(){
alert('enterが押されました');
}
}
})
</script>
v-onを省略して書く
v-onを@に置き換えて書くことができる。
<input type="text" @keyup.enter="enterAlert()">
v-model（重要）
双方向バインディングを可能にするディレクティブ。
※テンプレート構文（HTML）からmodel（dataがある側）の変更を可能とさせている。
<div id="app">
<input type="text" v-model="message">
<p>{{message}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello'
}
})
</script>
