コンポーネントのオプションの一つであるdataについて詳しくみていきます。
定義方法を確認後、実際にボタンを押すとカウントアップするプログラムを書いていきます。
コンポーネントにおけるデータとは
コンポーネント内でデータや状態を保持したい場合に使用します。
また、コンポーネントはインスタンスごとにそれぞれでデータを保持します。
データの使用方法
dataはスクリプトタグ内で定義します。
使用方法はJavaScriptとTypeScriptで異なるので注意が必要です。
JavaScript
export defaultの括弧内のdata関数でデータ名と初期値のペアの連想配列をreturnします。
<script>
export default {
data() {
return {
<データ名>: <初期値>,
<データ名>: <初期値>,
・
・
・
}
},
}
</script>
TypeScript
クラスのプロパティがコンポーネント内で使用できるdataになります。
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class Button extends Vue {
private <データ名>: <データ型> = <初期値>;
}
</script>
dataを使用してみる
早速使用してみます。
使用例ではTypeScriptを使用していきます。
ButtonData.vueをcomponentsフォルダ内に作成します。
作成したButtonData.vueの中身を以下のようにします。
<template>
<button
@click="counter++"
>
カウンター{{counter}}
</button>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class ButtonData extends Vue {
private counter: number = 0;
}
</script>
コード内容を確認します。
dataとして「counter」を準備(14行目)。
そのdataを3行目でクリックされるたびにカウントアップ。
その結果を5行目で表示。
Vue.jsでは、テンプレートタグ内では定義したdataやmethodsなどの名前を書くことでそのプロパティにアクセスすることができます。
また、「{{プロパティ}}」と記述するとその結果を表示することができます。
作成したButtonData.vueをHome.vueで使用します。
<template>
<div class="home">
<ButtonData />
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ButtonData from '@/components/ButtonData.vue';
@Component({
components: {
ButtonData,
},
})
export default class Home extends Vue {}
</script>
実際に動かしてみるとボタンをクリックするたびにカウントが増えていくのが確認できます。
まとめ
今回はdataを使用してコンポーネントの状態を保持しました。
とても多く使用するので書き方などは暗記しましょう。
Vue APIまとめ
その他のVue(Nuxt)の記事は以下のページにまとめています。
【Vue.js】API一覧