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 协议》，转载必须注明作者和本文链接