Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part1〜 #Vue.js

※この内容はVue.js入門の〜基礎から実践アプリケーション開発まで〜のP36〜P42を勉強したときの自己流理解メモです。

Vueインスタンスとは〜復習〜

基本は、VueクラスのインスタンスをVueインスタンスというポイント。下記のように表されている。

let Vueインスタンス　= Buttonクラス（ 属性を私が代入するもの ）;

（Vueクラスで定義されたVueコンストラクタによって定義されたもの）

Vue.jsはインスタンスを操作していく。そのため、これからインスタンスを作るための、コンストラクタの書き方を習得していく。

コンストラクタの書き方

コンストラクタの書き方を学ぶ序章として、Vue.jsがどのような処理になっているのかを確認する。

【 Vueの処理の順序を確認】
0. コンストラクタ書く
1. Vueインスタンス生成
2. HTML部分にVueインスタンスくを適用（DOMにマウントするという）

という手順のようだ。

これより、プロパティを確認していく。
el プロパティは、Vueインスタンスで置き換えたいDOMを指定して、Vue.jsで生成されたDOMで置き換える。

Vueインスタンスを生成するために、Vueクラスを使っていくが、私たち（Vue.jsを使って開発をする開発者）がVueクラスを定義することはまずない（ライブラリを書いていくというのであればその機会はあるかもしれないけど）。私たちは、Vueクラスにすでに定義されているオプションに対して値を代入していくだけ。もうひとつ忘れてはいけないルールがある。それは、インスタンスを生成する際の、コンストラクタの引数は辞書型ではないといけないということ。

この2点の基本を頭にいれたところで、さっそくVueで生成したDOMをDOM要素にマウントしていくとはどういうことかを実践しながら勉強していく。

導入の基本　

Vue.jsは導入コスト、学習コストが低いというのがポイントだった。以下のscriptを記述するだけでスタートできる。
<script src="https://unpkg.com/vue@2.5.17"></script> を

タグに書く。
そして私たちは、Vueクラス内のオプションにデータを代入してインスタンス（オブジェクト）を生成していくので以下を用意する。

<script>
var app = new Vue({
})
</script>

DOM要素とまとめると、スタートは以下のようになる。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue@2.5.17"></script>
    <title>初めてのVueJs</title>
</head>

<script>
var app = new Vue({
    // オプションにデータを代入していく
})
</script>

以下、el、mount、dataまでどどどっといくぞー！

DOM要素にマウントする手法がel。
そして$mountは、elオプションを受け取らない場合、マウントしない形で（DOM要素と関連付けすることなく）Vue インスタンスのマウンティングを手動で開始するために使用する。
dataプロパティは、マウントして表示するためのプロパティ。

ここで、プロパティってなに?って感じなので、windowプロパティを例に考えてみる。

windowプロパティ

window.vm = vm

widowというプロパティとは、ブラウザにすでにあるグローバルオブジェクトである。
新しいwindowに紐づいた、グローバル変数に対して、vmを代入することでグローバルオブジェクトに登録したということになる。

ちなみに、JSは、参照渡し。以下考えかた参照。

b = 5
a = b
a = 10

この時bは
値渡し : b = 5
参照渡し : b = 10（abをaに代入する時に、aとbが紐づいてしまう）

つまり、window.vmを変更すると、vmも変更される。
同じ変数を使ってしまうと、参照渡しだと上書きされてしまうから気をつけないといけない。が、そうならないように回避する方法があるらしい。（詳細はdataは関数で渡すの学習の時に）

console.log(vm)

デベロッパーツールでConsoleを表示し、上記を入力すると以下の情報が見えた。$がついているもの、いないものがある。

例えば、

console.log(vm.$〜〜)

と入力すると、アクセスすることができる。
ためしに、console.log(vm.$el)と入力してみると、

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

のように、consoleに表示されるのが確認できる。
$ではじまるプロパティやメソッドはVue.jsが提供しているもので、自分が必要な情報を取得することができる。値の変更を監視することもできて、デバックにも利用できる。また、_ （アンダースコア）から始まるものは基本的に触らない。

データの変更を監視してViewの再描画やDOM要素の更新をする

例えば、デベロッパーツールのConsoleで

vm.items[0].name = 'hogehoge'

と入力してEnterを押すと、Viewに表示されていた'hoge'が'hogehoge'に変更されたのが確認できる。

$watch メソッドで監視

$watch(
    第一引数には監視対象値を返す関数 function(){}の形,
    第二引数には値が変わった場合に呼ばれるコールバック関数function(){}の形
    )

↓実際のコード

vm.$watch(function() {
    // hogeの量
    return this.items[0].quantity
  }, function(quantity) {
      // hogeの値が更新されたらConsoleで量を表示
      console.log(quantity)
  })

おわりに

今回に記事では、elオプション、dataプロパティ、mountメソッド、watchメソッドを学んだ。
次は、P43〜の内容テンプレート構文から勉強していく。

次の記事（予定）
Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part2〜
・データバインディング
・データバインディングテキスト展開
・ディレクティブ