CDNで始めるVue.js入門 コンポーネント 1
2018-06-01
目次
コンポーネント化を学習するにあたって、有名な JS フレームワークの
AngularReactVueVue.jsVue.js の説明というよりは、コンポーネント化する方法について、に重きを置いているので、 詳しい Vue.js の説明は公式サイトを見てください。
CDN を読み込む
npm でインストールを行う vue-cli という便利なものがあるのですが、 今回は誰でも手軽に始められるよう、CDN を使ってコードを書いていきます。
下記 CDN を HTML に埋め込んでください
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>今回のコンポーネント使用例
完成例
今回 CSS の説明は省きます。
JavaScript 部分
const Devices = {
template:
'<div class="device" v-on:click="popups">' +
'<div class="img-box">' +
"</div>" +
'<div class="info-box">' +
"<p>Name : {{ name }}</p>" +
"<p>price : {{ price }}</p>" +
"<p>end : {{ end }}</p>" +
"</div>" +
"</div>",
data: function () {
return {
name: "Big Campain",
price: "$ -10",
end: "2018/06/01",
}
},
methods: {
popups: function () {
alert(
"name : " +
this.name +
"\nprice : " +
this.price +
"\nend : " +
this.end
)
},
},
}
new Vue({
el: "#contents",
components: {
"device-template": Devices,
},
})template
まず
const Devicestemplate<div class="device"><div class="img-box"><div class="info-box">{{ name }}, {{ price }}, {{ end }}data
template 部分に適応されるデータを設定します。 コンポーネントに対してデータを 渡す場合、data は関数にする必要があります。
methods
関数を作成できます。今回は
popups()<div class="device"><div class="device">v-on:click="popups"new Vue
el#contentscomponents<device-template>DevicesHTML 部分
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h1>Vue.js</h1>
<div id="contents">
<device-template></device-template>
<device-template></device-template>
<device-template></device-template>
</div><div id="contents"><device-template>終わりに
HTML 部分を一度テンプレートとして書くだけで、何度でも使えるコンポーネントの基本を行ってみました。 しかし、今回の例のままでは name や price などが同じなものが表示されているので 主なデザイン・構造は同じだけどデータは違う。という場合には使えません。 次回はデータを指定して使えるコンポーネント例を紹介したいと思います。