vue十：vue基础之事件修饰符和按键修饰符

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一：事件修饰符

官网对事件修饰符说明：https://cn.vuejs.org/v2/guide/events.html

冒泡场景：当触发li上的点击事件的时候，会一直往上找，找到ul的事件

解决方法

第一种方法：js处理方式，把事件传给函数，在函数中阻止冒泡

第二种方法：vue提供的事件修饰符.stop

使用.prevent事件阻止默认行为，如跳转或提交表单的场景，

使用.self，当只有点击本身这个标签时才会触发事件，如果是子孙元素冒泡上来的，不会触发此事件

在父元素上使用.self

点击ul

.once：只能触发一次

<!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'>
    <script src='./vue.js'></script>
    <title></title>
</head>
<body>
<div id='app'>
    <ul @click.self="handleULClick()">
        <!--        <li @click="handleLiClick($event)">111</li>-->
        <li @click.stop="handleLiClick1($event)">111</li>
        <li @click="handleLiClick1()">222</li>
        <li @click.once="handleLiClick1()">333</li>
    </ul>

    <a href="https://www.baidu.com/" @click.prevent="handleChangPage">点击跳转</a>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleULClick() {
                console.log('handleULClick')
            },
            handleLiClick1() {
                console.log('handleLiClick1')
            },
            handleLiClick(event) {
                console.log(event)
                event.stopPropagation();  // 阻止冒泡
                console.log('handleLiClick')
            },
            handleChangPage() {
                console.log('handleChangPage')
            }
        }
    })
</script>
</body>
</html>

二： 按键修饰符

此时的情况是按下任何按键都会触发，如果想要控制按下指定的按键才触发事件，

方法一：使用按键的键值，如回车键的键值是13

方法二：事件修饰符

由于按键修饰符并没有提供所有按键，所以同样也支持键值

<!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'>
    <script src='./vue.js'></script>
    <title></title>
</head>
<body>
<div id='app'>
    <!--    <ul @click.self="handleULClick()">-->
    <!--        &lt;!&ndash;        <li @click="handleLiClick($event)">111</li>&ndash;&gt;-->
    <!--        <li @click.stop="handleLiClick1($event)">111</li>-->
    <!--        <li @click="handleLiClick1()">222</li>-->
    <!--        <li @click.once="handleLiClick1()">333</li>-->
    <!--    </ul>-->

    <!--    <a href="https://www.baidu.com/" @click.prevent="handleChangPage">点击跳转</a>-->
    <!--    <input type="text" @keyup="handleKeyup($event)">-->
    <!--    <input type="text" @keyup.enter="handleKeyup1($event)">-->
    <input type="text" @keyup.13="handleKeyup1($event)">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleKeyup1(event) {
                console.log('按下的是回车键，执行事件')
            },
            handleKeyup(event) {
                console.log(event)
                console.log(event.keyCode)
                if (event.keyCode === 13) {
                    console.log('按下的是回车键，执行事件')
                }
            },
            handleULClick() {
                console.log('handleULClick')
            },
            handleLiClick1() {
                console.log('handleLiClick1')
            },
            handleLiClick(event) {
                console.log(event)
                event.stopPropagation();  // 阻止冒泡
                console.log('handleLiClick')
            },
            handleChangPage() {
                console.log('handleChangPage')
            }
        }
    })
</script>
</body>
</html>

以上是 vue十：vue基础之事件修饰符和按键修饰符 的全部内容， 来源链接： utcz.com/z/378191.html

回到顶部