a标签点击事件_Vue入门系列之Vue事件处理
4.1. 监听事件的Vue处理Vue提供了协助我们为标签绑定时间的方法，当然我们可以直接用dom原生的方式去绑定事件。Vue提供的指令进行绑定也是非常方便，而且能让ViewModel更简洁，逻辑更彻底。所以还是推荐大家使用的。Vue提供了v-on指令帮助我们进行事件的绑定。基本的内联事件处理方法[官方demo]：<div id="example-1"><butt...
4.1. 监听事件的Vue处理
Vue提供了协助我们为标签绑定时间的方法，当然我们可以直接用dom原生的方式去绑定事件。Vue提供的指令进行绑定也是非常方便，而且能让ViewModel更简洁，逻辑更彻底。所以还是推荐大家使用的。Vue提供了v-on指令帮助我们进行事件的绑定。基本的内联事件处理方法[官方demo]：
<div id="example-1"> <button v-on:click="counter += 1">增加 1button> <p>这个按钮被点击了 {{ counter }} 次。p>div><script>var example1 = new Vue({ el: '#example-1', data: { counter: 0 }})script>4.2. 事件处理方法集成到Vue对象
内联的方式绑定的事件，只能处理简单的事件的处理逻辑。复杂的情况还是封装到js中最方便，也不容易出错。Vue对象中可以添加methods属性，开发者可以把事件处理函数的逻辑放到methods中。
<html lang="en"><head> <meta charset="UTF-8"> <title>Vue入门之动态显示表格title> <script src="https://unpkg.com/vue/dist/vue.js">script>head><body> <div id="app"> <p>{{ number }}p> <input type="button" name="btnGetNumber" value="增加[绑定事件处理器]" v-on:click="getNumber"> <input type="button" name="btnGetNumber" value="增加[内联方法调用]" v-on:click="getNumber()"> div> <script> var app = new Vue({ el: '#app', data: { number: 1 }, methods: { // 事件响应方法的逻辑代码 getNumber: function (e) { this.number += 1; // 不管是内联方法调用，还是绑定事件处理器两种方式执行事件响应方法的时候 this都是指向 app } } });script>body>html>4.3. 事件修饰符
官网上写的非常好，这块就直接用管网的吧。在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
<a v-on:click.stop="doThis">a><form v-on:submit.prevent="onSubmit">form><a v-on:click.stop.prevent="doThat">a><form v-on:submit.prevent>form><div v-on:click.capture="doThis">...div><div v-on:click.self="doThat">...div><a v-on:click.once="doThis">a>
4.4. 按键修饰符
在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<input v-on:keyup.13="submit">记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：<input v-on:keyup.enter="submit"><input @keyup.enter="submit">全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
4.5. 事件绑定的简写
Vue中属性的绑定的简写直接是: === 'v-bind:'
而事件的缩写是直接变成@. 也就是说： v-on: === @ 看下面的例子：
<a v-on:click="doSomething">a><a @click="doSomething">a>4.6. 事件绑定总结
Vue为了方便大家进行开发，提供了事件的相关的封装，可以让我们方便我们用Vue对事件进行开发，尤其是v-on指令的非常方便的跟Vue对象中methods进行配合进行复杂的事件处理，非常方便。另外事件的事件修饰符和按键修饰符也可以让Vue事件这块锦上添花。
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)