今日完成

Vue.js 事件处理器

事件监听可以使用 v-on 指令：

v-on

<div id="app">

  <button v-on:click="counter += 1">增加 1</button>

  <p>这个按钮被点击了 {{ counter }} 次。</p>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    counter: 0

  }

})

</script>

通常情况下，我们需要使用一个方法来调用 JavaScript 方法。

v-on 可以接收一个定义的方法来调用。

v-on

<div id="app">

   <!-- `greet` 是在下面定义的方法名 -->

  <button v-on:click="greet">Greet</button>

</div>

<script>

var app = new Vue({

  el: '#app',

  data: {

    name: 'Vue.js'

  },

  // 在 `methods` 对象中定义方法

  methods: {

    greet: function (event) {

      // `this` 在方法里指当前 Vue 实例

      alert('Hello ' + this.name + '!')

      // `event` 是原生 DOM 事件

      if (event) {

          alert(event.target.tagName)

      }

    }

  }

})

// 也可以用 JavaScript 直接调用方法

app.greet() // -> 'Hello Vue.js!'

</script>

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

v-on

<div id="app">

  <button v-on:click="say('hi')">Say hi</button>

  <button v-on:click="say('what')">Say what</button>

</div>

<script>

new Vue({

  el: '#app',

  methods: {

    say: function (message) {

      alert(message)

    }

  }

})

</script>