Vue3.0 事件修饰符:VOA模式

无盐海

已于 2023-11-06 13:47:17 修改

阅读量180

点赞数

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

于 2023-10-12 18:18:47 首次发布

本文链接：https://blog.csdn.net/Fanbin168/article/details/133796584

版权

Vue 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

事件修饰符

Vue为v-on提供了事件修饰符。修饰符用 . 表示指令后缀，包含以下这些：

.stop //阻止冒泡：<a @click.stop="doThis"></a>
.prevent //阻止默认事件：<a @click.prevent="doThis"></a>， <form @submit.prevent="onSubmit"></form>
.self
.capture
.once
.passive

案列

<!DOCTYPE html>
<htmI 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>Document</title>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <style>
            .liColor {
                background-color: brown;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <a @click="handleAClick" href="https://www.baidu.com">A标签1</a> <br> <!--点击会跳转到百度-->
            <a @click.prevent="handleAClick" href="https://www.baidu.com">A标签2</a><br> <!--阻止a标签的默认事件，所以点击不会跳转到百度-->
            <a @click.prevent href="https://www.baidu.com">A标签3</a> <!--点击不会跳转到百度-->

            <!--.stop修饰符：阻止元素冒泡-->

            <ul @click="handleUlClick">
                <li @click="handleLiClick">LI1</li> <!--点击它会出发handleUlClick-->
                <li @click.stop="handleLiClick">LI2</li> <!--点击它不会出发handleUlClick-->

                <!--链式写法：阻止a标签的冒泡，同时取消a标签的默认事件，所以点击它不会跳转到百度-->
                <li><a @click.stop.prevent="handleAClick" href="https://www.baidu.com">A标签</a></li>

            </ul>

            <!--.prevent修饰符:取消元素的默认事件-->

            <!--请勿同时使用 .passive 和 .prevent，因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则 .prevent 会被忽略，并且浏览器会抛出警告-->

            <form action="" @submit="submitEvent()"> <!--单中的 type="submit"类型的button表单做提交可以正常提交-->
                <button type="submit">提交1</button>
            </form>
            <form action="" @submit.prevent="submitEvent()"> <!--阻止表单中的 type="submit"类型的button表单做提交处理-->
                <button type="submit">提交2</button>
            </form>
            <form action="">
                <button type="submit" @click.prevent>提交3</button><!--阻止表单中的 type="submit"类型的button表单做提交处理-->
            </form>

            <!--.self修饰符-->

            <ul @click.self="handleUlClick"><!--只有点击ul自己才会才会触发click事件，通过子元素冒泡上来的无法被触发click事件-->
                <li @click="handleLiClick">LI1</li> <!--点击它不会出发父级的handleUlClick事件，因为父元素ul上有.self修饰符-->
            </ul>


            <!--.once修饰符:点击事件最多被触发一次-->

            <div>
                {{count}}
                <!--这个就能点击一次，超过一次就将click事件解绑了，所以再点击就无效了，所以这里点击一次count的值最多能增加到1，无法增加到2-->
                <button @click.once="count++">自增1</button>
            </div>
            

            <script>
                var app = Vue.createApp({
                    data() {
                        return {
                            count: 0
                        }
                    },
                    methods: {
                        handleUlClick() { alert('点击了ul') },
                        handleLiClick() { alert('点击了li') },
                        handleAClick() { alert('点击了A标签') },
                        submitEvent() {
                            return false;
                            //里面可以做一些控件填写校验等。
                        }
                    }

                }).mount("#app")
            </script>
        </div>
    </body>
</htmI>

按键修饰符

<!DOCTYPE html>
<htmI 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>Document</title>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <style>
            .liColor {
                background-color: brown;
            }
        </style>
    </head>

    <body>
        <div id="app">

            <!--按键事件JS的做法-->
            <input type="text" @keyup="JshandleKeyUp">

             <!--按键事件Vue的做法-->

            <input type="text" @keyup.enter="VueHandleKeyUpEnter"> <!--回车键被弹起-->
            <input type="text" @keyup.space="VueHandleKeyUpSpace"> <!--空格键被弹起-->
            <input type="text" @keyup.esc="VueHandleKeyUpeEsc"> <!--ESC键被弹起-->
            <input type="text" @keyup.a="VueHandleKeyUpA"> <!--可以直接写键盘上面的字母来对应，比如A键就.a B键就.b C键就.c 非常方便-->
            <input type="text" @keyup.a.b="VueHandleKeyUpAB"> <!--还可以通过链式写法，支持多个键同时被弹起的操作，如：AB键同时被弹起-->
            <input type="text" @keyup.q.w.e="VueHandleKeyUpQWE"> <!--不知道为什么，这种带字母的三个按键链式写法，只有其中任何一个被弹起都会被触发-->

            <input type="text" @keyup.ctrl.space="VueHandleKeyUpCtrlAndSpace"> <!--还可以通过链式写法，支持多个键同时被弹起的操作，如：AB键同时被弹起-->


            <script>
                var app = Vue.createApp({
                    data() {
                        return {
                            count: 0
                        }
                    },
                    methods: {
                        JshandleKeyUp(evt) {
                            if (evt.keyCode === 13) {
                                alert('Enter键被弹起')
                            }
                            else if (evt.keyCode === 32) {
                                alert('空格键被弹起')
                            } else if (evt.keyCode === 33) {
                                alert('PgUp键被弹起')
                            }else if (evt.keyCode === 34) {
                                alert('PgDn键被弹起')
                            }  else if (evt.keyCode === 46) {
                                alert('Delete键被弹起')
                            } else if (evt.keyCode === 27) {
                                alert('Esc键被弹起')
                            }else{
                                alert(evt.keyCode)
                            }
                        },
                        VueHandleKeyUpEnter(){
                            alert('Enter键被弹起')
                        },
                        VueHandleKeyUpSpace(){
                            alert('空格键被弹起')
                        },
                        VueHandleKeyUpeEsc(){
                            alert('esc键被弹起')
                        },
                        VueHandleKeyUpA(){
                            alert('A键被弹起')
                        },
                        VueHandleKeyUpAB(){
                            alert('AB键同时被弹起')
                        },
                        VueHandleKeyUpQWE(){
                            alert('Q或者W或者E被弹起')
                        },
                        VueHandleKeyUpCtrlAndSpace(){
                            alert('Ctrl+空格键同时被弹起')
                        }

                    }

                }).mount("#app")
            </script>
        </div>
    </body>
</htmI>

表单修饰符

HTML 元素：change 事件
当用户更改 <input>、<select> 和 <textarea> 元素的值时，change 事件在这些元素上触发。和 input 事件不同的是，并不是每次元素的 value 改变时都会触发 change 事件。

文本输入元素
对于像 <input type="text"> 这样的元素，change 事件在控件失去焦点前都不会触发。

案列

<!DOCTYPE html>
<htmI 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>Document</title>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    </head>

    <body>
        <div id="app">
            <!-- v-model.lazy -->

            <!-- 这个v-model其实就是v-on:input原生事件的语法糖，只要input的value值一发生变化就立即被监听到 -->
            {{myname}} <input type="text" v-model="myname">

             <!-- 这个v-model.lazy其实就是v-on:change原生事件的语法糖，只要input的value值一发生变化并且input标签失去焦点后才会被监听到 -->
            {{myname}} <input type="text" v-model.lazy="myname"><!--所以这里你要是在input标签中不断的输入myname的值是不会变动，只有在input失去焦点后才会改变myname的值-->


            <!-- v-model.trim -->

            <!-- v-model.trim会清空value值两边的空格 -->
            <input type="text" v-model.trim="myname">


            <!-- v-model.number -->

            <!-- v-model.number会自动将value值转化成input类型，如果无法转化的就不会转化 -->
            <!--如果输入123 那么它的值就是int类型的123 -->
            <!--如果输入123abc 那么它的值就是int类型的123 -->
            <!--如果输入abc123 那么它的值就是string类型的abc123 -->
            <!--如果输入abc 那么它的值就是string类型的abc -->
            {{age}}
            <input type="text" v-model.number="age">

            <script>
                var app = Vue.createApp({
                    data() {
                        return {
                            myname: '',
                            age:0
                        }
                    },
                    //computed与methods的不同就是methods没有缓存，而computed会有缓存，如果计算的值不发生变化，第二次用到这个方法就直接从缓存中拿，就不需要再计算一次了。提高性能
                    //computed 应该值做计算而没有任何其他的副作用的事，这点非常重要，请务必牢记。举列来说就是不要在计算属性中做异步请求，或者更改DOM的事情。
                    computed: {},
                    methods: {}

                }).mount("#app")
            </script>
        </div>
    </body>
</htmI>