Vue の基本のディレクティブを理解する
はじめに
Vue.jsの公式ドキュメントで出てきたディレクティブについてまとました。
現在進めている途中なので、それ以外の部分は別途まとめる予定です。
初心者のため、間違い等あればご指摘いただきたいです。
マスタッシュタグとは
Vueのデータバインデイングにおける最も基本の形式。
以下の場合、マスタッシュタグ{{}}を使うことで、{{}}の中身msgは、対応するコンポーネントのインスタンスが持つmsgというプロパティの値に置き換えられる。
※データバインディングとは、データと描画を同期する仕組み。
<script>
export default {
data() {
return {
msg: 'Hello World!'
}
}
}
</script>
<span>Message: {{ msg }}</span>
// 出力
Message: Hello World!
ディレクティブとは
v-という接頭辞を持つv-htmlとかv-bindのようなVue特有の属性のこと。
ディレクティブはレンダリングされるDOMに特別な振る舞いを割り当てる。
v-から始まる記法以外に省略記法もある。
v-html
マスタッシュの中では、データがHTMLではなくプレーンテキストとして解釈される。
本来のHTMLとして出力したい場合は、v-htmlディレクティブを用いる。
以下は上で書いたコードをv-htmlを用いて記述したもの。出力結果は同じになる。
<script>
export default {
data() {
return {
msg: 'Hello World!'
}
}
}
</script>
<p>Message: <span v-html='msg'></span></p>
// 描画結果
Message: Hello World!
v-bind
マスタッシュ構文はidやclassのようなHTML属性については使うことができない。
v-bindを使うことでHTML属性についても更新できる。
以下の場合、id属性にdynamicIdプロパティの値を同期する。
<div v-bind:id="dynamicId"></div>
<!-- 省略記法 -->
<div :id="dynamicId"></div>
以下の場合、isButtonDisabledプロパティの真偽によってdisable属性を操作し、ボタンの表示を操作する。
<button v-bind:disabled="isButtonDisabled">Button</button>
<!-- 省略記法 -->
<button :disabled="isButtonDisabled">Button</button>
以下の場合、urlプロパティによって、href属性を操作する。
<a v-bind:href="url"> ... </a>
<!-- 省略記法 -->
<a :href="url"> ... </a>
v-if
プロパティの真偽によって要素を削除したり挿入したりできる。
以下の場合、seenプロパティがtrueのときにNow you see meを表示する。
<p v-if="seen">Now you see me</p>
v-on
イベントのハンドリングについて更新できる。
以下の場合、aをクリックした際にdoSomethingの値を実行する。
<a v-on:click="doSomething"> ... </a>
<!-- v-on:の省略記法は@ -->
<a @click="doSomething"> ... </a>
複数要素にバインドさせる
以下のようにすると、div要素にid属性とclass属性を付与させることができる。
<script>
const objectOfAttrs = {
id: 'container',
class: 'wrapper'
}
export default {
data() {
return {
objectOfAttrs
}
}
}
</script>
<div v-bind="objectOfAttrs"></div>
// 要素結果
<div id="container" class="wrapper"></div>
動的引数
引数をJS式としておくことも可能。
以下の場合、コンポーネントのインスタンスからattirbuteNameとurlの2つのプロパティを操作できる。
<a v-bind:[attributeName]="url"> ... </a>
<a :[attributeName]="url"> ... </a>
attributeNameというデータプロパティがhrefという値だった場合は、以下と同義になる。
<a v-bind:href="url"> ... </a>
<a :href="url"> ... </a>
また以下の場合、最終的にurlプロパティのURLが付与されたGoogleというテキストが描画される。
<script>
export default {
data() {
return {
tagName: 'href',
url: 'http://google.com'
}
}
}
</script>
<template>
<a :[tagName]="url">Google</a>
</template>
制約
動的引数は、評価結果がnullまたは文字列になる。それ以外は警告表示される。
nullの場合、バインディングを削除する。
HTMLに直接記述するDOMテンプレートの場合、属性名は小文字である。
以下の場合、属性名はsomeattrとして認識される。
<a :[someAttr]="value"> ... </a>
修飾子
.のあとに続く接頭辞をいう。
以下の場合、.prevent接頭辞はイベントがトリガーされたときに、event.preventDefault()を呼び出すことをv-onに伝える。
onSubmitには任意のプロパティの値が入る。
<form v-on:submit.prevent="onSubmit">...</form>
<form @submit.prevent="onSubmit">...</form>
参考
Discussion