Vue学习（事件修饰符和按键修饰符）

最新推荐文章于 2022-03-02 17:45:59 发布

LSQ_2584951836

最新推荐文章于 2022-03-02 17:45:59 发布

阅读量252

点赞数

分类专栏： Vue.js 文章标签： Vue.js

本文链接：https://blog.csdn.net/LSQ_2584951836/article/details/102554768

版权

Vue.js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

事件修饰符

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

综合示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .grandfather {
            width: 400px;
            height: 400px;
            background: red;
        }

        .father {
            width: 200px;
            height: 200px;
            background: blue;
        }
        .son {
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            1.阻止冒泡事件 修饰符 - stop
            2.变成捕获事件   - capture
            3.阻止默认事件  -  prevent
            4.自身事件      - self
            5.事件只能点击一次  - once
         -->
        <div class="grandfather" @click.self="gr">
            grandfather
            <div class="father" @click.stop="fa">
                father
                <div class="son" @click.capture="son">son</div>
            </div>
        </div>
        <!--弹出111，不会跳转页面-->
        <a href="http://www.baidu.com" @click.prevent="alert(111)">百度一下下</a><br>
        <!--只会触发一次-->
        <button @click.once="say">点击</button>
    </div>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                gr() {
                    console.log("祖父元素 自身事件")
                },
                fa() {
                    console.log("父亲元素 阻止冒泡")
                },
                son() {
                    console.log("儿子元素 捕获阶段")
                },
                say(){
                    alert("hello")
                }

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

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

组合键示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <button @click.once="say">打开</button> -->
        <button @keyup.ctrl+@keyup.c="say">打开</button>
    </div>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                say() {
                    alert("helloworld!!!")
                }
            }
        })
    </script>
</body>
</html>