<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>$title</title>
<meta name="description" content="$description">
<meta name="author" content="$author">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/font-awesome/css/font-awesome.min.css">
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/bootstrap"></script>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<ul>
<!-- Loop no elements: <template v-for="item in items"></template> -->
<li v-for="item, index in items" :key="item.id">
{{ index }} <img :src="item.img" :class="{ active: item.disabled }" /> {{ item.name }} {{ item.id }}
<button class="btn btn-primary" :disabled="item.disabled" @click="orderItem(item)">Order</button>
<button-counter :article="item"></button-counter>
<custom-input v-model="item.name"></custom-input>
</li>
</ul>
</div>
<script>
// v-for= v-bind:attr v-on:attr v-model=
Vue.component('button-counter', {
props: ['article'],
data: () => {
return { count: 0 }
},
template: '<button v-on:click="count++">You clicked {{article.name}} {{ count }} times.</button>'
});
Vue.component('custom-input', {
props: ['value'],
template: `<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)">`
});
new Vue({
el: '#app',
data: {
items: [
{ id: 211, name: 'Hello A Vue.js!', img: "https://picsum.photos/id/0/200/120" },
{ id: 212, name: 'Hello B Vue.js!', img: "https://picsum.photos/id/1/200/120", disabled: true },
{ id: 213, name: 'Hello C Vue.js!', img: "https://picsum.photos/id/2/200/120" },
]
},
methods: {
orderItem: (item) => {
alert("Ordering " + item.name);
}
}
});
</script>
</body>
</html>
227300cookie-checkHTML Templating with Vue