第一章 Vue核心第七节事件处理

7.1 事件的基本使用

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

    示例代码：

　　 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件的基本使用</title>
        <!--引入Vue-->
        <script src="../lib/vue.js"></script>
    </head>
    <body>
        <!--准备好一个容器-->
        <div id="root">
            <h1>姓名：{{name}}</h1>
            <h1>年龄：{{age}}</h1>
            <!--下面两个效果相同-->
            <button v-on:click="showInfo">点我1</button>
            <button @click="showInfo">点我2</button>
            <!--传递参数-->
            <button @click="showInfoPrams($event,66)">传参</button>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;

            const vm = new Vue({
                el:'#root',
                data:{
                    name:'retrace',
                    age:21
                },
                methods:{
                    showInfo(event){//此处的this是vm
                        console.log(event.target);
                    },
                    showInfoPrams(event,prams){
                        console.log('传参：'+prams);
                    }
                }
            });
        </script>
    </body>
    </html>

7.2 事件修饰符

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

    示例代码：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <!--引入Vue-->
        <script src="../lib/vue.js"></script>
        <style type="text/css">
            *{
                margin: 20px;
            }
            .demo1{
                width: 150px;
                height: 100px;
                background: antiquewhite;
            }
            .box1{
                padding: 10px;
                background: aquamarine;
            }
            .box2{
                padding: 10px;
                 background: orange;
             }
            .list{
                width: 200px;
                height: 200px;
                background: beige;
                overflow: auto;
            }
            .list li{
                height: 100px;
            }
        </style>
    </head>
    <body>
        <!--准备好一个容器-->
        <div id="root">
            <h1>姓名：{{name}}</h1>
            <h1>年龄：{{age}}</h1>

            <!--阻止默认事件（常用）-->
            <a href="https://www.baidu.com" @click.prevent="showInfo">点我去百度搜索</a>

            <!--阻止事件冒泡（常用）-->
            <div class="demo1" @click="showInfo">
                <button @click.stop="showInfo">点我提示信息</button>
                <!--修饰符可以连续写-->
                <a href="https://www.baidu.com" @click.stop.prevent="showInfo">点我提示信息</a><!--先阻止冒泡再阻止事件-->
                <a href="https://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a><!--先阻止事件再阻止冒泡-->
            </div>

            <!--事件只触发一次（常用）-->
            <button @click.once="showInfo">只有第一次点我才会提示哦</button>

            <!--使用事件的捕获模式-->
            <div class="box1" @click.capture="showMsg(1)">
                div1
                <div class="box2" @click="showMsg(2)">
                    div2
                </div>
            </div>

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

            <!--事件的默认行为立即执行，无需等待事件回调执行完毕-->
            <ul @wheel.passive="demo" class="list"> <!--scroll 监听滚动条  wheel 监听鼠标滚轮-->
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;

            const vm = new Vue({
                el:'#root',
                data:{
                    name:'retrace',
                    age:21
                },
                methods:{
                    showInfo(event){//此处的this是vm
                        //event.preventDefault(); 阻止默认事件
                        alert(event.target);
                    },
                    showMsg(msg){
                        console.log(msg);
                    },
                    demo(e){
                        for (let i = 0; i < 1000; i++) {
                            console.log('工作');
                        }
                        console.log('累坏了！')
                    }
                }
            });
        </script>
    </body>
    </html>

7.3 键盘事件

    1.Vue中常用的按键别名：
            回车 => enter
            删除 => delete   (捕获“删除”和“退格”键)
            退出 => esc
            空格 => space
            换行 => tab       (特殊，必须配合keydown使用)
            上 => up
            下 => down
            左 => left
            右 => right
            //切换大小写 caps-lock

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

    3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
        (1).配合keyup使用：按下修饰键的同时再按下其他键，随后释放其他键，事件才触发
        (2).配合keydown使用：正常触发

    4.也可以使用keyCode去指定具体的按键（不推荐） #keyup.13 => 回车

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

    示例代码：

　　 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>键盘事件</title>
        <!--引入Vue-->
        <script src="../lib/vue.js"></script>
    </head>
    <body>
        <!--准备好一个容器-->
        <div id="root">
            <h1>姓名：{{name}}</h1>
            <h1>年龄：{{age}}</h1>
            <input type="text" placeholder="按下回车提示输入..." @keyup.enter="showInfo"/>
            <input type="text" placeholder="按下Ctrl+Y提示输入..." @keyup.ctrl.y="showInfo"/><!--按下Ctrl+y触发-->
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;

            const vm = new Vue({
                el:'#root',
                data:{
                    name:'retrace',
                    age:21
                },
                methods:{
                    showInfo(e){//此处的this是vm
                        //if(e.keyCode === 13)
                        console.log(e.target.value);
                    }
                }
            });
        </script>
    </body>
    </html>

本文作者：何以之

本文链接：https://www.cnblogs.com/serendipity-echo/articles/15407917.html

posted @ 2021-10-14 18:17 何以之阅读(37) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

何以之

第一章 Vue核心第七节事件处理

7.1 事件的基本使用

7.2 事件修饰符

7.3 键盘事件

公告

常用链接

最新随笔

积分与排名

随笔分类 (10)

随笔档案 (15)

文章分类 (19)

文章档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

何以之

第一章 Vue核心 第七节 事件处理

7.1 事件的基本使用

7.2 事件修饰符

7.3 键盘事件

公告

常用链接

最新随笔

积分与排名

随笔分类 (10)

随笔档案 (15)

文章分类 (19)

文章档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

第一章 Vue核心第七节事件处理