vue click事件_Notes08事件监听von

点击二白夫人

不许错过我

事件监听v-on

••••

操作软件:Webstorm

插件：vue.js  //从官网下载https://cn.vuejs.org/v2/guide/installation.html

在前端开发中，我们需要经常和用于交互，这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等。

在Vue中如何监听事件呢？

用v-on指令

v-on介绍：

作用：绑定事件监听器；

缩写：@

参数：event

v-on的基本使用，也就是之前计数器

/span>html>lang="en">charset="UTF-8">Title

id ="app" >

当前计数： {{counter}} v-on:click="add">+v-on:click="sub">-

v-on的语法糖：直接把v-on:click改成@click

@click="add">+@click="sub">-

v-on参数

当通过methods中定义方法，以供@click调用，需要注意参数问题

情况一：

如果该方法不需要额外参数，那么该方法后的()可以不添加；

情况二：

如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

@click="btnClick(abc,$event)">按钮1

methods: {btnClick(abc,event){console.log('_+++',abc,event)
   } 

v-on修饰符

Vue提供了修饰符来帮助我们方便的处理一些事件

.stop ---调用event.stopPropagation()

.prevent  -----调用event.preventDefault()

.{keyCode | keyAlias} ----只当事件从特定键触发时才触发回调

.native  -----监听组件根元素的原生事件

.once  -----只触发一次回调

完整代码：