事件修饰符

最新推荐文章于 2024-05-07 20:46:49 发布

正在修炼web的小芮

最新推荐文章于 2024-05-07 20:46:49 发布

阅读量527

点赞数

分类专栏： vuejs 文章标签： vuejs

本文链接：https://blog.csdn.net/m0_71814235/article/details/126871133

版权

vuejs 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符
修饰符是由点开头的指令后缀来表示的比如v-on:click.stop阻止事件冒泡

事件修饰符.prevent

事件修饰符.prevent 作用：可以"阻止" 当前对象默认行为的发生

 <div id="app">
        <!-- v-bind:属性名="数据"  简写：属性名="数据" -->
        <!-- v-bind 指令：属性渲染指令，可以在任何标签上的数据 ，渲染数据 -->
        <div>
            <a v-bind:href="url">百度一下，就知道</a>
            <br>
            <a :href="url">百度一下，就知道</a>
            <hr>
            <!-- 事件修饰符 .prevent -->
            <!-- v-on:click.prevent 使用".prevent"修饰符 可以"阻止" 当前对象默认行为的发生 
         超链接标签的 默认行为 是 你点击它，它会进行页面的跳转  -->
            <a href="" @click.prevent="toThis($event)">查看</a>
        </div>


        <br><br><br><br><br>
        <div>
            <form action="" method="post">
                用户名:<input type="text">
                <br>
                <input type="submit" value="提交" @click.prevent="toThis($event)">
            </form>
        </div>
    </div>

    <script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return{
                url:'https://www.baidu.com/'
            }
        },
        methods:{
            toThis(event){
                console.log(event);
            }
        }

    })
</script>

预览效果

事件修饰符.stop

事件冒泡 ：当"一个元素"接收到"事件"的时候会把他"接收到的事件"传给自己的父级，一直到window

事件修饰符.stop的作用：阻止事件冒泡 (阻止单击事件继续传播 )

 <style>
        .outer{
            width: 600px;
            height: 600px;
            background-color: springgreen;
            margin: 10px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .middle{
            width: 400px;
            height: 400px;
            background-color: lightpink;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 事件修饰符  .stop  作用: 阻止 事件冒泡 -->
        <div class="outer" @click.stop="outer">
            <div class="middle" @click.stop="middle">
                <div class="inner" @click.stop="inner">
                    <button @click.stop="run">点击我</button>
                    <hr>
                    <!-- 事件修饰符，可以  连写  @click.stop.prevent  阻止冒泡行为   阻止当前对象的默认行为 -->
                    <a href="" @click.stop.prevent="run">点击，看一看</a>
                </div>
            </div>
        </div>
    </div>

    
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return{
                    
                }
            },
            methods:{
                outer(){
                    console.log('我是outer');
                },
                middle(){
                    console.log('我是middle');
                },
                inner(){
                    console.log('我是inner');
                },
                run(){
                    console.log('我是run');
                },
                
            }
        })
    </script>

预览效果

注意：事件修饰符，可以连写 @click.stop.prevent 阻止冒泡行为阻止当前对象的默认行为

事件修饰符.once

事件修饰符.once 的作用：只执行一次点击 (或者说事件，只执行一次！)

修饰符可以串联即阻止冒泡也阻止默认事件

只当在 event.target 是当前元素自身时触发处理函数即事件不是从内部元素触发的

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

  <div id="app">
        <p>{{number}}</p>
        <button @click="number++">点击，加1</button>
        <hr>
        <button @click.once="number++">点击，加1,只能执行一次</button>
    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return{
                    number:1,
                }
            },
            methods:{
                
            }
        })
    </script>

预览效果

按键修饰符

在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

常见的按键修饰符 有哪些呢？

.enter => enter键回车键

.tab => tab键（不能文本框里操作）

.delete (捕获“删除”和“退格”按键) => 删除键

.esc => 取消键

.space => 空格键

.up => 上

.down => 下

.left => 左

.right => 右

<div id="app">
        <h1>按键修饰符</h1>
        <p>
            <!-- 按键修饰符   .enter  回车键 -->
            <!-- 当你按回车键的时候，方法中心的方法(submit、showMsg)会被调用执行 -->
            <input type="text" v-model="uname" @keyup.enter="submit">
        </p>
        <p>
            <!-- 按键修饰符  .space  空格键 -->
            <!-- @keyup.space.enter   按键修饰符  可以 连写 -->
            <input type="text" v-model="msg" @keyup.space.enter="showMsg">
        </p>
        <p>
            <!-- 按键修饰符  可以使用对应按键的keyCode值  去  表示  -->
            <!-- 回车键的keyCode值是13 -->
            <!-- <input type="text" v-model="title" @keyup.enter="showTit"> -->
            <input type="text" v-model="title" @keyup.13="showTit">

        </p>
    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return{
                    uname:'',
                    msg:'',
                    title:'',
                }
            },
            methods:{
                submit(){
                    console.log('当你按回车键的时候，我们获取到你输入的值是：'+this.uname);
                },
                showMsg(){
                    console.log('当你按回车键的时候，我们获取到你输入的值是：'+this.msg);
                },
                showTit(event){
                    console.log(event);
                }
            }
        })
    </script>

预览效果

自定义事件修饰符

有时候Vue内置的修饰符可能无法满足我们的实际的项目需求，那么在Vue中可以通过config.keyCodes自定义按键修饰符别名

 <div id="app">
        <h1>自定义事件修饰符</h1>
    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return{
                    
                }
            },
            // 生命周期钩子函数
            // vue中实现页面按键事件，并获取  当前按键的keyCode值
            created(){
                document.onkeydown = function(e){
                    var ev = window.event || e;
                
                console.log(ev);
                // console.log('你按的是'+ ev.key +'键');

                // 如果你把想把按键范围缩小，当你按某个指定键的时候，我们才输出某些提示消息  ---》你按的是某键
                // 按其他键就会显示全部信息
                if(ev.keyCode == 87){
                    console.log('你按的是'+ ev.key +'键');
                };
             };
            },
            methods:{
                run(event){

                }
            }
        })
    </script>

预览效果

<div id="app">
        <h1>自定义事件修饰符</h1>
        <h2>Vue.config.keyCodes.自定义键名 = 键码， 可以去定制按键别名</h2>
        <input type="text" name="" id="" v-on:keydown.rr="run()">
    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        // 116  ---F5键
        // 自定义事件修饰符.rr
        Vue.config.keyCodes.rr = 116;
        var vm = new Vue({
            el:'#app',
            data(){
                return{
                    
                }
            },
            methods:{
                run(){
                    window.alert('你按了键盘上的F5键')
                }
            }
        })
    </script>

预览效果

案例讲解-计算器

  <style>
        #app{
            width: 600px;
            margin: 30px auto;
        }
</style>
</head>
<body>
    <div id="app">
        <input type="text" class="inp" v-model="num1"/>
        <select v-model="flag">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">x</option>
            <option value="/">/</option>
        </select>
        <!--点击回车，进行计算-->
        <input type="text" class="inp" v-model="num2" @keydown.enter="sums"/>
        <!--点击按钮进行计算-->
        <button @click="sums">=</button>
        <span>{{result}}</span>
 </div>
 <script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return{
                num1:'',
                num2:'',
                flag:'+',
                result:'',
            }
        },
        methods:{
            sums(){
                this.result = eval(this.num1+this.flag+this.num2)
            }
        }
    })
</script>

预览效果