オプションの構成と役割

vue.jsフレームワーク

  1. HOME
  2. オプション構成

オブジェクトの設計図とインスタンス

オブジェクトが持つプロパティやメソッドの振る舞いを定義した設計図のようなものを一つだけ作っておいて、それを複製すれば全く同じオブジェクトを幾つでも作成できるようになる。
この様な考え方をオブジェクト指向と呼び、オブジェクトの設計図となる定義をクラスと呼びます。
クラスを元に生成したオブジェクトをインスタンスでインスタンスを生成することをインスタンス化と呼ぶ。
クラスのインスタンス生成
var obj = new クラス名(引数);

このようにインスタンスを生成する特別な役割を持つ関数をコンストラクタ(構築する人やモノ)と呼ぶ。

ランダムな位置に20個の☆を描画

JavaScriptコード

//「動くモノ」クラスの定義
  var Movable = function(x, y) {
    this.pos = {
      x: x,
      y: y
    };
    this.move = function(x, y) {
      this.pos.x += x;
      this.pos.y += y;
    };
  }

  //ボールオブジェクトを格納する空の配列を用意する
  var ball = [];

  //100個分の繰り返し
  for (var i = 0; i <= 20; i++) {
    //ボールプロジェクトのインスタンス生成
    ball[i] = new Movable(
      Math.floor(Math.random() * window.innerWidth),
      Math.floor(Math.random() * window.innerHeight)
    );
  }

  //ボールをブラウザに描画
  for (var i = 0; i <= 20; i++) {
    document.write('<div class = "ball" style = "top: ' + ball[i].pos.y + 'px; left:' + ball[i].pos.x + 'px;">☆</div>');
  }

CSSコード

.ball {
      position: fixed
    }

vueオプションの構成

Vue.jsでは単体のオブジェクトをコンポーネントと呼び、1つ以上のコンポーネント組み合わせたものがアプリケーションであると考えます。
Vue.jsアプリケーションはnew Vue({...})でコンポーネントを生成することで始まります。Vueはフレームワーク側で定義されているクラスでコンポーネントの中で使うデータやメソッドはあらかじめ引数として渡します。
var obj = new Vue({オブジェクト});

Vueのコンポーネントが持てる主なプロパティ

プロパティ 役割
el コンポーネントのインスタンスをどのHTML要素に結びつけるかを定義する
data コンポーネントが保持するデータを定義する
methods コンポーネントが持つメソッドを定義する
filters コンポーネントが持つフィルターを定義する
computed コンポーネントが持つ算出プロパティを定義する
watch コンポーネントが持つウォッチャを定義する
※注 コンポーネントのライフルハックを定義する
var app = new Vue({プロパティ名: 値, プロパティ名: 値,...});

コンポーネントのライフサイクルハック

ハック名 発生するタイミング
beforeCreate コンポーネントのインスタンスが生成された直後
created コンポーネントのインスタンスが生成され、Vueがコンポーネントのリアクティブデータを監視する準備が終わったとき
beforeMount コンポーネントのインスタンスがDOMと結びつく直前
mounted コンポーネントのインスタンスがDOMと結びついた直後
beforeUpdate コンポーネントの持つリアクティブデータが更新され、DOMに反映される直前
updated コンポーネントの持つリアクティブデータが更新され、DOMに反映された直後
beforeDestroy コンポーネントのインスタンスが破棄される直前
destroyed コンポーネントのインスタンスが破棄された直後
コンポーネントのデータを初期化したいとき、サーバーからデータを読み込むような複雑な処理が必要な場合にcreatedライフサイクルハックに初期化処理を記述する
●ディレクティブ
コンポーネントを結びつけたHTML要素はVueの監視下に置かれ「v-」ではじまる独自 の属性を併用することによって、様々な機能が利用できます｡これらをディレクティブと呼びます

●スコープ
プログラム内で扱うデータには有効範囲があります。たとえば関数の中で宣言した変数は、 関数の外側のプログラムからは参照できません。関数の中でのみ有効なスコープをローカルスコープ、関数の外側のどこからでも参照できるスコープをグローバルスコープと呼びます。