1.在 vue中,事件通过指令 v-on
进行绑定,v-on
缩写 @
<组件 v-on:事件名称="表达式" />
<组件 @事件名称="表达式" />
2.this:在vue中methods中的this,永远指向vue实例对象
事件对象:a:如果有其他的参数时,需传递实参$event;
b:如果没有其他的参数时,默认为第一个参数
<组件 @事件名称="fn('kaikeba', $event)" />
<script>
new Vue({
...,
methods: {
fn(name, ev) {
//...
}
}
})
</script>
<div id="app">
<button @click="fn($event,'你好')">点我啊</button>
</div>
let app = new Vue({
el:'#app',
data:{
val:1
},
methods:{
fn(e,v){
console.log(this.val);
this.fn2();
console.log(v);
console.log(e);
},
fn2(){
console.log("我是嵌套调用的");
}
}
});
也可以在事件绑定中直接调用函数(并不会立即执行,也是通过事件触发执行的)
在事件函数中,我们可以通过 ev.preventDefault()
、ev.stopPropagation()
来阻止默认行为,阻止冒泡,但是中 vue 中提供一些更加方便的方式来处理这些问题,这就是事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
按键修饰符
vue
还提供了许多按键修饰符
.keyCode
<组件 @keyup.13="fn" />
.enter
.down
.exact
原生事件
自定义组件中可以自定义一些事件,可以通过 .native
修饰符来指定监听原生中的事件,而不是组件自定义事件