前端vue2学习（事件处理）总结

最新推荐文章于 2024-07-08 18:51:22 发布

片羽时光

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量446

点赞数 4

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/m0_37271739/article/details/136919156

版权

事件处理

<div id="root">
    <h2>事件处理，hello，{{name}}</hr>
    <button v-on:click="showInfo1">点我提示信息1(不传参)</botton>
    <button @click="showInfo2(12,$event)">点我提示信息2（传参）</botton>
</div>
<script type="text/javascript">
const vm= new vue{
    el:'#root',
    data:{
        name:'zhangsan',
        sex:'男'
    },
    menthods:{
      //配置回调方法
       showInfo1(event){
           console.log(event.target.innerText);
           console.log(this==vm);//结果为true，这里的this就是vm
           alert('同学你好');
       },
        showInfo2(number,a){
           console.log(number);
           console.log(this==vm);//结果为true，这里的this就是vm
           alert('同学你好');
       }
    }
    
}；

</script>

事件的基本使用：

使用v-on:xxx或者 @xxx绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象里，最终会在vm上；
method配置的函数不要用箭头函数，否则this就不是vm了；
methods所配置的函数都是被vue所管理的函数，this的指向是vm或组件实例对象；
@click=‘demo’和和@click='demo($event)'效果一致，但后者可以传参。

当需要阻止事件的默认行为时，可以使用@click.prevent="xxx"来代替，比如想要阻止如下a标签的超链接跳转，可以使用。

<div id="root">
    <h2>事件处理，hello，{{name}}</hr>
    <a herf="http://baidu.com" @click.prevent="showInfo1">点我提示信息</a>
</div>
<script type="text/javascript">
const vm= new vue{
    el:'#root',
    data:{
        name:'zhangsan',
        sex:'男'
    },
    menthods:{
      //配置回调方法
       showInfo1(event){          
           event.preventDefault();//同样可以阻止超链接跳转事件，与@click.prevent效果相同。
           alert('同学你好');
       }
    }    
}；

</script>

prevent为事件修饰符，vue的事件修饰符包括：

prevent：阻止默认事件（常用）；
stop：阻止事件冒泡（常用）；
once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才出触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕。

事件冒泡：

<body>
<div id="root">
    <h2>事件处理，hello，{{name}}</hr>
    <a herf="http://baidu.com" @click.prevent="showInfo1">点我提示信息</a>
    <div class="demo1" @click="showInfo">
         <button @click.stop="showInfo">点我提示信息</botton>
    </div>
</div>
</body>
<script type="text/javascript">
const vm= new vue{
    el:'#root',
    data:{
        name:'zhangsan',
        sex:'男'
    },
    menthods:{
      //配置回调方法
       showInfo(event){          
           //event.stopPropagation();//同样可以阻止按钮点击之后div冒泡事件，与@click.stop效果相同。
           alert('同学你好');
       }
    }    
}；

</script>

同理，还有@click.once等，冒泡是由内而外的，是先捕获外层，再执行内层，再冒泡到外层执行，因此先执行内层再执行外层，当需要先执行内层时，就需要在外层使用@click.capture了。

键盘事件：

@keyup
@keydown

当需要输入回车后相应键盘事件则使用：xxx.enter 。 vue给想用的按键都起了别名，如下：

回车：enter
删除：deletet
退出：esc
空格：space
换行：tab (特殊，必须配合@keydown来使用)
上：up
下：down
左：left
右：right

当需要使用vue未提供别名的按键时，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）。比如切换大小写的键名为：CapsLock，在绑定键盘事件时，需要使用@xxx.caps-lock=yyy

特殊的键盘按键：除了上述的tab键必须使用@keydown之后，还有系统修饰键ctrl、alt、shift、meta这四个也比较特殊：

配合keyup使用：按下修饰符的同时，再按下其他键，然后再释放其他键，事件才被触发；
配合keydown使用：正常触发事件。
当然，也可以通过键值的方式keycode的方式来指定具体的按键，比如enter对应的值是13，可以写成@keyup.13=yyy，但是这种方式不推荐。

可以使用vue.config.keycodes.自定义键名=键码 这种方式定制按键别名，如vue.config.keycodes.huiche=13 就是将enter键名定制为别名huiche。

事件总结：

1.事件的修饰符是可以连着写的，比如@keyup.stop.prevent是先阻止冒泡再阻止默认事件；
2.系统修饰符也是可以连着写的，比如@keyup.ctrl.y是按下ctrl+y时触发事件。

片羽时光

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端vue2学习（事件处理）总结

同理，还有@click.once等，冒泡是由内而外的，是先捕获外层，再执行内层，再冒泡到外层执行，因此先执行内层再执行外层，当需要先执行内层时，就需要在外层使用@click.capture了。当需要阻止事件的默认行为时，可以使用@click.prevent="xxx"来代替，比如想要阻止如下a标签的超链接跳转，可以使用。1.事件的修饰符是可以连着写的，比如@keyup.stop.prevent是先阻止冒泡再阻止默认事件；，在绑定键盘事件时，需要使用@xxx.这种方式定制按键别名，如。
复制链接

扫一扫