Vue.jsのオプション構成 学習メモ

Vue.jsでは、単体のオブジェクトをコンポーネントと呼ぶ。1つ以上のコンポーネントを組み合わせたものをアプリケーションと考える。

var app = new Vue ({ オブジェクト )};

Vue.jsアプリケーションは、new Vue({・・・})でコンポーネントを作成することで始まる。
Vueはフレームワーク側で定義されているクラスで、コンポーネントの中で使うデータやメソッドはあらかじめ引数として渡す。
この場合、引数は単純な数値や文字列では扱いきれない為、役割に応じた名前を持つプロパティとして、オブジェクト表記を使う。
そのため、Vueクラスは、new Vue(x,y,・・・)ではなくnew Vue({・・・})のようにコンストラクタの引数にオブジェクトを受け取る。

ただし、どんなオブジェクトでも渡せるわけではなく、あらかじめ定められている、決まった名前のプロパティを持っている必要がある。

Vueのコンポーネントが持つことが可能な主なプロパティ

プロパティ名	役割
el	コンポーネントのインスタンスをどのHTML要素に結びつけるかを定義する
data	コンポーネントが保持するデータを定義する
methods	コンポーネントが持つメソッドを定義する
filters	コンポーネントが持つフィルターを定義する
computed	コンポーネントが持つ算出プロパティを定義する
watch	コンポーネントが持つウォッチャを定義する

Vueのオプション構成

var app = new Vue ({
  el: '#app',
  data: {
    // コンポーネントが保持するデータをここに定義する
  },
  methods: {
    // コンポーネントが持つメソッドをここに定義する
  },
  filters: {
    // コンポーネントが持つフィルターをここに定義する
  },
  computed: {
    // コンポーネントが持つ算出プロパティをここに定義する
  },
  watch: {
    // コンポーネントが持つウォッチャをここに定義する
  }
)};

www.shuwasystem.co.jp 学習教材
Vue.jsのツボとコツがゼッタイにわかる本
発行日　2019年 3月28日 第1版第1刷
著者　　中田　享
発行所　株式会社　秀和システム