Vue.jsの基本（2）dataプロパティについて

JavaScript

2019.01.21 2018.10.29

Vue.jsの最大の特徴はリアクティブシステムであることです。
そして、もっとも重要なことはデータをリアクティブデータにすることで、あるデータを新たに加えたり、変更したり、削除すると即座にそのデータの表示を変更することができます。
そんなリアクティブなデータとして保存するために用意されたものがdataオプションです。

今回はVueインスタンスで用いるdataプロパティについて説明します。

スポンサーリンク

目次

マウントの復習

マウントの復習

Vueインスタンスを作成したらインスタンス部分とHTML側の指定したDOMが関連した状態になります。
この状態のことをマウントしたと呼びます。（簡単に言うとHTMLの指定要素とJavaScriptでVue.jsの記述を行なった内容をリンクした状態です）

#appをマウントする方法

var app = new Vue({
el:’#app’
})

dataプロパティについて

マウントがうまくいくと次に重要になる事は今度は状態の保存です。
状態の保存はdataプロパティのオブジェクトとして保存します。

Vue.jsのすごいところは、dataプロパティに変更が起こるとVue.jsが検知して再レンダリングが行われる仕組みになっています。そしてこのような仕組みはリアクティブシステムで行われています。
これはちょうどReactでstateを変更する際にsetState()を実行すると再レンダリングする仕組みと似ています。

dataプロパティの記述は次のように行います。

dataプロパティの記述

var app = new Vue({
  el:’#app’
  data:{
    キー:値
  }
})

DOMでdataを読み込むにはマスタッシュでキーを指定します。

{{キー}}

参考例

App.js

var app = new Vue({
  el:'#app',
  data:{
    message:'Hello world!'
  }
})

html側


{{message}}

dataは状態を置くところですから、基本ここで何らかの処理を行うものではありません。

もし、dataプロパティに何らかの処理を加えたい場合はcomputedを使います。
computedは次に解説します。

タイトルとURLをコピーしました