vue-cliを使わずにサクッとVue.jsでフロントエンドを試作 or 開発したい場合に使えるHTMLテンプレートを作ってみた。
サンプルコード付き。Vue.jsの基本的な機能の使い方の参考になるようにしている。
Vue.jsの呼び出しはCDNで行っているので、オンライン環境で試してくだしあ。
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js試行用HTMLテンプレート</title>
</head>
<body>
<div id="app">
<input v-model="message" />
<div>{{ message }}</div>
<sample-component v-bind:listdata="sampleList" v-on:delete="deleteItem($event)">
{{ listTitle }}
</sample-component>
<button v-on:click="addItem()" v-bind:style="addButtonStyle">Add item</button>
</div>
<!-- Vue.jsの開発バージョン、便利なコンソールの警告が含まれています -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue.jsの本番バージョン、サイズと速度のために最適化されています -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
<script>
// Vue.jsコンポーネントの作成例
Vue.component(
'sample-component', { // コンポーネントの名前
props: ['listdata'], // コンポーネント外から受け取れるプロパティ
template: `
<div>
<slot></slot>
<div v-if="isDataEmpty">{{ noDataMessage }}</div>
<ol>
<li v-for="item in listdata" v-bind:key="item.id" v-bind:style="listItemStyle">
{{ item.text }}:
<button v-on:click="deleteItem(item.id)" v-bind:style="deleteButtonStyle">Delete</button>
</li>
</ol>
</div>
`,
data() { // コンポーネント内で使えるリアクティブなデータをまとめる関数（必ず関数にする。しないとVue.jsに認識されない）
return {
noDataMessage: 'データはありません',
listItemStyle: { // CSSスタイルのプロパティはCaml形式で指定可能。
color: '#207720',
fontSize: '20px'
},
deleteButtonStyle: {
backgroundColor: '#333333',
color: 'white',
borderWidth: '0px',
fontSize: '16px'
}
};
},
methods: { // コンポーネント内で使える関数をまとめるプロパティ。
deleteItem(id) {
this.$emit('delete', id);
}
},
computed: { // 計算した結果を返すプロパティ。HTMLからはdataと同じように使える。
isDataEmpty() {
return this.listdata.length < 1;
}
}
}
);
// Vue.jsの機能の初期化
var app = new Vue({
el: '#app', // 初期化の対象とする要素。この要素以下でVue.jsの諸機能を使える。
data: { // リアクティブなデータをまとめるプロパティ。
message: 'Hello Vue!',
listTitle: 'サンプルコンポーネント',
currentId: 3,
sampleList: [{ // 配列のデータバインディング
id: 1,
text: 'list item 1'
},
{
id: 2,
text: 'list item 2'
},
{
id: 3,
text: 'list item 3'
}
],
addButtonStyle: { // CSSスタイルっぽいものもデータバインディングできる。
width: '100px',
height: '32px',
backgroundColor: '#5555cc',
color: 'white',
borderWidth: '0px',
fontSize: '16px'
}
},
methods: { // クリック時などに実行する関数をまとめるプロパティ。
addItem() {
this.currentId++;
this.sampleList.push({
id: this.currentId,
text: this.message + ' ' + this.currentId
});
},
deleteItem(id) {
this.sampleList.some((v, i) => {
if (id === v.id) this.sampleList.splice(i, 1);
});
}
}
})
</script>
</body>
</html>