<!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>
<!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>数据、方法和计算属性</title>
</head>
<body>
<div id="app">
<!-- 因为组件是可复用的 Vue 实例，
所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。
仅有的例外是像 el 这样根实例特有的选项。
问：为什么Vue实例中的data属性是一个对象，然而组件中的data属性是一个函数？
答：因为一个组件可以在同一个页面上被多次引用，如果每个实例的data属性是同一个对象的引用，当该组件的某个实例修改了自身的data属性，相当于所有实例的data属性都被修改了
通过以下案例可以看到每个组件都独有一个count
注意：如果忘记将组件的data属性设置为函数，Vue会抛出一个警告！！！
-->
<button-counter></button-counter><br>
<button-counter></button-counter><br>
<button-counter></button-counter><br>
<button-counter></button-counter><br>
<button-counter></button-counter>
</div>
<script src="../vue.js"></script>
<script>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
computed:{
},
watch:{
},
methods:{
},
template: '<button v-on:click="count++">你点击了我 {{ count }} 次，请不要随便点击！！</button>'
});
let vue = new Vue({
el: "#app",
data: {
}
})
</script>
</body>
</html>
