Vue事件($event)

vue中点击事件或者是其他的事件可以通过在事件中添加$event进行对标签元素的dom获取或者修改标签指的属性等等。

event.srcElement就是当前这个标签元素,可以根据此属性来获取当前点击事件的标签元素。

也可以通过$event获取标签自定义的属性值

1.Vue事件处理

//@是v-on:的简写形式

事件的基本使用:
1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名;

2.事件的回调需要配置在methods对象中、最终会在vm 上;
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象;

5.@click="demo”和@click="demo($event)"效果一致,但后者可以传参;
 

2.Vue 事件修饰符
1.prevent: 阻止默认事件(常用);

2.stop:阻止事件冒泡(常用);

3.once:事件只触发一次(常用);

4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件; 
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕; 

使用方法:@click.prevent="showInfo"

3.键盘事件

1.Vue中常用的按键别名:
回车=> enter
删除=>delete(捕获“删除”和“退格”键)

退出=>esc
空格=>space

换行=> tab(需要配合keydown使用 ,ctrl、alt、shift、meta 也都需要)

上 =>up

下 => down

左=> left

右=> right

使用方法:.enter




                    
                    

你可能感兴趣的:(vue.js,javascript,前端)