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 }}
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>
<device-template>
v-for="device in devices
v-for="device in devices
devices
device
v-for
v-bind:key="device.name"
v-bind:key="device.name"
v-for
devices.name
v-bind:item="device
v-bind:item="device
先ほど
devices
device
item
item
index.js
propsに渡ります。
終わりに
配列でデータを管理することでより一層 HTML 部分がすっきりしました。
これで CDN で始める Vue.js コンポーネント の記事は終わりになります。 記載内容に誤りなどあれば、ぜひ教えていただけたらたすかります 拙い記事を読んでいただき、ありがとうございました!