その2HTMLJavaScriptVue.jsこんばんは、フリューのジョンです。最近Vue.jsを理解しようとVue.jsのソースコードリーディングをしています。前回はVue.jsのかんたんな使い方とjQueryとの比較、などをお話しました。今回はVue.jsの基本の話、elプロパティ、dataプロパティ、methodsプロパティの話をします。Vue.jsのバージョンは2.3.0です。Elementである必要があります。Elementを与える必要はあまり無いと思われます。コンパイル対象のルート要素に対して設定します。コンパイルとは、データのバインディング設定などを行うフェーズです。Vue.jsではルート要素以下の要素を網羅してHTMLを再構築しています。100">{{n}}</li></ul></section></body></html>dataプロパティdataプロパティはObject型、または、Object型を返すFunction型である必要があります。後で説明するコンポーネントを使う場合、dataプロパティはFunction型でなければいけないので、常にFunction型を返すようにしておくほうが妥当だと思われます。dataプロパティの値にはインスタンスからアクセスすることができます。HTML側からは直接アクセスすることが可能です。Vue.jsはこのObject型に記述されたプロパティの変更を感知することができます。感知することで画面側の再描画が走ります。'aaa'}}</span></section></body></html>このようにdataプロパティが返すObject型をいじると、再描画されているのがわかります。これは、Vue.jsがプロパティにsetterとgetterをつけており、その中で変更を検知しているためです。配列の場合は少し勝手が違います。配列の中身をいじっても更新はされません。id="vue"><!--ほげに変わらない--><p>{{messages[0]}}</p><p>{{messages[1]}}</p><p>{{messages[2]}}</p></section></body></html>もしこのような場合があれば次のように置き換えます。‘ほげ’)(https://jp.vuejs.org/v2/guide/list.html#注意事項)methodsプロパティmethodsプロパティはプロパティがFunction型のObject型である必要があります。methodsの各関数のthisはインスタンスがバインドされていますので、アロー関数を使わないようにしたほうが良いと思われます。これらの関数にはdataプロパティと同じようにアクセスすることができます。id="vue"><p>{{test()}}</p></section></body></html>また、結果を返す関数も記述ができ、内部で使用しているプロパティが変更されると再描画されます。この書き方は推奨されていません。全てのmethodsが自分が参照していないプロパティが変更されても、実行をしてしまうためです。id="vue"><p>{{test01()}}</p><p>{{test02()}}</p></section></body></html>この問題を解消したい場合はcomputedプロパティを使いましょう。computedプロパティは後々お話します。まとめVue.jsの基本のプロパティの紹介とその使い方をご紹介しました。次回は、HTML側について詳しく紹介したいと思います。ありがとうございました。