v-on 及其事件修饰符

本篇讲述了 v-on 的基础语法,也包括 v-on 的 "事件修饰符"


.stop:阻止事件冒泡

  1. 原HTML:
    <div class="inner" @click="first">
       <input type="button" value="戳他" @click="second">
    </div>
    <script>
    var vm = new Vue({
            el: ".inner",
            data: {},
            methods: {  // 这个methods 属性中定义了当前Vue 实例中使用到的方法
                    first(){
                            alert("进入了div")
                    },
                    second(){
                            alert("进入了btn")
                    }
            }
    })
    </script>
    • 如果事件没有任何修饰的话,那么点击按钮的结果是:
      1. 弹出:“进入了btn”
      2. 弹出:“进入了div”
  2. 添加 .stop 修饰符,那么就会停止往外冒:
    <!-- 将上面的代码中的<input>为修改如下 -->
    <input type="button" value="戳他" @click.stop="second">
    • btn 加了 .stop 之后的结果:
      只会弹出:“进入了btn”,而不会继续往上冒

.prevent:阻止默认行为

  1. 原HTML:
    <div class="inner">
       <a href="http://www.baidu.com" @click="goBaidu"> Go Baidu </a>
    </div>
    <script>
    var vm = new Vue({
            el: ".inner",
            data: {},
            methods: {  // 这个methods 属性中定义了当前Vue 实例中使用到的方法
                    goBaidu() {
                            alert("前往Baidu")
                    }
            }
    })
    </script>
    • 结果:
      1. 弹出“前往百度”
      2. 之后跳转到百度页面
  2. 添加 .prevent 修饰符,就会停止跳转:
    <!-- 将上面的代码中的<a>为修改如下 -->
    <a href="http://www.baidu.com" @click.prevent="goBaidu"> Go Baidu </a>
    • 结果:只会弹出“前往百度”,而没有真正地跳转到百度页面

.capture使用俘获机制进行触发事件

  1. 原HTML:
    <div class="inner" @click="first">
        <!-- .capture 使用捕获机制进行触发事件 -->
        <input type="button" value="戳他" @click="second">
    </div>
    <script>
    var vm = new Vue({
            el: ".inner",
            data: {},
            methods: {  // 这个methods 属性中定义了当前Vue 实例中使用到的方法
                    first(){
                            alert("进入了div")
                    },
                    second(){
                            alert("进入了btn")
                    }
            }
    })
    </script>
    • 结果:
      1. 进入btn
      2. 进入div
  2. 添加 .capture
    <!-- 将上面的代码中的<div>为修改如下 -->
    <div class="inner" @click.capture="first">
        <!-- .capture 使用捕获机制进行触发事件 -->
        <input type="button" value="戳他" @click="second">
    </div>

.self 只有点击自己时才会被触发:

  1. 原HTML:
    <div class="inner" @click.self="first">
        <!-- .self 只有点击自己时才会触发 -->
        <input type="button" value="戳他" @click="second">
    </div>
    <script>
    var vm = new Vue({
            el: ".inner",
            data: {},
            methods: { // 这个methods 属性中定义了当前Vue 实例中使用到的方法
                    first() {
                            alert("进入了div")
                    },
                    second() {
                            alert('点击了btn')
                    },
            }
    })
    </script>
    • 结果:
      1. 进入btn
      2. 进入div
  2. 添加 .self 之后:
    <!-- 将上面的代码中的<div>为修改如下 -->
    <div class="inner" @click.self="first">
        <!-- .self 只有点击自己时才会触发 -->
        <input type="button" value="戳他" @click="second">
    </div>
    • 结果:只进入btn

.once 只触发一次

  1. 原HTML:
    <a href="http://www.baidu.com" @click="goBaidu"> 只支持一次 Go Baidu </a>
    <script>
    var vm = new Vue({
            el: "#app",
            data: {},
            methods: { // 这个methods 属性中定义了当前Vue 实例中使用到的方法
                    goBaidu() {
                            alert("前往Baidu")
                    }
            }
    })
    </script>
  2. 加入 .once 之后:
    <!-- 将上面的代码中的<a>为修改如下 -->
    <a href="http://www.baidu.com" @click.prevent.once="goBaidu"> 只支持一次 Go Baidu </a>
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!