Vueアプリの起動
Vue.jsの勉強メモ。
Vueの起動
(p.37) Vueアプリケーションの作成
アプリケーションの作成をはじめるには、コンストラクタ関数Vueを使ってルートとなるVueインスタンスを作成します。
返り値はルートのインスタンスになっており、変数化しておくことでコンソールからアクセスできますが必須ではありません。
慣例的にappやvm(ViewModelの略)といった変数名が使用されます。
「ルート」という用語が、いまいちピンと来なかったので検索。
Vue インスタンスの作成
全ての Vue アプリケーション は、Vue 関数で新しい Vue インスタンスを作成することによって起動されます。
Vue インスタンスを生成するには、オプションオブジェクトを渡します。
参考までに、全てのオプションの一覧はAPI リファレンスで参照できます。
Vue アプリケーションは、 new Vue で作成されたルート Vue インスタンス(root Vue instance)で構成され、必要に応じてネストされたツリーや再利用可能なコンポーネントで形成されます。
とのこと。
例えば、Todo アプリのコンポーネントツリーは次のようになります。
ルートインスタンス
└─ Todoリスト
├─ Todoアイテム
│ ├─ Todo削除ボタン
│ └─ Todo編集ボタン
└─ Todoリストフッター
├─ Todoクリアボタン
└─ Todoリスト統計
コンポーネントシステム については後ほど詳細を説明します。
今は、全ての Vue コンポーネントは Vue インスタンスで、同じオプションオブジェクトを受け入れる(いくつかのルート特有のオプションを除く)と理解しておけば十分です。
ルートのVueインスタンスの下に、いろいろな部品が所属する階層構造になってました。
「コンポーネント」という用語も出てきましたが、このVueコンポーネントは、本書のp.146でも説明されてました。
(p.146) コンポーネントとは
ウェブサイトやアプリケーションの画面は、ヘッダーやメニューといった機能を持つUI部品が集まって構成されています。
大きなアプリケーションではソースコードが複雑化しやすく、後からメンテナンスをしたいとき、JavaScriptやHTMLの組み合わせを探し出すのは意外と大変です。
Vue.jsの最も強力な機能の1つ「コンポーネント」は、機能を持つUI部品ごとにテンプレートとJavaScriptを1つのセットにして、他のUI部品とは切り離した開発および管理できるようにする仕組みです。
コンポーネント化 → 構成する部品を抜き出す
(p.147) コンポーネントは設計図
コンポーネントとは、UI部品、簡単にいえば機能を持つことのできるHTML要素の設計図です。
外見だけでなく、どんなプロパティを持って、どんなアクションをするかを細かく定義できます。
設計図から作成された実体を「インスタンス」と呼びます。
「Vueコンポーネント」は、再利用可能なUI部品、という定義みたいです。
Vue コンポーネントの例を次に示します:
コンポーネントは名前付きの再利用可能な Vue インスタンスです。
この例の場合、<button-counter>です。
このコンポーネントを new Vue で作成されたルート Vue インスタンス内でカスタム要素として使用することができます。
まとめ
- Vueアプリは、Vueコンストラクタ関数でVueインスタンスを作ると起動する。
- Vueアプリは、コンポーネントツリーという階層構造になっている。
- Vueコンポーネント(UI部品)もすべてVueインスタンスになっている。
- コンポーネントツリーの大元になっているVueインスタンスを、「ルート」(ルートVueインスタンス)と呼ぶ。
とりあえず、今後の説明で出てくる用語の意味が分かればOKでしょうか?