Vue -- 事件处理

最新推荐文章于 2024-10-06 14:15:37 发布

zmm_mohua

最新推荐文章于 2024-10-06 14:15:37 发布

阅读量261

点赞数

分类专栏： vue学习记录文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42250642/article/details/123018632

版权

vue学习记录专栏收录该内容

21 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js中的事件处理机制，包括如何使用`v-on`或`@`绑定事件，强调在`methods`中配置的函数不应使用箭头函数以保持正确的`this`指向。同时，讲解了事件修饰符如`prevent`、`stop`、`once`等的用途，并展示了如何使用按键别名和自定义按键绑定。通过示例代码展示了事件处理在实际应用中的使用，以及事件修饰符如何防止默认行为、阻止冒泡和限制触发次数。

摘要由CSDN通过智能技术生成

Vue – 事件处理

小结

事件的基本使用：
   1、使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名；
   2、事件的回调需要配置在 methods 对象中，最终会在 vm 上；
   3、methods 中配置的函数，不要用箭头函数！否则 this 就不是 vm，而是 window；
   4、methods 中配置的函数，都是被 Vue 管理的函数，this 的指向是 vm 或 组件实例对象；
   5、@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

Vue中的事件修饰符：
   1、prevent：阻止默认事件（常用）；
   2、stop：阻止事件冒泡（常用）；
   3、once：事件只触发一次（常用）；
   4、capture：使用事件的捕获模式；
   5、self：只有event.target是当前操作的元素时才触发事件；
   6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
   
1、Vue中常用的按键别名：
   回车 => enter
   删除 => delete（捕获“删除”和“退格”键）
   退出 => esc
   空格 => space
   换行 => tab
   上 => up
   下 => down
   左 => left
   右 => right
2、Vue未提供别名的按键，可以使用原始的 key 值绑定，但注意要转为 kebab-case（短横线命名）(如：CapsLock要写成casp-lock)
3、系统修饰键（用法特殊）：ctrl、alt、shift、meta
   1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
   2）配合keydown使用：正常触发事件
4、也可以使用keycode去指定具体的按键（不推荐）
5、Vue.config.keyCodes.自定义键名 = 键码， 可以去定制按键别名

代码

事件的基本使用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>事件的基本使用</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h2>欢迎来到 {{name}} 学习</h2>
            <button v-on:click="showInfo1">点击，提示信息1(不传参)!</button>
            <br/>
            <button @click="showInfo2($event,1)">点击，提示信息2（传参）！</button>
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                name:'湖南大学',
            },
            methods: {
                showInfo1(event){
                    console.log(event.target.innerText)
                    console.log(this)  //此处的this是vm
                    alert('同学，你好！')
                },
                showInfo2(event,number){
                    console.log(event,number)
                    alert("你好，同学！")
                }
            }
        })
    </script>
</html>

事件修饰符：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>事件修饰符</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            *{
                margin-top: 20px;
            }
            .demo1{
                height: 50px;
                background-color: skyblue;
            }
            .box1{
                padding: 5px;
                background-color: skyblue;
            }
            .box2{
                padding: 5px;
                background-color: slateblue;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <h2>欢迎来到 {{name}} 学习！！！</h2>
            <!-- 阻止默认事件 -->
            <a href="https://www.hnu.edu.cn/" @click.prevent="showInfo">点我提示信息！</a>
            <!-- 阻止事件冒泡 -->
            <div class="demo1" @click="showInfo">
                <button @click.stop="showInfo">点我，提示信息！！</button>
            </div>
            <!-- 事件只触发一次 -->
            <button @click.once="showInfo">点击，提示信息！</button>
            <!-- 使用事件的捕获模式-->
            <div class="box1" @click.capture="showMsg(1)">
                div1
                <div class="box2" @click="showMsg(2)">
                    div2
                </div>
            </div>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'湖南大学',
            },
            methods: {
                showInfo(event){
                    //event.preventDefault() //将事件的默认行为进行阻止
                    alert("你好，同学")
                },
                showMsg(msg){
                    console.log(msg);
                }
            }
        })
    </script>
</html>

键盘事件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>键盘事件</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
        <div id="root">
            <h2>欢迎来到 {{name}} 学习</h2>
            <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                name:'湖南大学',
            },
            methods: {
                showInfo(event){
                    //console.log(event.key,event.keyCode)  //输出按了哪个键，以及其键码
                    //if(event.keyCode !== 13) return  //13是回车的ASCALL码，可以在事件后加.enter就代表回车了
                    console.log(event.target.value)
                },
            }
               
        })
    </script>
</html>