Vue.js の特徴の一つとして、実装箇所的に段階的に導入できる、技術レベル的に段階的に導入できるというものがある。
導入順路memo
CDN から Vue.js を読み込むように
HTML に書く
HTML にターゲットとなる要素(以下 el要素)を設置
HTML body 最後端に Vue オブジェクト生成 js コード(以下 new Vue)を書く
new Vue にel要素をelに設定
new Vue を別ファイル化して
HTML から読み込む DOM 構築完了イベントにフック
new Vue に data を設定
el要素内に Vue のプレースホルダを埋め込んで data とバインディング
el要素内に制御用属性を書き込んでコントロール
適宜 filter, computed, method 等を作りバインディングする。
CDN から Vue.js を読み込むように
HTML に書く