Vue 事件监听v-on(简单使用,参数问题,修饰符),前端开发学习计划

31 阅读1分钟

总结

技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。

开源分享:docs.qq.com/doc/DSmRnRG…

/这里,我们用一个监听按钮的点击事件,来简单看看v-on的使用/

当前计数器为:{{counter}}

下面的代码中,我们使用了v-on:click="counter++”

+

-

另外,我们可以将事件指向一个在methods中定义的函数

+

-

v-on也有对应的语法糖:@click

<button @click="increment">+

<button @click="decrement">-

关于参数问题

  • 当通过methods中定义方法,以供@click调用时,需要注意参数问题:
  • 情况一:如果该方法不需要额外参数,那么方法后的()可以不添加
*   但是注意:如果方法体本身中有一个参数,但调用时没有传参,默认将原生事件event参数传递进去
  • 情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kc2HA9Ss-1616429691640)(v-on 事件监听.assets/image-20210323000256547.png)]

小案例

<button @click="btn1Click()">按钮1-1

<button @click="btn1Click">按钮1-2

<button @click="btn2Click">按钮2-1

<button @click="btn2Click()">按钮2-2

<button @click="btn2Click(123)">按钮2-3

<button @click="btn3Click(123,$event)">按钮3

methods:{

btn1Click(){

console.log("btn1Click");

},

btn2Click(event){

console.log("------------------",event);

文末

篇幅有限没有列举更多的前端面试题,小编把整理的前端大厂面试题PDF分享出来,一共有269页

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】