Javascript知識ゼロの人が、Vue.js入門の2章を学習してみた – 後編

前編読んでいただき、ありがとうございました。後編が遅いとか言わないで!後半は、ディレクティブとライフサイクルフックについて触れていきます。

ディレクティブ

Vue.jsではHTMLに対して、DOM操作をするための特別な属性(=ディレクティブ)があります。書式はv- から始まる名前(属性名)を持ち、Vueインスタンスをマウントした(elプロパティを適用させているなど)要素とその子孫でしか使えません。

条件付きレンダリング

<p v-if="引数"></p>
<p v-show="引数"></p>

どちらも引数が真でタグ要素を表示します。(上記の例では<p>タグが有効化) v-ifはDOM要素を追加、削除によって表示非表示を実現しています。v-showはスタイルのdisplayプロパティを変更します。そのため、レンダリングコストはv-showの方が低く、v-ifの方が高いです。つまり、頻繁に条件の評価結果が変わる場合はv-showを使い、式の評価結果がほとんど変わらない場合はv-ifを利用するのが適切です。

v-bindディレクティブ

特定の条件下で見た目を変えたい場合(フォーム入力で不正な値が入力された場合など)に使えるディレクティブ。v-bindは特殊な記法を用いて使います。

v-bind:属性名="データを展開した属性値"

属性名にclassを指定することでクラスの、styleを指定することでstyleスタイルのディレクティブを実現します。

v-bind:class="オブジェクト・配列"
v-bind:style="オブジェクト・配列"

v-bind:class

v-bind:classは値が真のプロパティ名をclass属性値として反映します。下記の例の場合はclassはdrinkになります。

<p v-bind:class="drnik: ture, no-drink: false"></p>

属性値はプロパティの数や、値の式が複雑化しやすいため、算出プロパティとして、Vueインスタンス側に記載するとメンテナンス性が上がります。thisはVueインスタンス自身です。下記の場合は算出プロパティのcanBuyが偽である場合、classがerrorとなります。

computed: {
errorMessageClass: function() {
return {
error: !this.canBuy
}
}
}
<p v-bind:class="errorMessageClass">
1000円以上からご購入頂けます。
</p>

v-bind:style

v-bind:styleでは、属性値のオブジェクトのプロパティがスタイルのプロパティとして反映されます。

<p v-bind:style="{color: 'red'}"></p>
<p v-bind:style="color: red;"></p>として反映される

式と組み合わせ、下記のように記述した場合はcanBuyが偽の場合、属性値が”border: 1px solid red; color: red;”となります。

<p v-bind:style="{border: (canBuy ? '' : '1px solid red'), color: (canBuy ? '' : 'red')}"></p>

v-bind:class同様に算出プロパティに移した例を記載します。

computed: {
errorMessageStyle: function() {
return {
border: this.canBuy ? '' : '1px solid red',
color: this.canBuy ? '' : 'red'
}
}
}
<p v-bind:style="errorMessageStyle">
1000円以上からご購入頂けます。
</p>

v-bindの省略記法

v-bindディレクティブは最もよく使われるディレクティブであるため、省略記法が用意されています。v-bind自体の記述を省略し、:+属性名で記述が可能です。

v-bind:class→:class
v-bind:style→:style
<p :class="{error: !canBuy}"></p>

リストレンダリング(v-for)

v-forディレクティブでは、配列もしくはオブジェクトのデータをリストレンダリング(繰り返しレンダリング)できます。

v-for="要素 in 配列" v-bind:key="key名"

v-bind:keyでは、一意なキーを各要素に与えます。Vue.jsでのパフォーマンス等の理由で与えられているため、特に理由がない限り、v-bind:keyを忘れないようにしてください。

イベントハンドリング(v-on)

Vue.jsでは、v-onディレクティブの要素のchageやinputなどのイベントをハンドリングしてデータを変更します。v-onディレクティブも特殊な記法をし、省略記法もあります。

v-on:イベント名="式として実行させる属性値"
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
new Vue({
el: '#example-1',
data: {
counter: 0
}
})

v-onの省略記法は@です。@イベント名で記載します。

フォーム入力バインディング(v-model)

Vue.jsには、ビュー(DOM)で変更があったとき、Vueインスタンスのデータとして更新したり、Vueインスタンスのデータに変更があった場合、ビューを再レンダリングする、v-modelディレクティブが提供されています。 双方向データバインディングがキーワードのようです。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

inputタグによる制御だけではなく、selectタグでの制御もできます。気になる方は、Vue.jsのドキュメントを見てみてください。

ライフサイクルフック

Vueインスタンスには、生成時に一連の初期化が行われます。例えば、DOMへのインスタンスのマウントや、データが変化したときのDOMの更新などがそれに当たります。その初期化の過程で、特定の段階でユーザー自身のコードを追加する、ライフサイクルフックという関数を実行します。

ライフサイクルフックの一覧を掲載します。

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

各、フックが呼び出されるタイミングについては、Vue.jsドキュメントを参照してください。

Vueインスタンス(ページ最下部にフロー)
https://jp.vuejs.org/v2/guide/instance.html

まとめ

前編後編と書かせていただきましたが、全体的にとっつきやすい!と感じています。書式もほぼほぼ変わらず、(v-onやv-bindは特殊な記法がありますが)かなり感覚的に記述できる気がしています。

今後はアウトプットのタイミングを少し減らし、インプットに集中していこうかと思います。最後まで読んでいただきありがとうございました!