JavaScript勉強会

JavaScriptの学習日記

Vueアプリの起動

Vue.jsの勉強メモ。

 

jsstudy.hatenablog.com

 

Vueの起動

(p.37) Vueアプリケーションの作成

アプリケーションの作成をはじめるには、コンストラクタ関数Vueを使ってルートとなるVueインスタンスを作成します。

var app = new Vue({
  // オプション
})

返り値はルートのインスタンスになっており、変数化しておくことでコンソールからアクセスできますが必須ではありません。

慣例的にappやvm(ViewModelの略)といった変数名が使用されます。

 

ルート」という用語が、いまいちピンと来なかったので検索。

 

jp.vuejs.org

 

Vue インスタンスの作成

全ての Vue アプリケーション は、Vue 関数で新しい Vue インスタンスを作成することによって起動されます。

var vm = new 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部品、という定義みたいです。

 

jp.vuejs.org

 

Vue コンポーネントの例を次に示します:

// button-counter と呼ばれる新しいコンポーネントを定義します
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

コンポーネント名前付きの再利用可能な Vue インスタンスです。

この例の場合、<button-counter>です。

このコンポーネントを new Vue で作成されたルート Vue インスタンス内でカスタム要素として使用することができます。

 

まとめ

 

とりあえず、今後の説明で出てくる用語の意味が分かればOKでしょうか?

 

 

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js