1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <script src="../js/vue.js"></script>
9 </head>
10 <body>
11 <div id="app">
12 <counter></counter>
13 <hr>
14 <counter></counter>
15 <hr>
16 <counter></counter>
17 </div>
18
19 <template id="tmpl">
20 <div>
21 <!-- increment 自增 -->
22 <input type="button" value="+1" @click="increment" >
23 <h3> {{ count }} </h3>
24 </div>
25 </template>
26
27 </body>
28 </html>
29 <script>
30
31 // 在外部定义一个对象， 放到计数器组件中
32 // 这样是可以的， 但仅限单个组件，如果是多个组件的话组件会一起变
33 var dataObj = { count: 0}
34
35 // 这是一个计数器组件， 身上有个按钮， 每当点击按钮， 让 data 中的 count 值 +1
36 Vue.component('counter', {
37 template:'#tmpl',
38 data: function(){
39 // 最好不要在外部定义
40 // return dataObj;
41
42 // 三个组件不会一起增加， 会单独增加， 这就是为什么要在内部定义对象
43 return { count: 0 }
44 },
45 methods:{
46 increment(){
47 // this.count +=1
48 this.count++
49 }
50 }
51 })
52
53 var vm = new Vue({
54 el: '#app',
55 data: { },
56 methods: { }
57 })
58
59
60 </script>
