Vue事件处理 - 绑定事件_vue input框绑定的哪个事件-优快云博客

本文链接：https://blog.youkuaiyun.com/json_ligege/article/details/145557675

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

事件处理

绑定方式

函数表达式

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

示例如下：

<script src="../lib/vue.js"></script>
<div id="box">
    {{count}}
    <button @click="handleAdd1()">add-1</button>
</div>
<script>
    let vm = new Vue({
        el:'#box',
        data : {
            count : 0
        },
        methods : {
            handleAdd1() {
                this.count++
            }
        }
    });
</script>

绑定函数名

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

示例如下：

<script src="../lib/vue.js"></script>
<div id="box">
    {{count}}
    <button @click="handleAdd1()">add-1</button>
    <button @click="handleAdd2">add-2</button>
</div>
<script>
    let vm = new Vue({
        el:'#box',
        data : {
            count : 0
        },
        methods : {
            handleAdd1() {
                this.count++
            },
            handleAdd2(evt) {
                console.log(evt.target);
                this.count++
            }
        }
    });
</script>

说明：evt事件源

输入框绑定事件

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

示例如下：

<input type="text" @input="handleInput">

拿到输入框的值

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

示例如下：

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

传值加事件源

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

示例如下：

<button @click="handleAdd1($event, 1, 2, 3)">add-1</button>

事件设定

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

事件第三种写法

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

示例如下：

<button @click="count++">add-3</button>

总结

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