どうも。スマブラ買ったのにまだそんなにできていないいくもとです。
さあ引き続きVue.jsについて学んでいきます。
まだその１その２を読んでいない方はこちらからどうぞぅ。
[related id=386,421 label=合わせて読みたい]
今回からやっと、Vue.jsっぽくなり、便利さがわかってくると思います。
年内に連載を終えたいので頑張って書いていきましょう。それでは参ります。
ディレクティブ
Vue.jsでは標準のHTMLに加えて、Vue.js独自の属性（class=””とかname=””みたいな）を与えることができます。v-〇〇みたいなやつです。
その独自の属性により、DOM操作を行えるわけです。
これらの特別な属性はディレクティブと呼ばれています。
属性地にはJavaScript式を与えてあげましょう。
もちろんのこと、ディレクティブはVueインスタンスをマウントしている要素、子孫内でのみ使用できます。
条件付きレンダリング（v-if / v-show）
テンプレート中の要素の表示、非表示を切り替えるには、v-if または v-showを使うことができます。
属性値の式が、trueとなる場合は表示、falseとなる場合には非表示となります。
使い道としてはバリデーションエラーなどでしょうか。
今回の練習では、税込金額が4万円を超えていると、「40000円超えは高いよね」と赤字で表示される様にしました。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”QzbVBX” default_tab=”js,result” user=”ikumanj”]See the Pen Vue.js 基本5 by iku (@ikumanj) on CodePen.[/codepen_embed]
HTML13行目のspanにv-ifを設定しました。
その属性地となっている’takai’はJS39行目に記述してあります。
単純に、税込の結果である this.tax が40000円以上の時はv-ifがtrueとなり、「40000円超えは高いよね」が表示されています。
コンソールで
vm.message[1].price = vm.message[1].price * 0.8
として、スイッチを20%OFFにしてみましょう。
無事、this.taxが40000円以下となり「40000円超えは高いよね」が非表示になります。
…で、なんで同じ動きするものが2個あるねん！使い道教えろ！って思っていると思います。
v-ifは、式の結果により、DOM要素の追加、削除を行います。
v-showは、cssの displayの値を操作しています。
うまく使い分けてみてください。
クラスとスタイルのバインディング（v-bind）
次は、クラスとスタイルを操作してみます。
UIを作っている時に、特定の条件の時は色を変えるとかいう場面で使えるかなあと思います。
実際に使うとすればフォームの入力で、不適切なものが入った時に背景色を赤く変えるとかですね。
こういったときに、どう使うかというと
条件を満たした場合、class=”error” をつける
とかですね。
まずはクラス。
以下は、算出プロパティ（computed）のcanBuyがfalseになった時に、class=”error”をつける記述です。
v-bind:class="{error: !canBuy}"
こんな感じで記述します。本当は、この書き方ではなく算出プロパティ（computed）としてVueインスタンスに移すことを推奨されています。
ちなみに
:class="{error: !canBuy}"
と、v-bindを省略して書くこともできます。これはv-bindはよく使われるためだそうです。
次にスタイル。
クラスの時とほとんど同じです。
<p :style="{color: 'red'}">赤くなるよ</p>
これでpにstyleが適用され、赤くなります。
それでは40000円より高く、先ほどの算出プロパティ takai がfalseとなった時にエラーとし、エラーが出た時にスタイルを変更する様にしてみます。
今回は簡単に、Vueインスタンスがマウントされている範囲に枠をつけました。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”KbpxOp” default_tab=”js,result” user=”ikumanj”]See the Pen Vue.js 基本6 by iku (@ikumanj) on CodePen.[/codepen_embed]
HTML2行目に :style=”errorStyle” と追加しました。
errorStyleはJS42行目に記述があり、takai がtrueの時は border:1px solid red、falseの時は border:1px solid blackとしています。
初期状態では、42336円なので赤枠に囲まれています。
先ほどの様に、スイッチを20%OFFにしてみると、枠が黒くなり、エラーメッセージ「40000円超えは高いよね」も消えます。
繰り返しレンダリング（v-for）
御察しの通り、for文みたいなことができます。
記述の方法は少し特殊で、
v-for="要素 in 配列"
という構文が使われます。
そして、重要な点はv-bind:key=””で生成時に一意なキーと各要素に与えることです。
これは繰り返し前後の差分の検出などに使われていて、Vue.jsのパフォーマンス面などの理由で必須だそうです。
この繰り返しを用いて、今までは一つづつ呼び出していた買うものの商品名をリストにしてみます。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”oJXJgz” default_tab=”js,result” user=”ikumanj”]See the Pen Vue.js 基本7 by iku (@ikumanj) on CodePen.[/codepen_embed]
HTML5行目にv-forでのリストレンダリングを記述しました。
ここは特に説明いらないと思うのでしません。
イベントハンドリング（v-on）
いままでは、コンソールで直接値を変更することでv-ifやv-bindなどの動きを確認してきましたが、
実際にはそんなことしませんよね。
そこで使うのがこの v-on です。
これのイメージはjQueryのonイベントのようなもので、v-onイベントが起きた時に、属性値の値を実行してくれます。
記述の仕方は
v-on:"イベント"='式として実行する属性値'
です。これもまた頻出なので
@"イベント"='式として実行する属性値'
と略すこともできます。
イベントとして設定できるものはこちらに詳しくまとめられていました。
それではこのv-onを使ってボタンを押すたびに20%OFFになる魅力的なボタンを作ってみます。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”MZwZOg” default_tab=”js,result” user=”ikumanj”]See the Pen Vue.js 基本8 by iku (@ikumanj) on CodePen.[/codepen_embed]
HTML7行目から、ボタンを3つ追記しました。ここで、v-on:clickを用いて割引関数を発火させています。
JSでは、初めて使うmethodsプロパティです。今回はイベントの発火によってデータの変更が行われるので、こちらに記述していきます。
フォーム入力バインディング（v-model）
次に紹介するのはフォーム関連のバインディングです。
v-modelを使用することで、changeイベントなどを使用せずともデータバインディングが可能になっています。
記述法、使用法は簡単なので、早速コードで見ていきます。
今回はデータバインディングを利用して、所持金で購入が可能かどうか判断するフォームを作ります。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”PXzJBa” default_tab=”js,result” user=”ikumanj”]See the Pen Vue.js 基本9 by iku (@ikumanj) on CodePen.[/codepen_embed]
所持金の入力欄を追加しました。
ここに入力した所持金が、下の「合計金額は〜」にバインディングされていて、リアルタイムで変更されます。
買えるボタンを押すと、その時の合計金額と所持金から買えるか買えないか表示するようにしました。
コードの説明をすると、HTML22行目のinputタグにv-modelにmoneyを設定しました。
このmoneyはJS21行目で、dataプロパティに初期値40000として設定されています。
この記述により、HTML23行目の{{ money }}にデータがバインディングされてます。
そして、HTML24行目で先ほど説明したv-on:clickを使用して、JS63行目で税込金額と所持金を比較し、結果に応じて表示される文字を変更する関数canBuyを定義しています。
まとめ
仕組み自体は簡単ですが、
動的に金額の変更が可能（20%OFFボタン）、動的に金額の表示、動的に入力値を表示（所持金）、ボタンを押した時、変更された値を元に関数を実行する
このなかなかめんどくさそうな動作をVue.jsによって簡単に組むことができました。
また、v-modelとv-onには修飾子が存在し、カスタマイズして使用することができます。
例として、v-modelに入力された値を数値としてバインディングする .number や、v-onのclickイベントを一回鹿発火できなくする.onceなどがあります。
修飾子には便利なものが多数あるので、公式ドキュメント等で確認してみてください。
ここまででVue.jsの基本は終了とします！
次からはコンポーネント化していく方法についてまとめます。
それでは〜〜〜
コメント