今回は Vue のプロパティを使ってメモの入力＆閲覧ページを作っていきます。

この記事で分かること
・Vue のプロパティ

Vue のプロパティ

Vue.js には、ページやコンポーネントで扱う値や処理ロジックを記述するための便利なプロパティが予め用意されています。

data – データを定義する
computed – 算出プロパティ。基本的にはdataプロパティのゲッターとして使うが、セッターも定義できる
methods – メソッドを定義する
watch – ウォッチャ。dataプロパティの変更を監視する

computed は基本的にゲッターとして使いますが、セッターとして定義することもできます。このほかにも、Vue インスタンスの生成時にのみ呼ばれる created など、ライフサイクルフックに関するプロパティなどが用意されています。

……前置きが長くなりましたが、今回はとりあえず、data と methods を使ってみます。

memo.vue に入力フォームとボタン、閲覧部分を作成します。

// memo.vue
<template>
  <div>
    <section>
      <div id="input-wrapper">
        <textarea
          cols="40" rows="5"
          placeholder="メモをとる"
          v-model="input"
        ></textarea>
      </div>
      <button type="button" v-on:click="add">記録する</button>
    </section>
    <section>
      <h5 id="list-title">メモ一覧</h5>
      <p class="item-wrapper">
        {{ items }}
      </p>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      items: ''
    }
  },
  methods: {
    add() {
      if (!this.input) return
      this.items = this.input
      this.input = ''  // 入力フォームの値をクリア
    }
  }
}
</script>

<style scoped>
/* 省略 */
</style>

html タグに、いくつか新しいプロパティや構文を記述しています。

・v-model – data と html の双方向のデータバインド。互いの変更を反映する
・v-on – イベントハンドラ
・{{ }} – マスタッシュ構文。各プロパティや式を書くことができる

処理の流れは次のとおりです。

textarea に入力があると、値が input に代入される
↓
button がクリックされると、add() メソッドが呼ばれ、処理を実行する
↓
item-wrapper の p タグに入力内容が表示される

データの変更が即座に反映されています！（つづく）