Vue クラスに関してまとめ

このように各パラメータをキーとしたオブジェクトを渡して生成する

new Vue({
    template: '<div>{{ hoge }}</div>',
    data: { hoge: 'ほげ'}
});

Vue オブジェクトがコントロールしたいモノを HTML の文字列として記述する。 その中では Vue 独自の記法を使ってある程度動的な挙動を組み込める

{ template: '<div>{{ hoge }}</div>' }

書き方の詳細は Vue.js/テンプレート 参照

template に対してバインディングするオブジェクトを指定する。 ここで指定したキーを使って template 内の値とバインディングする

{
    data: {
        hoge: "ほげ",
        piyo: "ぴよ"
    }
}

現状の静的な HTML に対して、その要素を Vueオブジェクトのコントロール下におくという指定。CSS のセレクタ形式で指定する

{ el: '#hoge' }

この場合なら

<div id="hoge"></div>

この要素のをコントロールするということになる。 この指定は画面上で要素が1個と特定できるモノを指定する。 なので Vue オブジェクトの管理対象は jQuery のような要素の集合体にはならない。

この静的な既存の HTML 自体が Vue.js のテンプレートに従って記述されていた場合、それが解釈されてあらためてレンダリングされる。

<div id="hoge">{{ unko }}</div>

template が指定されていた場合、その位置に対して指定された template によって構築された DOM で置換する。 対象の内部に埋め込まれるのでなく、対象と完全にすり替わる

props や data に定義したキーを監視して、変化があった場合に動作するという設定。

watch: {
    hoge: function(){
        // 何か処理
    }
}

監視したい data と同名のキーに対して処理をしたい関数を定義する。

ライフサイクルと同名キーで関数を登録することでそのタイミングで処理を実行することができる

詳細はここ参照 Vue.js/Vueクラス/ライフサイクル

メソッドはコンストラクタの設定値をタイミングをコントロールして設定したい場合に用いられる。

機能としてはコンストラクタの el と同じである。 引数に入れ替え対象の既存DOMを指定するセレクタを取る。

メソッドになっているということは任意のタイミングで Vue オブジェクトを DOM に滑り込ませられるということである。

vm.$mount("#app");

バインディングされている対象のデータの変化をトリガーにして実行したい動きを登録するメソッド

このように登録する。

vm.$watch(function(){
    return this.hoge;
},
function(v){
    console.log(v);
});

第一引数にデータの中の対象を return する関数を取り、第二引数に変化した場合にどうするかの関数を渡す。 この変化した場合の関数には変化後の値が渡されるのでそれを内部で使うことができる。

この例で注意する点は、関数中の this は通常その関数がどのオブジェクトのプロパティとして実行されたかによって変化するという点。 つまり、この第一引数の関数は内部で Vueオブジェクトのプロパティに登録されるということである。

ということは、↓このように書くと動作しない

vm.$watch(() => {
    return this.hoge;
},
function(v){
    console.log(v);
});

関数のアロー表記は単なる function のショートカットではない。this が作成時のコンテキストで固定されるという特徴があり、実行場所によって this が変化しない。なのでアロー関数中で書く this は Vue オブジェクトを指さない。

参考: JavaScript / Basic / 関数 / アロー関数

template を元に生成されて画面に貼り付けられた Vueオブジェクトが管理している DOM そのもの。

beforeMount のライフサイクルタイミングではこの中には template で生成された DOM に入れ替わる前の画面上にくっついている DOM が入っているのでこのタイミングで控えておくと後にそれを利用してアクセスできる。元のDOM、元のHTML が欲しい場合はこうしておけばよい。

var vm = new Vue({
    el: '#app',
    template: '<div>unko</div>',
    beforeMount: function(){
        this.originalDom = this.$el;
    }
});
console.log(vm.originalDom.id);

もう this で呼び出せるので、methods に組み込めばテンプレート内でも使えるしなんでもOKになる。

Vue だけで全部完結しようなんて思ってるなら不要な知識だが、既存のサーバサイド側のテンプレートエンジンに Vue の記述を混ぜずに最終的に描画された HTML 経由で連携しようという現実的な浅い離陸をしようとする場合はこれをやりたくなると思われる

$el でも対象を参照できるのだが入り組んだモノからそれをやるのは面倒なので、予め決めてある要素を名前指定で引き出すことができる。それが $refs 。これで参照できるモノというのはその Vueオブジェクトである。

つまりコンポーネントとテンプレートの記述の組み合わせで JS での明示的な操作無しに作られた Vueオブジェクトに対して Vueオブジェクト的操作をしたい場合に用いられる。

このようなテンプレートがある。

<div>
    <div ref="hogehoge">aaa</div>
    <div ref="piyopiyo">bbb</div>
</div>

あらかじめ ref 属性で印がつけてある。

これが描画された後だとこのように対象を取得できる

console.log(this.$refs.piyopiyo.$el.innerHTML);  // => bbb

piyopiyo は Vueオブジェクトなので $el のようなプロパティがつかえる。