Vue.jsに入門して半歩くらい前進したので学習したことをメモしています。
マスタッシュ構文
{{ 変数名 }} とすることで、Vueに定義したdataの変数をコンポーネントやテンプレートに埋め込むことができる。
ディレクティブ
接頭辞v-がついたVue.jsの属性の事。
式の値が変更されるとDOMに対してリアクティブな動作をする。
v-bind
HTML要素の属性内では{{ 変数名 }} は使えない。
v-bind: を使うことで、要素の属性をバインディングできる。
// こう書くと
<a v-bind:href="url">Google</a>
// こうなる
<a href="https://www.google.com/">Google</a>
<script>
// Vueインスタンスのdataオプションで指定されたurlの値をバインド
const app1 = new Vue ({
el: '#app-1',
data: {
url: 'https://www.google.com/'
}
})
</script>
※v-bind:hrefは:hrefに省略できる。
v-on
v-onディレクティブを使用してイベントリスナーを加えると、Vueインスタンスの
メソッドを呼び出せる。
下記の例では、ボタンクリックでcounterメソッドが呼び出される。
<button v-on:click="counter">クリック</button>
※v-on:clickは@clickに省略できる。
v-model
フォームのinput、textarea、select要素に双方向データバインディングを作成できる。
つまり、data内で定義した変数をv-modelに指定すると、リアルタイムに変数の値が書き換わる。
※data内で変数を定義する際に初期値の設定が必要。
※タグの属性に初期値を設定しても無視される。
※v-modelは下記の糖衣構文(syntax suger)
<input
v-bind:value="inputText"
v-on:input="inputText = $event.target.value"
>
v-if、v-else、v-else-if
条件分岐によって要素の有無の切り替えができる。
※v-else、v-else-ifは、v-ifまたはv-else-if要素の直後に記述する必要がある。
v-show
値の真偽値によって、要素の表示の切り替えができる。
v-ifとv-showの違い
-
v-ifで非表示の場合
DOM上から削除されるために表示されない状態 -
v-showでの非表示の場合
style属性のdisplay: noneを追加することによって非表示にしていて、DOM上には常に存在する。
※表示の切り替え頻度が多い場合、v-showを使えば、表示にかかるコストを減らすことができる。
v-for
配列やオブジェクトに基づいた要素のリストレンダリングができる。
つまり、配列の要素やオブジェクトのプロパティの値を展開できる。
変数名 in 配列名のように使う。
また、同じエレメントにv-bindでkeyプロパティの指定が必須。
Vueは、keyの値を基にデータを追跡するため、keyの値は一意かつ変更が生じない値を設定する。
配列のindexを利用したい場合は、(変数名, index) in 配列名というように、2つ目の引数に指定する。
【v-forを使用して配列itemsの要素を展開する例】
<template>
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
</template>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
</script>
// 表示結果
Foo
Bar
※v-forとv-ifが同じ要素に使用されていた場合、v-forが優先される(非推奨)
v-once
Vueによるレンダリングを一度だけ行うように指定することができる。
つまり、初回表示後に値の変更があっても、表示は変更されない。
Vueコンストラクタのオプションオブジェクト
el (element)
id名またはclass名を指定することで、Vueインスタンスを紐付ける範囲の要素を
指定できる。
テンプレート
<div id="app"></div>
ルートコンポーネント（.vue）
const app = new Vue({
el: '#app'
})
上記の例では、id="app"のdeviエレメントの範囲でのみ、Vueが作用を及ぼす。
※同一class名の要素が複数あるものに対しては使用できない
data
Vueアプリケーション内で使用するデータを定義できる。
【dataオプションに定義したmessageを、マスタッシュ構文で展開する例】
<template>
<div id="example">
ようこそ、{{ name }} さん
</div>
</template>
<script>
var example = new Vue({
el: '#example',
data: {
name: '山田 太郎'
}
})
</script>
// 表示結果
ようこそ、 山田太郎 さん
methods
Vueアプリケーション内で使用する関数を定義できる。
methodsオプションで定義した関数はv-onディレクティブを使ってイベントリスナーを加えて呼び出せる。
※計算結果をキャッシュしない。関数呼び出しの度に再計算される。
【ボタンをクリックする度に、表示しているカウントを1ずつ増やす例】
<template>
<div id="example">
count: {{ count }} 回
<button @click="plus">ボタン</button>
</div>
</template>
<script>
var example = new Vue({
el: '#example',
data: {
count: 0
},
methods: {
plus: function() {
this.count++
}
}
})
</script>
computed ※算出プロパティ
dataオプションの値を使って、それを関数で加工したデータを返す。
計算結果をキャッシュする。
依存している値に変更がない場合、再度関数を呼び出してもキャッシュされたものがそのまま再利用されるため、処理が高速な特徴がある。
watch
特定のプロパティの値の変更を監視し、変更時に設定した関数を実行。
watch: {
(dataオプションに定義している)プロパティ名: function(変更後の値, 変更前の値) {
// 処理
}
}