v-on 及其事件修飾符

Ozzie發表於2019-12-17
事件

本篇講述了 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>

相關文章