データ(UIの状態)
イベントリスナー
テンプレート記法(状態とDOMのマッピングの定義)
フィルタ
算出プロパティ
ディレクティブ
メソッド
ライフサイクルハック
イベントハンドリング
jQueryでのUI実装はイベントや要素が増えると複雑になりがち
Vue.jsはイベントと要素の間にUIの状態(state)が挟まる
jQueryのコーディングスタイル
・DOMツリー中心
・イベントによってDOMツリーをどのように変更するかを考える
Vue.jsのコーディングスタイル
・UIの状態を担うJavaScriptのオブジェクトを中心に捉える
・「そのUIの持つ状態は何か、JavaScriptのオブジェクトとしてどう表現できるか」
・「データバインディングによってUIの状態とDOMツリーをどうマッピングするか」
・「イベントによってどの状態に変更するか」
という3つの視点を切り替えながら、UIの構築を進めていくのがVue.jsのコーディングスタイル
マウント
既存のDOM要素をVue.jshが生成するDOM要素を置き換えること