Vue核心基础2：事件处理和事件修饰符

最新推荐文章于 2024-09-30 16:19:08 发布

是小蟹呀^

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量834

点赞数 9

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

本文链接：https://blog.csdn.net/m0_61495539/article/details/136101290

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1 事件处理

1.1 点击事件

<body>
    <div id="root">
        <h1>姓名： {{ name }}</h1>
        <h1>地址： {{ address }}</h1>
        <!-- <button v-on:click="showInfo">提示信息</button> -->
        <!-- 简写形式 -->
        <button @click="showInfo1">提示信息1(不传参)</button>
        <button @click="showInfo2($event, 66)">提示信息2(传参)</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '张三',
                address: '北京'
            },

            methods: {
                showInfo1(event) {
                    // alert('同学你好！')
                    console.log(event.target.tagName)
                    console.log(this)  // 此处的this是vm
                },
                showInfo2(event, number) {
                    console.log(event.target.tagName)
                    console.log(number)
                }
            }
        })
    </script>
</body>

2 事件修饰符

2.1 prevent 阻止默认事件

<a href="http://www.baidu.com" @click.prevent="showInfo">百度</a>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '张三',
                address: '北京'
            },

            methods: {
                showInfo(e) {
                    alert('同学你好！')
                    // e.preventDefault() // 阻止默认行为 ->  vue中有简洁的写法 @click.prevent
                }
            }
        })
    </script>

2.2 stop 阻止事件冒泡

<div class="demo1" @click="showInfo1">
       <button @click.stop="showInfo1">点我提示信息</button>
</div>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '张三',
                address: '北京'
            },
            methods: {
                showInfo1(e) {
                    alert('同学你好 1111')
                    // e.stopPropagation() // 阻止事件冒泡 ->  vue中有简洁的写法 @click.stop
                },
            }
        })
    </script>

2.3 once 事件只触发一次

<button @click.once="showInfo2">点我提示信息</button>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '张三',
                address: '北京'
            },

            methods: {
                showInfo2(e) {
                    alert('同学你好 2222')
                },
            }
        })
    </script>

2.4 capture 使用事件的捕获模式, 正常在冒泡阶段处理事件，通过这个可以在捕获阶段处理事件

<div class="demo1" @click.capture="showInfo3(1)">
      <button @click="showInfo3(2)">点我提示信息</button>
</div>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '张三',
                address: '北京'
            },

            methods: {
                showInfo3(msg) {
                    console.log(msg)   // 先1后2
                    // 原本在冒泡阶段处理事件，应是先输出2，再输出1
                },
            }
        })
    </script>

2.5 self 只有event.target是当前操作的元素时才触发事件

<!-- 在下述中，因为当前操作的元素是button,所以不触发div -->
<div class="demo1" @click.self="showInfo4">
      <button @click="showInfo4">点我提示信息</button>
</div>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '张三',
                address: '北京'
            },

            methods: {
                showInfo4(e) {
                    console.log(e.target)  // <button>点我提示信息</button>
                },
            }
        })
    </script>

2.6 passive 事件的默认行为立即执行，无需等待事件回调执行完毕


        <!-- @scroll 为滚动条滚动 -->
        <!-- <ul @scroll="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul> -->
        <!-- @wheel 为鼠标滚轮滚动  但是滚到最后的位置，仍然触发 -->
        <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '张三',
                address: '北京'
            },

            methods: {
                demo() {
                    console.log('滚动了')
                }
            }
        })
    </script>

3 键盘事件

<body>
    <div id="root">

        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">

        <!-- CapsLock  切换大小写键， 写法需要用斜杠连接才有效果 -->
        <input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">

    </div>
    <script>
        // Vue.config.keyCodes.huiche = 13  // 定义了一个回车别名按键
        const vm = new Vue({
            el: '#root',
            data: {
                name: 'Vue'
            },

            methods: {
                showInfo(e) {
                    // if (e.keyCode !== 13) return    传统做法
                    console.log(e.target.value)
                    // console.log(e.key, e.keyCode)
                }
            }
        })
    </script>
</body>

总结：

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

2. Vue未提到别名的按键，可以使用按键原始的Key值绑定，但注意用短横线连接

3. 系统修饰键（用法特殊）：ctrl, shfit, alt, win/meta
(1).这几个键配合keyup使用：按下修饰键，再按下其他键，随后释放其他键，事件才被触发（想要指定特定的键可以，比如指定y： @keyup.ctrl.y）
(2).配合keydown使用：正常触发事件

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

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