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事件处理 - 绑定事件及事件处理