EeBlog(テクニカルブログ)

新人プログラマーのアプリ開発 第6回 Vueによるレンダリング

今回は Vue.js によるレンダリングで、もう少しアプリっぽい画面にしていきます。

この記事で分かること
・Vue devtools の導入
・Vue によるレンダリング

Vue devtools の導入

前回の記事で、Vue.js のプロパティを使ってみましたが、その際に定義した data プロパティなどをブラウザ上から確認するツールがあります。

Vue.js devtools　Chromeウェブストア


これをChromeに追加すると、ブラウザの開発者ツールからプロパティを確認できるようになります。


今回は使っていませんが、ここからストアの状態なども参照できます。

Vue によるレンダリング

それでは前回の続きですが、前回のものには問題があります。
それはメモが1つ分しか記録できないことです。複数記録できるように、data プロパティの items を配列に変更し、template 内を、配列要素をレンダリングする v-for を使った形にします。

// memo.vue
<template>
  <div>
    <section>
      <div class="input-wrapper">
        <textarea
          cols="40" rows="5"
          placeholder="メモをとる"
          v-model="input"
        ></textarea>
      </div>
      <button type="button" v-on:click="add">記録する</button>
    </section>
    <section>
      <h5 class="list-title">メモ一覧</h5>
      <p
        class="list-item-wrapper"
        v-for="(item, i) in items"
        v-bind:key="i"
      >
        <span class="list-index">{{ i + 1 }}</span>
        {{ item }}
      </p>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      items: []
    }
  },
  methods: {
    add() {
      if (!this.input) return
      this.items.push(this.input)
      this.input = ''
    }
  }
}
</script>

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


配列内の要素だけを取り出す場合は、v-for=”item in items” で大丈夫ですが、インデックスも同時に扱うために、v-for=”(item, i) in items” としています。クラスはスタイルを適用するために付けています（前回までの画面が何となくさみしかったので、色を付けました！）


また、v-if/v-else を使うと条件に応じたレンダリングができます。
これを使って、メモがある場合はメモの内容を表示し、メモがない場合はメッセージを表示するようにします。

// memo.vue
<template>
  ... ...
      <button type="button" @click="add">記録する</button>
  ... ...
    <section>
      <h5 class="list-title">メモ一覧</h5>
      <template v-if="items.length">
        <p
          class="list-item-wrapper"
          v-for="(item, i) in items"
          :key="i"
        >
          <span class="list-index">{{ i + 1 }}</span>
          {{ item }}
        </p>
      </template>
      <template v-else>
        <p>記録されたメモはありません</p>
      </template>
    </section>
  ... ...


なお、v-bind: は : 、v-on: は @ の形で省略表記が可能なので、書き換えてあります。


アプリっぽくなりました！（つづく）

2019年5月10日 | カテゴリー：アプリ開発

│トップ│