おはこんばんにちは。スマブラが待ち遠しすぎるいくもとです。
遅くなりましたが、Vue.jsについての記事の続きです。
こちらをまだ読んでない方は、こちらからご覧ください。
[related id=386 label=合わせて読みたい]
導入方法等は省きます。ググると無限に出てくるのでそちらを参考にしてみてください。
今回はお手軽にCDNで読み込みます。
それでは早速基本中の基本について学んでいきましょう。
Vue.jsの基本
データバインディング
Vue.jsの核の機能として、データバインディングがあります。データやらなんやらを動的に結合する機能です。
まずはここから触れていきます。さあ、最初といえばあれですね！
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”mQYjWo” default_tab=”html,result” user=”ikumanj”]See the Pen Vue.js 基本1 by iku (@ikumanj) on CodePen.[/codepen_embed]
ひらがなで出しました。
軽く解説していきます。
1行目でVue.jsを読み込んだので、グローバル変数Vueが定義されます。
グローバル変数Vueはコンストラクタ（オブジェクトを生成するための関数）の役割と、Vue.jsのモジュールの役割を持っています。グローバル変数VueがVue.jsの動作の根幹になっています。
JSでは、グローバル変数Vueをコンストラクタとして使うためにnew演算子を使っています。ここで生成されているオブジェクトがVueインスタンスと呼ばれるものです。
このインスタンスを #app に適用しているので、DOM要素内でVue.jsが使えるということです。
つまり、elというプロパティの値に設定したところに適用されるということになります。
次のプロパティのdataには、見ての通りデータのオブジェクトを指定します。今回はmessageに、はろーわーるど！と設定したので、
HTMLの{{ message }}の部分に晴れて文字が表示された、ということです。
dataは別オブジェクトとして生成されたものも使えます。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”MzdBLO” default_tab=”html,result” user=”ikumanj”]See the Pen Vue.js 基本2 by iku (@ikumanj) on CodePen.[/codepen_embed]
messageという配列に格納されているデータを、順番に呼び出してみました。
また、HTML10行目のように{{ }}の中では、1行のみjavascript式が書けます。
dataプロパティは、Vue.jsのリアクティブシステムに乗っている状態なので、値に変化があるたびに検知し、自動で表示が切り替わります。
こういったところで、動的なデータバインディングを可能にしているようです。
試しに以下のコードをコンソールに入力してみると、表示の切り替わりを確認できるかと思います。
vm.message[2].ja = '好き'
フィルタ（filters）
先ほど紹介したプロパティel、dataにならんで、filtersがあります。
その名の通り、フィルタとして汎用的なテキストフォーマット処理を適用できます。
先ほどのように計算された値を表示し、カンマ付けをするフォーマットを作ってみます。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”BGeGae” default_tab=”html,result” user=”ikumanj”]See the Pen Vue.js 基本3 by iku (@ikumanj) on CodePen.[/codepen_embed]
スマブラのためにスイッチを買った人たちはこんなに払っているのか…
ちなみに、フィルタは連結できるようです。
算出プロパティ（computed）
次は算出プロパティです。データそのものに処理を与えたのものプロパティにするときはcomputedを使います。
複雑な処理の式をテンプレートに記述するときとかに使います。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”QJRJQE” default_tab=”js,result” user=”ikumanj”]See the Pen Vue.js 基本4 by iku (@ikumanj) on CodePen.[/codepen_embed]
先ほどは{{ }}内に直接書いていた計算式を、computedの中で処理しています。
total ではmessageの中のpriceを順に足していき、
tax では、total で出た値に税率をかけています。
このコードからわかることは、
- 算出プロパティ呼び出しに（）がいらない（HTML 11行目）
- 算出プロパティででた値にもフィルタをかけられる。（HTML 11行目）
- thisでインスタンス内のデータにアクセスできる。（JS 31行目）
- 算出プロパティに依存している算出プロパティも定義できる。（JS 36行目）
ですね。
thisが指しているのは、Vueインスタンス自身であり、dataや、computedの内容は参照できます。
メソッド（methods）
メソッドはその名の通りです。
おもに、データの変更やHTTPリクエストを送る際に使用するようです。
ということは、ボタンを押したときにmethodsが発火して、HTTP通信が行われるケースが多いのでしょうか。今回は割愛させていだたきます。（よーわからんので）
まとめ
今回は、主要と思われるオプションについて学んでいきました。
今の所、Vue.js感というか、利用するメリットを感じさせられてはいませんが、この後からDOMと連携してメキメキと便利になっていきます。
次回もVue.jsの基本を引き続き学んでいきましょう！
それでは〜〜
コメント