vue methods html,Vue 2.0的学习笔记：Vue的Methods和事件处理

前面学习了，在Vue中，可以使用v-on给元素绑定事件，而且Methods可以在Vue中处理一些逻辑方面的事情。Vue事件监听的方式看上去有点违背分离的传统理念。而实际上Vue中所有事件处理方式和表达式都严格绑定在当前视图的ViewModel上，它不会导致维护上的困难。使用v-on有以下好处：

通过HTML模板就能轻易定位在JavaScript代码里对应的方法

不需要在JavaScript里手动绑定事件，ViewModel代码可以是非常纯粹的逻辑，和DOM无全解耦，更易于测试

当一个ViewModel被销毁时，所有的事件处理器都会自动被删除，无须担心如何自己清理它们

在Vue中ViewModel中的逻辑处理，一般都在Vue的methods中来处理。那是因为很多事件处理逻辑代码都很复杂，如果我们直接把JavaScript代码写在v-on指令中有时并不可行，所以在methods中定义方法，让v-on指令来接收(调用)。

Methods和事件处理

有关于Methods的详细介绍，这里不做过多阐述，感兴趣的可以阅读前面的学习笔记。咱们简单的回忆一下。

给一个button使用v-on指令，绑定一个click事件，给这个事件指定一个方法，这个方法主要用来改变文本的显示。比如：一开始在页面上渲染的文本是“没发生任何事情”，点击button按钮之后，执行prompt方法，然后页面渲染的文本变成了“快来看这里！我是新讯息！”。使用Vue来处理，其实很简单：

点击我(^_^)

{{ message }}

let app = new Vue({

el: '#app',

data () {

return {

message: '没发生任何事情!'

}

},

methods: {

prompt: function () {

this.message = '快来看这里！我是新讯息！'

}

}

})

点击下面的按钮体验一下：

如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event，把它传入到methods中的方法中。在上面的示例中修改一下，给prompt()中传参数：

点击我(^_^)

{{ message }}

let app = new Vue({

el: '#app',

data () {

return {

message: '没发生任何事情!'

}

},

methods: {

prompt: function (message, event) {

if (event) {

console.log(event)

event.preventDefault();

}

this.message = message

}

}

})

从console.log(event)的信息中可以看出来，我们每次点击在按钮不同位置时，event出来的信息都不会一样。而且在调用的时候，prompt()可以指定