【vue笔记】3.事件修饰符

修饰符 功能
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只有事件在该元素本身触发时触发回调(别人影响不了它,它也影响不了别人)
.once 事件只触发一次

.stop

由于vue界面的特殊性,组件一般是一层层叠加起来的,所以触发中心事件时,周边事件也会随之触发,即冒泡。例如,对于下面的vue结构:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    <style>
        .inner{
            height: 150px;
            background-color: aquamarine
        }
    style>
head>
<body>
    <div id="app">
      <div class="inner" @click="div1Handler">
          <input type="button" value="button" @click="btnHandler">
      div>
    div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'vue test'
            },
            methods:{
                div1Handler(){
                    console.log('innner div event')
                },
                 btnHandler(){
                    console.log('btn button event')
                }
                }
            })    
    script>
body>
html>

界面呈现为:
【vue笔记】3.事件修饰符_第1张图片
当我们点击中心的button按钮时,触发的事件为:
在这里插入图片描述
可以看到点击了按钮的同时,背景区域的事件也被触发了。为了避免这种情况,可以使用.stop修饰符。将下面的代码:

<input type="button" value="button" @click="btnHandler">

修改为:

<input type="button" value="button" @click.stop="btnHandler">

再次点击按钮后,显示触发的事件为:
在这里插入图片描述

.prevent

下面这个.prevent可以阻止页面跳转:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    <style>
        .inner{
            height: 150px;
            background-color: aquamarine
        }
    style>  
head>
<body>
    <div id="app">
        <a href="http://www.baidu.com" @click.prevent="linkclick">baidua>
    div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'vue test'
            },
            methods:{
                linkclick(){
                    console.log('link event')
                }
                }
            })    
    script>
body>
html>

本来点击链接后会跳转到百度的页面,但是这里使用.prevent修饰符后就不会跳转了。

.capture

还是上面那个.stop部分的代码修改一下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    <style>
        .inner{
            height: 150px;
            background-color: aquamarine
        }
    style>
head>
<body>
    <div id="app">
      <div class="inner" @click.capture="div1Handler">
          <input type="button" value="button" @click="btnHandler">
      div>
    div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'vue test'
            },
            methods:{
                div1Handler(){
                    console.log('innner div event')
                },
                 btnHandler(){
                    console.log('btn button event')
                }
                }
            })    
    script>
body>
html>

显示的界面同样为:
【vue笔记】3.事件修饰符_第2张图片
这次点击按钮之后,会触发绿色背景板的事件div1Handler再触发按钮事件btnHandler。

.self

还是同样一段代码,在click之后添加修饰符.self此时点击按钮和背景板时只有自己各自的事件会响应。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    <style>
        .inner{
            height: 150px;
            background-color: aquamarine
        }
    style>
head>
<body>
    <div id="app">
      <div class="inner" @click.self="div1Handler">
          <input type="button" value="button" @click.self="btnHandler">
      div>
    div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'vue test'
            },
            methods:{
                div1Handler(){
                    console.log('innner div event')
                },
                 btnHandler(){
                    console.log('btn button event')
                }
                }
            })    
    script>
body>
html>

.once

顾名思义,修饰符对应的事件只会触发一次:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    <style>
        .inner{
            height: 150px;
            background-color: aquamarine
        }
    style>
head>
<body>
    <div id="app">
      <div class="inner" @click.self="div1Handler">
          <input type="button" value="button" @click.once="btnHandler">
      div>
    div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'vue test'
            },
            methods:{
                div1Handler(){
                    console.log('innner div event')
                },
                 btnHandler(){
                    console.log('btn button event')
                }
                }
            })    
    script>
body>
html>

你可能感兴趣的:(vue)