2_Vue.jsの基本機能

■

JQueryよりもVue.jsのほうが保守しやすく、生産性も高い。

• JQueryはDOMがべたべたなので、スケールできない。
• Vueはevent - State - elementの構造で解決した

1. そのUIのもつ状態は何か、JavaSriptでどう表現するか
2. データバインディングによってUIの状態とDOMツリーをどうマッピングするか
3. イベントによってどの状態に変更するか

1. CDNを利用 <--今回はこちら
2. Vue-CLIを利用

■

Vueオブジェクト

グローバル変数のVueは二つの役割がある

1. コンストラクタ
2. 名前空間(モジュール)

コンストラクタは、オブジェクトを生成するための関数です。
new演算子を使います。
これで生成されたオブジェクトをVueインスタンスと呼びます。
このインスタンスをDOMにマウントすることでVue.jsの機能を使います。

var vm = new Vue({
....
})

コンストラクタの引数にオプションオブジェクトを渡せます。
これによってVueインスタンスとUIの挙動が決定します。

• data
• el
• filters
• methods
• computed

■

Vueインスタンスのマウント
マウントとは既存のDOM要素をVueのDOM要素に置き換えること

■

UIのデータ定義(data)

■

テンプレート構文(template)

■

フィルタ(filter)

■

算出プロパティ(computed)

■

ディレクティブ

■

ライフサイクルフック

■

メソッド(methods)