当前位置：首页 > article >正文

Vue事件处理 - 事件修饰符

article 2025/2/12 14:43:58

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue事件处理 - 事件修饰符

事件修饰符

设置导航

stop修饰符

self修饰符

触发一次

阻止默认行为

模态框实现1

总结

事件修饰符

如下：

.stop

.prevent

.capture

.self

.once

设置导航

导航父元素和子元素设置不同的点击事件时。

示例如下：

<script src="../lib/vue.js"></script>
<div id="box">
    <ul @click="handleUlClick">
        <li @click="handleLiClick">11111</li>
        <li>22222</li>
        <li>33333</li>
    </ul>
</div>
<script>
    let vm = new Vue({
        el:'#box',
        data:{},
        methods : {
            handleUlClick() {
                console.log('ul click');
            },
            handleLiClick() {
                console.log('li click')
            }
        }
    })
</script>

当点击第一个li时，会触发两个事件。

效果如下：

stop修饰符

使用stop可以阻止冒泡(如果没有stop 则会触发两个点击事件)

示例如下：

<ul @click="handleUlClick">
    <li @click.stop="handleLiClick">11111</li>
    <li>22222</li>
    <li>33333</li>
</ul>

self修饰符

设置自己触发子点击不会触发。

示例如下：

<ul @click.self="handleUlClick">
    <li @click.stop="handleLiClick">11111</li>
    <li @click="handleLiClick">22222</li>
    <li>33333</li>
</ul>

触发一次

使用once修饰符，可用来实现只触发一次的事件。

示例如下：

<li @click.once="handleLiClick">33333</li>

阻止默认行为

可使用prevent修饰符来实现，阻止标签默认行为。

示例如下：

<a href="http://www.baidu.com" @click.prevent>跳转</a>

常用在form表单跳转之前，进行验证。

模态框实现1

利用事件和事件修饰符，简单实现一个登录窗口的显示和隐藏。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #overlay {
            margin: 0 auto;
            border : 1px solid red;
            width:400px;
            height:300px;
        }

        #center {
            text-align: center;
            margin:20px auto;
        }

        #center div {
            margin-top:20px;
        }
    </style>
</head>
<body>
<script src="../lib/vue.js"></script>
<div id="box">
    <!--模态框1-->
    <button @click="isShow=true">show</button>
    <div id="overlay" v-show="isShow" @click="isShow=false">
        <div id="center" @click.stop>
            <div>用户名：<input type="text"></div>
            <div>密码：<input type="password"></div>
            <div>
                <button>登录</button>
            </div>
        </div>
    </div>
</div>
<script>
  let vm = new Vue({
      el : '#box',
      data : {
          isShow : false
      },
      methods : {

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

效果如下：

点击show按钮显示登录窗口，然后点击登录窗口中表单外隐藏登录窗口。