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来处理,其实很简单:

<!-- HTML -->
<div id="app">
    <button @click="prompt">点击我(^_^)</button>
    <p>{{ message }}</p>
</div>

let app = new Vue({
    el: '#app',
    data () {
        return {
            message: '没发生任何事情!'
        }
    },
    methods: {
        prompt: function () {
            this.message = '快来看这里!我是新讯息!'
        }
    }
})

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

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

<!-- HTML -->
<div id="app">
    <button @click="prompt('快来看这里!我是新讯息!', $event)">点击我(^_^)</button>
    <p>{{ message }}</p>
</div>

let app = new Vue({
    el: '#app',
    data () {
        return {
        message: '没发生任何事情!'
        }
    },
    methods: {
        prompt: function (message, event) {
        if (event) {
            console.log(event)
            event.preventDefault();
        }
        this.message = message
        }
    }
})

Vue的Methods和事件处理

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

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-methods-and-event-handling.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部