事件处理.md

事件处理

在前面的章节中， 我们使用v-on:或简写@来绑定事件函数。通过添加method属性，我们可以声明这些事件处理函数，如下：

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    greet: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      alert(event.target.tagName)
    }
  }
})
// you can invoke methods in JavaScript too
example2.greet() // -> 'Hello Vue.js!'

当然，我们也可以在组件中使用method（下面的写法将在下一节中讲到）

<template>
    <div>
        <template v-if="hello">{{hello}}</template>
        <p><a @click.prevent="msgBack">Send a msg</a></p>
    </div>
</template>
<script>
    var data = { hello: 'Hello World' }
    module.exports = {
        data(){
            return data
        },
        methods:{
            msgBack:function(e){
                this.hello='I get your msg';
            }
        }
    }
</script>

代码中的.prevent是执行常用的事件处理，等于event.preventDefault()。

当没有传递参数时，默认会带有event对象，如果带有参数，可以使用 $event 来获取event对象。如下：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

// ...
methods: {
  warn: function (message, event) {
    // now we have access to the native event
    if (event) event.preventDefault()
    alert(message)
  }
}

• 你可以在官方文档查看更详细内容。