<body>
<div id="app">
<counter></counter>
</div>
<template id="temp1">
<div>
<input type="button" value="+1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
<script type="text/javascript">
var dataObj = {count: 0};
Vue.component('counter',{
template:'#temp1',
data(){
return dataObj
},
methods:{
increment() {
this.count++
}
}
})
var vm = new Vue({
el: "#app",
data:{},
methods: {}
})
</script>
</body>
分析如上代碼：
1、首先創建一個名字為counter的組件，data函數中返回一個外部定義的對象的值，如果直接給data屬性設置一個對象而不是函數，那么會在瀏覽器中直接報錯
2、在瀏覽器中運行代碼
每次點擊+1按鈕，下邊的值就會加一
3、如果我們在頁面上同時使用三個counter組件
<div id="app">
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
<hr>
</div>
然后在瀏覽器中再次瀏覽
點擊任意一個+1按鈕，三個數同時變化。因為它們都指向了同一個對象。我們當然希望點擊不同的按鈕只實現當前組件內數據的變化，那么，我們在函數中返回一個對象，每次創建一個組建的時候，在內存中同時開辟一塊空間給當前組件存放data，這樣，就不會出現共用一個data的現象。我們只需將如上代碼進行一點更改
data: function (){ //return dataObj return{ count：0 } },
