vue.jsのdata()メソッドの使いかた

データを保持（保存）しておき他から引っ張ってデータを使う

JavaScriptだと

const foo = bar

のようにデータを保持できる。

vueでは

data () メソッド内でオブジェクトを定義して、returnすることでデータの保持をして、vueのcomponentで必要なときにデータを引っ張ってきて使うことができる。

※componentは実際の表示をになう部品、テンプレートの役割をするファイルを入れておくフォルダのこと。

<script>
export default {
　data() {
　　return {
　　　name: 'hoge'
　　}
　}
}
</script>

上記のdata()で定義したname: hoge を使うには、templateタグ内の任意のHTMLのところで

{{ name }}としたらhoge が表示されるようになっている。

例）

<template>

<div>{{ name }}</div>

</template>

→html出力結果

<div>hoge</div>

data () メソッドにオブジェクト形式のデータも保持できる

例）

export default {
　data() {
　　return {
　　　message: {
　　　　text: 'こんにちは',
　　　　user: {
　　　　　　name: 'のあ'
　　　　}
　　　}
　　}
　}
}

使い方

textの値を表示させたいときは、{{ message.text }} 

nameの値を表示させたいときは、{{ message.user.name }}

のようにdata()に保持した値にアクセスし表示させることができる。

画像のソースなどをdata() で定義して使いたいときは、

 HTML側でディレクティブのv-bindを使ってdata()で定義した値を読み込む。

例）

data() {
　return {
　　message: {
　　　text: '今日も良い天気ですね',
　　　user: {
　　　img: 'https://example.com/user_images/hoge.jpg',
             name: 'のあ'
　　　}
　　}
　}
}

→HTMLタグ内で画像を表示

<template>

<div>

<img v-bind:src="message.user.img">

</div>

</template>