事件处理
Vue中的事件可以分为两类,一类是原生事件(如点击事件),一类是自定义事件(如子组件向父组件传值时触发事件)。事件处理的思路都是用监听的形式对事件名进行监听,当该事件被触发时就执行相应的回调,可以是一段代码,或是一个函数。
- 对于非常简单的事件处理,我们可以直接在监听事件处直接处理
如点击按钮时打印出字符串click
<button @click="console.log('click')"></button>
2. 在引号内写回调函数名,不带括号
<button @click="handle"></button>
3.在引号内写回调函数,带括号
<button @click="handle()"></button>
第二种和第三种的区别是,第二种是绑定一个回调函数,而第三种本质上和第一种是一样的,带括号的函数是一段JS代码。在使用第三种方式是,我们可以给函数传入参数,并且在不同的地方可以为同一个回调函数传入不同的参数。
原生事件
- 点击事件:@click,回调函数中可以接收一个参数event,可以通过event.screenX和event.screenY拿到鼠标点击的位置
- 滚动条事件:@scroll,回调函数中可以接收一个event参数,在函数中可以通过$event.target拿到滚动条信息
methods:{
handle:function(event){
console.log(event.target.scrollHeight);//滚动条总高度
console.log(event.target.scrollTop);//滚动条距离顶部的高度
console.log(event.target.clientHeight);//滚动内容一屏的总高度
}
}
- 按键事件(在松开时触发):@keyup
按键修饰符:用在@keyup之后,监听具体的按键
如我们要在用户按回车键时自动进行登录:
<input @keyup.enter="login"/>
.exact修饰符:只触发精确的事件。
在不加exact修饰符时,上面的输入框按住shift再按回车也会触发login函数,但加了.exact后,只有在不按其他键仅按回车时才会触发login函数。
自定义事件
自定义事件的触发,都是通过$emit()。监听时,也是通过@自定义事件名进行监听。其他方面的处理基本与原生事件相同
事件修饰符
作用:具体化点击事件的效果,用在@绑定的事件之后。可以串联使用,可以只有修饰符不添加回调函数。使用修饰符时要注意顺序,不同的顺序结果也会不同。
- 阻止单击事件继续传播: <a v-on:click.stop="doThis"></a>
.stop的意义:点击事件的传递分为两个过程,先是从最外层向内部传递的捕获过程,然后是从内部向外部的冒泡过程。也就是说,在不加以阻止的情况下,点击内部元素触发的click事件会向外冒泡,其外部元素的click事件也会被触发。
<div @click="log(1)">
<button @click="log(0)">0</button>
</div>
上面的代码中,点击button后0和1都会输出(log是自己定义的函数,用于输出),这不是我们想要的结果,此时如果把@click写成@click.stop就可以解决这个问题
- 提交事件不再重载页面: <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>
- 触发滚动事件时滚动条立刻滚动而不是等待处理函数结束后再滚动
<div v-on:scroll.passive="onScroll"></div> - 不同顺序造成的不同结果:用
v-on:click.prevent.self
会阻止所有的点击,而v-on:click.self.prevent
只会阻止对元素自身的点击。 - 只会触发一次事件,再次触发无效:<a v-on:click.once="doThis"></a>