可以理解為面向?qū)ο竽Ｊ?同一個類創(chuàng)建出來的不同對象,擁有各自的實例屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../util/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
</div>
<template id="tmpl">
<div>
<input type="button" value="+1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
<script>
var dataObj = { count: 0 };
// 這是一個計數(shù)器的組件, 身上有個按鈕,每當點擊按鈕,讓 data 中的 count 值 +1
Vue.component('counter', {
template: '#tmpl',
data: function () {
// return dataObj
return { count: 0 } // 如果返回上面這句話寫的全局變量,修改一個組件
//所有組件都會改變,如果每個組件返回一個自己作用域的對象,不會影響其他組件
//相當于面向?qū)ο?類) self的實例屬性
},
methods: {
increment() {
this.count++
}
}
});
// 創(chuàng)建 Vue 實例镶苞，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
