Vue学习之事件

最新推荐文章于 2024-05-05 16:09:23 发布

我会努力变强的

最新推荐文章于 2024-05-05 16:09:23 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40837310/article/details/122692394

版权

JavaScript 专栏收录该内容

38 篇文章 8 订阅

订阅专栏

简介

事件的基本使用：
在vue中，使用v-on:事件名=“代码块或回调方法名”，进行事件的绑定，简便写法是@事件名=“代码块或回调方法名”,回调方法要在vue实例对象的methods配置项中进行配置。

注意事项：

vm中的methods中配置的函数不要使用箭头函数，要用普通函数，如果使用箭头函数，那么该函数的this的值就不是指向vm本身了，如果是普通函数，那么this的值是vm实例对象本身。
methods中配置的函数，都是被vue所管理的函数，this指向vm本身或者执行vue的组件实例对象。
事件的回调函数默认会接收一个event参数，该参数的值是事件本身。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE事件绑定</title>
</head>
<body>
    <div id="root">
        <button v-on:click="printThisForComonFn">点击控制台打印普通函数的this</button>
        <button v-on:click="printThisForJianTouFn">点击控制台打印箭头函数的this</button>
        <!-- checkEventParam = checkEventParam($event) -->
        <button v-on:click="checkEventParam">检验事件参数</button>
    </div>
    <script src="./js/vue.js"></script>

   <script>
        new Vue({
            el:"#root",
            methods: {
                printThisForComonFn(){
                    console.log("普通函数的this=",this);
                },
                printThisForJianTouFn:()=>{
                    console.log("箭头函数的this=",this);
                },
                checkEventParam(event){
                    console.log(event);
                    //事件作用的dom
                    console.log(event.target);
                }
            },

        });
   </script>

    
</body>
</html>

结果：
在这里插入图片描述
事件修饰符：

prevent：阻止事件默认行为。
stop：阻止事件冒泡。
once：事件只触发一次。

使用的语法是 v-on:事件名.事件修饰符=“函数”.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
</head>
<body>
    <div id="root">
        <div>{{num}}</div>
        <button @click.once="num++">点击num加一</button>
        <a href="https://www.baidu.com" @click.prevent="printNum">点击alert num</a>

    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:"#root",
            data:{
                num:0
            },
            methods: {
                printNum(){
                    window.alert(this.num)
                }
            },

        })
    </script>
</body>
</html>

结果：
在这里插入图片描述

Vue中常用的按键别名：

回车 == > enter
删除 == > delete 会捕获回退键和删除键。
退出 == > esc
空格 == > space
换行 == > tab
上 == > up
下 == > down
左 == > left
右 == > right
ctrl 、alt shift meta 这四个按键是系统键，如果使用keyup来使用的话，需要进行组合，比如ctrl + c才能触发事件，如果配合keydown来使用的话，正常触发事件。

配合keyup和keydown事件使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按键别名</title>
</head>
<body>
    <div id="root">
        <input type="text" @keyup.enter="showEnter">
        <input type="text" @keydown.left="showLeft">

        <input type="text" @keyup.ctrl="showCtrl">
        <input type="text" @keydown.alt="showAlt">
    </div>

    <script src="./js/vue.js"></script>

    <script>
        new Vue({
            el:"#root",
            methods: {
                showEnter(){
                    console.log("按了回车键并松开");
                },
                showLeft(){
                    console.log("按下左键");
                },
                showCtrl(){
                    console.log("ctrl组合键");
                },
                showAlt(){
                    console.log("keyDown单独按下alt");
                }

            },
            
        })
    </script>
</body>
</html>

结果：
在这里插入图片描述

我会努力变强的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习之事件

简介事件的基本使用：在vue中，使用v-on:事件名=“代码块或回调方法名”，进行事件的绑定，简便写法是@事件名=“代码块或回调方法名”,回调方法要在vue实例对象的methods配置项中进行配置。注意事项：vm中的methods中配置的函数不要使用箭头函数，要用普通函数，如果使用箭头函数，那么该函数的this的值就不是指向vm本身了，如果是普通函数，那么this的值是vm实例对象本身。methods中配置的函数，都是被vue所管理的函数，this指向vm本身或者执行vue的组件实例对象。事件
复制链接

扫一扫