npm/vueの学習02

Mustache構文…マスタッシュ構文と読む。{{…}}という中括弧2つで囲う形式を持つ。テンプレートに文字列を埋め込むときなどに使用する。マスタッシュとは…英語で「口ひげ」という意味{を横にすると口髭に似ていることからつけられた。。
式と文…Mustache構文で使用できるのは式のみ。代入や条件分岐などの文は使用不可。（課題：式と文の違いがいまいちよくわからない…。）
ディレクティブ…v-textやv-preなどのこと。属性,スタイル操作,条件分岐,繰り返しなど。データバインディングの仕組みのことでvueを理解するにあたって非常に重要なもの。
v-textディレクティブ…Mustache構文{{…}}の代わりにテキストを反映する仕組み。
v-preディレクティブ…{{…}}として記述した文字を無効化する（どういうシーンで使いたいのか謎）
v-bindディレクティブ…属性値の変更をするためのディレクティブ。「v-bind:属性値=”xxx”」というようにタグ内に記述する。
→なお、:（コロン）の後ろはそのディレクティブの引数として扱われる。
→「:href=”url”」というようにv-bindは省略して表記することも可能である。
ブール属性…（vueの仕様ではなくてhtmlの仕様であるが）
checked,selected,disabled…multipleなどはブール属性でtrue/falseのいずれかで表現できるがこの値はtrueまたはfalse値を使用することになる。
算出プロパティ…computed:のこと。既存プロパティの算出結果を出力するのに便利な仕組み…{{…}}の内部で計算したり別関数を作るのではなくcomputed:内で演算した結果をテンプレートに出力することができる。テンプレートのgetterと捉えることもできる(テンプレート内に算出プロパティ内の特定のプロパティを呼び出すことができる)（定義はメソッドだが参照側はプロパティとして呼び出せる）※ただし常に評価されない性質を持ちメソッドと異なる事を留意すべき（ここは後で深堀り）。
ライフサイクルフック…データの変化に応じて表示が更新される仕組みのことでVueを理解するためにはここをしっかり理解すること。beforeCreate,created,beforeMount→mounted→beforeDestroy→destroyed。必要に応じて意識する必要あり。
リアクティブデータ…dataオプションに登録されたデータのこと。この値の変化を画面に即描画することができる。逆を言えばdataになければその値変化をリアクティブに画面描画することはできません。ただし、vue.setメソッドを使うことで後からリアクティブデータに追加することができる（ただし入れ子状のオブジェクト配下のプロパティに限る）。なお複数のプロパティをリアクティブデータにしたい時はObject.assign()メソッドを使うと一括で登録することが可能である。
　→dataにリアクティブにしたい値は初期値として残しておくのがいい。
　→createdメソッド…vue起動時に動くmethodのこと(ライフサイクルを参照)。
$nextTickメソッド…Vueのリアクティブシステムは非同期でいつviewに描画するかは分からない。瞬間的に反映されたように見えるが…コードで描く時はビューに反映されたことを待ってコーディングしないといけないシーン（画面描画に合わせたなんらかの処理）があるが、その時に用いるのが$nextTickメソッド。
watch(ウォッチャー)…入力のたびにリアクティブに変化させているのは処理の無駄なので…入力が完了した時点で描画する仕組みを提供する。Lodashというライブラリのdebounceメソッドなどを利用すると入力値の遅延実行が楽に実装可。
→入れ子になったプロパティを監視する際…keyの値をクオートで囲うこと（例）「’author.name’」
→動作オプションの定義…入れ子状のオブジェクト監視はdeepプロパティで設定。起動時に実行するかどうかはimmediateプロパティで設定できる。
　→$watchメソッドの利用の他、createメソッドにdebounceを定義することも可能。unwatch()で解除可能。
識別子の記述について…JavaScriptではクラスはPascalケース、変数やメソッドはキャメルケースで記述するのが通例。