VUE入门学习之事件处理

目录

1. 函数绑定2. 带参数和$event 3. 多个函数绑定一个事件4. 事件修饰符5. 按键修饰符 6. 系统修饰键 .exact 修饰符 鼠标按钮修饰符总结

1. 函数绑定

可以用v-on:click="methodName"或者快捷方式 @click="methodName"绑定事件处理函数

@click="methodName()"也可以，@click="methodName"猜测是简写

  <div v-on:click="add">{{ count }}</div>  <div @click="add">{{ count }}</div>

  data() {    return {      count: 0,    };  },  methods: {    add() {      this.count++;    },  },

2. 带参数和$event 

可以直接在往事件绑定的函数里传参数和$event()` -->
<input @keyup.enter="submit" />

<!-- 只有在 `key` 是 PageDown时调用 `vm.onPageDown()` -->
<input @keyup.page-down="onPageDown" />

6. 系统修饰键

事件触发时修饰键必须处于按下状态

.ctrl .alt .shift .meta

<!-- 按住Alt， 按Enter -->
<input @keyup.alt.enter="clear" />

<!-- 按住Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

 .exact 修饰符 

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符

  <button @click.left="log('left cllilck')">鼠标左击</button>  <button @click.right="log('right cllilck')">鼠标右击</button>  <button @click.middle="log('middle cllilck')">鼠标中击</button>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！