Vue.js 学习日志——事件处理器（六）

Vue.js 事件处理器

---

• 直接使用 v-on 指令

<div id="app">
   <button v-on:click="count ++">增加1</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    count: 0
  }
})
</script>

---

• 接收一个定义的方法调用

<div id="app">
  <!-- `addself` 是在下面定义的方法名 -->
  <button v-on:click="addself">{{ count }}</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    count : 1
  },
  methods: {
    addself: function () {
      this.count ++;
    }
  }
})
</script>

可以使用JavaScript直接调用方法：

<script>
  app.addself();
</script>

---

• 可以用内联 JavaScript 语句

<div id="app">
  <button v-on:click="say('hello Vue.js')">hello Vue.js</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message);
    }
  }
})
</script>