【学習記録②】Vueインスタンスについて

9543 ワード
Vue.js 学習記録 JavaScript JavaScript テキストリンク

はじめに

Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。

Vueインスタンスの生成

Vueインスタンスを生成する場合は以下のようにnew Vueとし、elプロパティにVueテンプレートのどの部分へ適用するVueインスタンスなのかを、セレクタを指定することで示します。

index.html
<div id="app">
  <p>{{ message }}</p>
</div>
index.js
new Vue({
  el: "#app", // <--上記htmlファイル内のid要素appの部分に適用する
  data: {
    message: 'こんにちは'
  }
})

また、el要素を使わずに$mountメソッドを利用する方法もあります。

index.js
new Vue({
  data: {
    message: 'こんにちは'
  }
}).$mount('#app')

リアクティブ

Vue.jsではインスタンスの生成時にdataプロパティに記載したオブジェクトのキーにgetter/setterを登録します。
これにより、変更された値を追跡することが可能になります。

index.html
<div id="app">
  <p>{{ message }}</p>
  <p>{{ message2 }}</p>
</div>
index.js
let v = new Vue({
  el: '#app',
  data: {
    message: 'こんにちは'
  }
})

v.message = 'こんにちは1'
v.message2 = 'こんにちは2'

上記ではdataプロパティに記載していないmessage2も出力されているが...

以下のようにボタンを追加して変更をしてみるとmessage2は変わりません。（変更の追跡ができていない）

index.html
<div id="app">
  <p>{{ message }}</p>
  <p>{{ message2 }}</p>
  <button v-on:click="message2 = 'こんにちはボタン'">ボタン</button>
</div>

※dataプロパティに登録しているmessageはもちろん変更されます。

index.html
<div id="app">
  <p>{{ message }}</p>
  <p>{{ message2 }}</p>
  <button v-on:click="message = 'こんにちはボタン'">ボタン</button>
</div>

templateプロパティとrender関数

上記まではhtmlファイルにテンプレート構文を書いていましたが、こちらはVueインスタンスの方に書くこともできます。
その場合はtemplateプロパティ、もしくはrender関数を用います。

templateプロパティを用いる場合

index.html
<div id="app"></div>
index.js
new Vue({
  el: '#app',
  data: {
    message: 'こんにちは'
  },
  template: '<p>{{ message }}</p>'
})

下記のように出力されていることが分かります。

render関数を用いる場合

render関数を用いる場合は上記のtemplateプロパティで記述したhtmlファイルはそのままに、jsファイルが以下のように書き換わります。出力結果は上記同様です。

index.js
new Vue({
  el: '#app',
  data: {
    message: 'こんにちは'
  },
  render: function(h){
    return h('p', this.message);
  }
})

また、これらはDOMをそのまま返却しているのではなく、仮想DOMと呼ばれるものを返却しています。
https://v3.ja.vuejs.org/guide/render-function.html#%E4%BB%AE%E6%83%B3-dom-%E3%83%84%E3%83%AA%E3%83%BC