Noob Front End Engineer Blog

CONTACT

CDNで始めるVue.js入門 コンポーネント 3

2018/06/03

記事概要

CDN で始める Vue.js 入門 コンポーネント 1
CDN で始める Vue.js 入門 コンポーネント 2
初回同様。

今回のコンポーネント使用例

完成例

CSSの説明は省きます。

JavaScript 部分

Vue.component("device-template", {
  props: ["item"],
  template:
    '<div class="device" v-on:click="popups">' +
    '<div class="img-box">' +
    "</div>" +
    "<p>{{ item.name }}</p>" +
    "<p>{{ item.made }}</p>" +
    "<p>{{ item.price }}</p>" +
    "<p>{{ item.com }}</p>" +
    "</div>",
  methods: {
    popups: function () {
      alert(
        "商品名: " +
          this.item.name +
          "\n製造: " +
          this.item.made +
          "\n値段: " +
          this.item.price +
          "\n特徴: " +
          this.item.com
      )
    },
  },
})

new Vue({
  el: "#contents",
  data: {
    devices: [
      { name: "ZZ01", made: "japan", price: "20,000", com: "新商品!" },
      { name: "ZZ02", made: "china", price: "22,000", com: "新商品!" },
      { name: "ZZ03", made: "china", price: "24,000", com: "ちょっと高い!" },
      { name: "ZZ04", made: "china", price: "21,000", com: "新商品!" },
      { name: "ZZ05", made: "canada", price: "10,000", com: "激安!" },
      { name: "ZZ06", made: "canada", price: "12,000", com: "安い!" },
      { name: "ZZ07", made: "japan", price: "23,000", com: "ちょっと高い!" },
      { name: "ZZ08", made: "china", price: "25,000", com: "ちょっと高い!" },
      { name: "ZZ09", made: "china", price: "31,000", com: "たかい!" },
      { name: "ZZ010", made: "japan", price: "32,000", com: "たかい!" },
    ],
  },
})

Vue.component

今回はコンポーネントの使用可能範囲を設定せずに、 グローバルで使用できるコンポーネントとして作成してみます。

props

親要素からデータを受け取ります。受け取ったデータはitemに代入されます。

template

前回とほぼ同じですが、{{ name }}, {{ made }}, {{ price }}の前に先ほど props で受け取ったitemが挿入されています。 あと、しれっと{{ item.com }}が追加されています。特に意味は無いです。

methods

コチラもほぼ前回と同じ。 template と同じくデータの前にitemが挿入されています。

new Vue

ほぼ前回同様。template がグローバルになっているので 個別で指定する必要がなくなりました。

data

ここが今回の大きな変更点の一つです。 データを関数として返すのではなく、配列で管理しています。 devicesに今回使用するname, made, price, comのデータを入力していきます。

HTML 部分

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<h1>Vue.js</h1>

<div id="contents">
  <device-template
    v-for="device in devices"
    v-bind:key="device.name"
    v-bind:item="device"
  >
  </device-template>
</div>

<div id="contents">の中に先ほど作ったコンポーネント <device-template>を挿入します。しかし、今回は 10 回<device-template>が 出力しているはずが、一度しか記入されていません。

v-for="device in devices

devicesのデータをdeviceに入れています。 v-forを行うことで、配列に入っているデータが全て出力されるまで ループ処理を行ってくれます。

v-bind:key="device.name"

v-forで要素を再利用・並べ替えをする際に必要になる key を指定しています。今回はdevices.name

v-bind:item="device 

先ほどdevicesのデータを入れたdeviceitemに渡します。 itemindex.jsで説明したpropsに渡ります。

終わりに

配列でデータを管理することでより一層 HTML 部分がすっきりしました。

これで CDN で始める Vue.js コンポーネント の記事は終わりになります。
記載内容に誤りなどあれば、ぜひ教えていただけたらたすかります<(_ _)>。
拙い記事を読んでいただき、ありがとうございました!


Written by daichi iwamoto