案例:Vue.js案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Vue 测试实例 - W3xue教程(w3xue.com)</title>
6
<script src="//unpkg.com/vue/dist/vue.js"></script>
7
</head>
8
<body>
9
<div id="app">
10
11
      <p>{{ total }}</p>
12
      <button-counter @increment="incrementTotal"></button-counter>
13
      <button-counter @increment="incrementTotal"></button-counter>
14
15
</div>
16
17
<script>
18
Vue.component('button-counter', {
19
  template: '<button @click="addnow">{{ counter }}</button>', //这里使用方法addnow
20
  data: function () {
21
    return {
22
      counter: 0
23
    }
24
  },
25
  methods: {
26
    //这里定义addnow方法
27
    addnow: function () {
28
      this.counter += 1
29
      this.$emit('increment') //这里触发button-counter的increment
30
    }
31
  },
32
})
33
new Vue({
34
  el: '#app',
35
  data: {
36
    total: 0
37
  },
38
  methods: {
39
    incrementTotal: function () {
40
      this.total += 1
41
    }
42
  }
43
})
44
</script>
45
</body>
46
</html>