绑定事件
在 vue
中,事件通过指令 v-on
进行绑定,v-on
缩写 @
<组件 v-on:事件名称="表达式" />
<组件 @事件名称="表达式" />
组件的 methods
选项
在组件选项中,提供了一个 methods
选项,用来存放组件中使用的函数方法,且存放在 methods
中的函数方法可以通过组件实例(this)进行访问
let app = new Vue({
el: '#app',
methods: {
fn() {
console.log(123);
}
},
});
通过内联方式绑定事件处理函数
-
直接调用函数,不传递参数
<button v-on:click="fn">开课吧</button>
此种情况在methods中接受的第一个参数为事件对象。
methods: { fn(e) { console.log(e); } },
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QoQnAc6v-1604307392406)(https://rmt.dogedoge.com/fetch/tzk/storage/20201031144142.png?w=1280&fmt=jpg)]
-
传递参数
<button v-on:click="fn(1,2,3,$event)">按钮 - {{title}}</button>
此时无论传递多少个参数,传递事件对象时必须使用
$event
名称。methods: { fn(a, b, c, d) { console.log("a: ", a); console.log("b: ", b); console.log("c: ", c); console.log("d: ", d); } }
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XcX17DRP-1604307392409)(https://rmt.dogedoge.com/fetch/tzk/storage/20201031144401.png?w=1280&fmt=jpg)]
事件修饰符
-
.stop
阻止事件继续传播
-
.prevent
阻止默认事件
-
.capture
是否是以捕获模式
-
.self
是否是自己触发的
-
.once
只触发一次
-
.passive
<!-- 阻止单击事件继续传播 -->
<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>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用
v-on:click.prevent.self
会阻止所有的点击,而v-on:click.self.prevent
只会阻止对元素自身的点击。
按键修饰符
.enter
.tab
.delete
(捕获“删除”和“退格”键).esc
.space
.up
.down
.left
.right