Furyu
[フリュー公式]

Tech Blog

フリュー株式会社の技術ブログです

2017年06月7日

Vue.jsを使ってみよう その3

こんばんは、フリューのジョンです。Vue.jsを社内に広める活動を頑張ってます。

前回はVue.jsの基本の話、elプロパティ、dataプロパティ、methodsプロパティの話をしました。
今回はVue.jsのHTML側(v-bind、v-model、v-on)の話をしていきたいと思います。

今回もVue.jsはバージョン2.3.0を使用します。

v-bindやv-onなどの属性を、Vue.jsでは、それぞれを「ディレクティブ」と呼んでいます。

v-bindディレクティブ

タグ要素のattributeにdataプロパティやmethodsプロパティの結果を当てはめる(バインドする)事ができます。

classやstyleの属性については、少し特殊な書き方で値をバインドすることができます。

v-modelディレクティブ

v-bindでは属性値に値を入れることができましたが、v-bindでは入れるだけではなく、監視して更新することができます。
更新が走る属性値、つまり、inputやtextareaタグのvalue属性につけることでその値を監視することができます。

selectに対しても記述することができます。この際、初期値のvalueがselectedになることを覚えておきましょう。

v-onディレクティブ

属性に、eventに対する振る舞いを指定することができます

記述した関数に引数を渡すことも可能です。

click以外にもkeyupなども使うことができます。ただし、v-modelとの競合に気をつけてください。

補足

ここまでのディレクティブを使用することで、画像を一定時間ごとに切り替えるスライドショーを作ることができます。
また、v-modelとv-onを使い、画像を動的に追加するなどと行った処理を追加するなどができます。

まとめ

v-bind、v-on、v-modelで、データバインディングについて、大まかな説明が終わりました。

これにより、簡単なアプリケーションは作れるようになりました。

次回は、より複雑なアプリケーションを作成するためにv-ifなどのディレクティブについてお話したいと思います。

ありがとうございました。


2017年05月11日

Vue.jsを使ってみよう その2

こんばんは、フリューのジョンです。最近Vue.jsを理解しようとVue.jsのソースコードリーディングをしています。

前回はVue.jsのかんたんな使い方とjQueryとの比較、などをお話しました。
今回はVue.jsの基本の話、elプロパティ、dataプロパティ、methodsプロパティの話をします。

Vue.jsのバージョンは2.3.0です。

elプロパティ

elプロパティはString型、または、HTML Elementである必要があります。
String型で与えた場合、document.querySelectorで存在した要素を使いますので、HTML Elementを与える必要はあまり無いと思われます。

コンパイル対象のルート要素に対して設定します。
コンパイルとは、データのバインディング設定などを行うフェーズです。
Vue.jsではルート要素以下の要素を網羅してHTMLを再構築しています。

dataプロパティ

dataプロパティはObject型、または、Object型を返すFunction型である必要があります。
後で説明するコンポーネントを使う場合、dataプロパティはFunction型でなければいけないので、常にFunction型を返すようにしておくほうが妥当だと思われます。

dataプロパティの値にはインスタンスからアクセスすることができます。また、HTML側からは直接アクセスすることが可能です。
さらに、Vue.jsはこのObject型に記述されたプロパティの変更を感知することができます。感知することで画面側の再描画が走ります。

このようにdataプロパティが返すObject型をいじると、再描画されているのがわかります。これは、Vue.jsがプロパティにsetterとgetterをつけており、その中で変更を検知しているためです。
しかし、配列の場合は少し勝手が違います。配列の中身をいじっても更新はされません。

もしこのような場合があれば次のように置き換えます。

vm.messages[0] = ‘ほげ’ → Vue.set(vm.messages, 0, ‘ほげ’)

またはspliceメソッドを用いてやります(spliceメソッドは再描画の検知ができます)

vm.messages[0] = ‘ほげ’ → vm.messages.splice(0, 1, ‘ほげ’)

(https://jp.vuejs.org/v2/guide/list.html#注意事項)

methodsプロパティ

methodsプロパティはプロパティがFunction型のObject型である必要があります。
methodsの各関数のthisはインスタンスがバインドされていますので、アロー関数を使わないようにしたほうが良いと思われます。

これらの関数にはdataプロパティと同じようにアクセスすることができます。

また、結果を返す関数も記述ができ、内部で使用しているプロパティが変更されると再描画されます。
しかし、この書き方は推奨されていません。全てのmethodsが自分が参照していないプロパティが変更されても、実行をしてしまうためです。

この問題を解消したい場合はcomputedプロパティを使いましょう。computedプロパティは後々お話します。

まとめ

Vue.jsの基本のプロパティの紹介とその使い方をご紹介しました。

次回は、HTML側について詳しく紹介したいと思います。

ありがとうございました。