クラスとインスタンス
Vueの基本はクラスとインスタンス。Pythonのプログラムでもやったように、まずはVueクラスをインスタンス化する。
new Vue ({
}); // ; を忘れないオプション
インスタンスを作って設定していくのがオプション。
elオプションはDOMツリーの頂点となるルート要素（単語の意味はまだよく分かっていない）。指定したIDやClassにプログラムを適用させる。
new Vue ({
el: "#app1", // これはelオプション
data : { // これはdataオプション
message1: "Hello! Vue!" , // プロパティ：値の形式
list: [1,2,3] // 最後のプロパティの末尾はカンマ不要
}
}):
new Vue ({
// 複数インスタンスを作っても大丈夫
});HTML側への展開
最も基本となるのは、ムスタッシュな利用。参照したいプロパティの値を出力することができる。
<div id="app1">
{{ message1 }} <br>
{{ list[0] }}
</div>Javascriptの式を使うこともできる。
See the Pen use js in HTML by git-cat-meow (@git-cat-meow) on CodePen.
.get~はjsのもの。dataプロパティで設定した現在時刻dateから年月日を取得している。getMonth()メソッドは月からマイナス1した値が返ってくるので、取得後に+1して値を元に戻す。
.toLocaleString()もjsのメソッドで、数値にカンマを設定して出力する。こちらもdateプロパティのpriceに対して適用させている。
ただだんだん見にくくなってくるので、Vueの機能を使ってもっと分かりやすく表現できる（らしい）。
メソッドオプションを使ったアプローチ
methodsオプションを使って、関数を連続して記述することができる。js側に処理を集約することで、HTML側をシンプルに記述することができる。
See the Pen Untitled by git-cat-meow (@git-cat-meow) on CodePen.
computedオプションを使ったアプローチ
computedオプションを使うと、戻り値のある関数を連続記述することができる。こちらもHTMLの見通しが良くなる。
See the Pen computed option by git-cat-meow (@git-cat-meow) on CodePen.
thisがよく分からない。これは別途調べる。
filtersを使ったアプローチ
また同様にFiltersオプションを使用しても同様の結果が得られる。
See the Pen Filters by git-cat-meow (@git-cat-meow) on CodePen.
どのデータを呼び出しているのかがHTML側から把握しやすい。
3つのアプローチの違い
大きな違いはキャッシュするかしないか。フィルターオプションは共通化したい処理で使用すると分かりやすくて良い（らしい）。
とりあえずはmethodかcomputedの2択で考える。キャッシュがポイントになるので、使用するシチュエーションで選ぶ。
