Vue事件处理 - 绑定事件

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue事件处理 - 绑定事件及事件处理

目录

事件处理

绑定方式

函数表达式

绑定函数名

输入框绑定事件

拿到输入框的值

传值加事件源

事件第三种写法

总结

---

事件处理

绑定方式

函数表达式

在按钮上使用函数表达式绑定事件处理。

示例如下：

    {{count}}
    add-1

绑定函数名

还可以在按钮上只绑定事件的函数名，这种可以在事件处理中获取事件源。

示例如下：

    {{count}}
    add-1
    add-2

说明：evt事件源

输入框绑定事件

创建一个输入框，绑定一个事件。

示例如下：

 

拿到输入框的值

如果直接绑定函数名，那么如何获得输入框的值呢？

示例如下：

methods : {
       handleInput(evt) {
        console.log("input", evt.target.value)
    }
}

 

传值加事件源

既可以传值 又可以使用事件源。

示例如下：

add-1

事件设定

methods : {
    handleAdd1(evt, a, b, c) {
        console.log(evt.target, a, b, c)
        this.count++
    },

事件第三种写法

还可以在按钮上直接处理，不过这种只适用于较为简单的业务。

示例如下：

add-3

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue事件处理 - 绑定事件及事件处理