vue2_6、事件处理

1、事件处理

1.1、事件的基本用法

  1. 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
  2. 事件的回调需要配置在methods对象中，最终会在vm上
  3. methods中配置的函数，不要用箭头函数，否则this就不是vm 了
  4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
  5. @click="demo"和 @click="demo($event)"效果一致，但后者可以传参
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始vue</title>
    <!-- 引入vue-->
    <script src="/vueBaseJs/vue.js"></script>
</head>
<body>

    <div id="root">
        <h2>欢迎：{{name}}</h2><br/>
        <!--<button v-on:click="sayHelloFun1">点我1</button> -->
        <button @click="sayHelloFun1">点我1</button>
        <button @click="sayHelloFun2($event,'光')">点我2</button>

    </div>

    <script>

        Vue.config.productionTip=false;//阻止vue启动时生成生产提示

        const vm=new Vue({
            el:"#root",
            data:function(){
                return {
                    name:"张三"
                }
            },
            methods:{
                sayHelloFun1:function(event){
                    console.log(event.target.innerText);
                    console.log(this);//此处this是Vue的实例vm
                    alert("1、你好");
                },
                sayHelloFun2:function(event,parame){
                    alert("2、你好:"+parame);
                }
            }
        });
       

    </script>
    
</body>
</html>


1.2、事件修饰符

Vue中的事件修饰符

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

修饰符可以连续写，比如可以这么用：@click. prevent. stop="showinfo"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始vue</title>
    <!-- 引入vue-->
    <script src="/vueBaseJs/vue.js"></script>
    <style>
        *{
            margin: 20px;
        }

        .demo1{
            background-color: aqua;
            height: 50px;
            /**/
        }

        .div1{
            background-color: aqua;
            height: 80px;
        }
        .div2{
            background-color: yellow;
            height: 25px;
        }

        .list{
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: auto; /* 当这个容器长度不够允许出现滚动条，避免子元素溢出*/
        }
        li{
            height: 100px;
        }



    </style>
</head>
<body>

    <div id="root">
        <h2>欢迎：{{name}}</h2><br/>
        <!-- 阻止默认事件 -->
        <a href="https://www.bilibili.com/" @click.prevent="fun1">hello</a><br/>

        <!-- 阻止向上一级冒泡 -->
        <div class="demo1" @click="fun2">
            <button @click.stop="fun2">点位提示信息</button>
        </div>

        <!-- 让事件只能触发一次-->
        <button v-on:click.once="fun3">点我</button>

         <!-- 让某个元素的事件在事件捕获阶段就触发-->
        <div class="div1" v-on:click.capture="fun4($event,1)">
            div1
            <div class="div2" @click="fun4($event,2)">
                div2
            </div>
        </div>


        <!-- 只有event.target是当前操作的元素时才触发事件 -->
        <div class="demo1" @click.self="fun5">
            <button @click="fun5">点我2</button>
        </div>

        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <ul class="list" v-on:wheel="fun6"><!-- scroll：滚动条滚动的事件。wheel：鼠标上的滚轮滚动事件 -->
            <li>1</li> <!-- wheel不加passive如果这时候在这个ul里滑滚轮，那么，它会执行下面的方法，方法和方法里循环完了才把滚动条往下显示，会有明显感觉滚动条有延迟 -->
            <li>2</li><!-- 不是所有的事件都会存在这个问题，比如scroll就不会存在这个问题，可以不用加passive -->   
            <li>3</li><!-- 一般移动端的项目(给手机和平板用的交换)才会用的多这个修饰符-->
            <li>4</li>
        </ul>


    </div>

    <script>

        Vue.config.productionTip=false;//阻止vue启动时生成生产提示

        const vm=new Vue({
            el:"#root",
            data:function(){
                return {
                    name:"张三"
                }
            },
            methods:{
                fun1:function(event){
                    //event.preventDefault();//js中阻止默认行为的方法。vue里不用在这里写
                    alert("你好");
                },
                fun2:function(event){
                    //event.stopPropagation();//js中阻止事件向上一级冒泡的方法。vue里不用在这里写
                    alert("冒个泡");
                },
                fun3:function(event){
                    alert("光");
                },
                fun4:function(event,msg){
                    console.log(msg);
                },
                fun5:function(event){
                    //event.target，如果是冒泡触发事件，那么往上冒泡时触发每一层的事件时的事件对象默认都是最底下的那个元素的。
                    console.log(event.target);                    
                },
                fun6:function(event){
                    
                    //console.log("xx");    
                    for(let i=0;i<100000;i++){
                        console.log("#");
                    }
                    console.log("累坏了");                    
                },

            }
            
        });
       

    </script>
    
</body>
</html>


1.3、键盘事件

键盘上的每个按键都有自己的名称和编码，例如：Enter （ 13） 。而Vue还对一些常用按键起了别名方便使用

  1. Vue中常用的按键别名
    回车enter
    删除delete捕获“删除”和“退格”键
    退出esc
    空格space
    换行tab特殊，必须配合keydown去使用
    上up
    下 down
    左 left
    右 right

  2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case （多单词小写
    短横线写法）

  3. 系统修饰键（用法特殊）Ctrl alt shift meta （ meta就是win键）
    a.配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
    指定 ctr+y 使用 @keyup.ctr.y
    b.配合keydown使用：正常触发事件

  4. 也可以使用keyCode去指定具体的按键（不推荐）

  5. Vue.config.keyCodes.自定义键名=键码，可以去定制按键名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始vue</title>
    <!-- 引入vue-->
    <script src="/vueBaseJs/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎：{{name}}</h2><br/>
        <input type="text" placeholder="按下回车提示输入" v-on:keyup.enter ="showInfo" >
    </div>

    <script>

        Vue.config.productionTip=false;//阻止vue启动时生成生产提示

        const vm=new Vue({
            el:"#root",
            data:function(){
                return {
                    name:"张三"
                }
            }, 
            methods:{
                showInfo:function(event){
                    //console.log(`按键名：${event.key}，按键编码：${event.keyCode}`);
                    //if(event.keyCode!=13) return;//判断是否为回车键按下的，在vue中为回车按钮提供了别名enter，所以直接在事件后面写修饰符即可
                    console.log(event.target.value);
                }
            }           
        });

    </script>
    
</body>
</html>
posted @   青仙  阅读(60)  评论(0)  编辑  收藏  举报
相关博文：
·  vue2_2、初识vue
·  vue2_11、内置指令、自定义指令
·  （1）vue基础——1.7 事件处理
·  Vue的事件
·  vue2 - 事件处理
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae