Vue 事件(点击:双击:鼠标事件)、事件修饰符(once:prev:stop)

一.点击:双击:鼠标事件

1. 给某个元素添加点击事件时,在click属性前加“v-on:或@”,属性值为点击事件方法。相应的点击事件方法仍然存放于methods当中。

2. 双击事件,将click改为dblclick即可。

3. 鼠标事件:方法与点击事件一样。

Vue 事件(点击:双击:鼠标事件)、事件修饰符(once:prev:stop)_第1张图片

Vue 事件(点击:双击:鼠标事件)、事件修饰符(once:prev:stop)_第2张图片

二.事件修饰符(once:prev:stop)

1. once:事件仅生效一次,eg:与点击事件配合使用,@click.once。使得涨一岁只可以点击一次。

2. prevent:阻止默认事件,eg:下例中,取消a标签链接跳转事件。

3. stop:阻止冒泡事件,eg:如下例中,鼠标触碰span标签范围内的内容,x,y坐标将不在冒泡向上传送给父元素canvas,坐标暂停改变。

Vue 事件(点击:双击:鼠标事件)、事件修饰符(once:prev:stop)_第3张图片

Vue 事件(点击:双击:鼠标事件)、事件修饰符(once:prev:stop)_第4张图片

Vue 事件(点击:双击:鼠标事件)、事件修饰符(once:prev:stop)_第5张图片

你可能感兴趣的:(Vue 事件(点击:双击:鼠标事件)、事件修饰符(once:prev:stop))