事件
1.方法的写法在methods中写方法,供事件或者别的方法内部调用方法的写法:由于是做了es6语法处理的 所以学过的所有方式的写法都行
<div id="app">
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"hello"
},
methods:{
fn:function(){},
fn2:()=>{},
fn3(){}
}
})
</script>
事件绑定:
//v-on: 和 @ 都是绑定事件的指令
//指令后面跟事件类型,值就是methds中的方法,可以加小括号也可以不加
<button v-on:click="fn1()">点击事件1</button>
<button @click="fn2">点击事件2</button>
<button v-on:click="fn">fn</button>
<button v-on:click="fn()">fn()</button>
加括号和不加括号都可以调用函数。
一个元素可以绑定多个事件
<button v-on:click="fn" @mouseenter="fn4">fn</button>
怎样使元素调用两个函数:(给事件绑定函数,在函数中调用你想执行得多个函数)
<button v-on:click="fn()">fn()</button>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"hello"
},
methods:{
fn:function(){
console.log(2222)
this.fn3();
this.fn2();
},
fn2:()=>{console.log("事件1")},
fn3(){console.log("事件2")},
fn4(){console.log("移入")}
}
})
</script>
3.事件修饰符(面试)
- .stop 阻止冒泡,阻止从当前元素经过的所有冒泡行为
- .prevent 阻止默认事件
- .capture 添加事件侦听器时让事件在捕获阶段触发
- .self 其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素
- .once 事件只触发一次,触发完之后,事件就解绑
- 多修饰符一起