vue點擊事件的修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a>

/* 模板語法 */
<template>
  <div>
    <!-- 阻止單擊事件繼續傳播 -->
    <div @click="toDo">
      <a v-on:click.stop="doThis()">阻止單擊事件繼續傳播</a>
    </div>
  </div>
</template>
<script>
export default {
  name: "templateSyntax",
  data() {
    return {
    };
  },
  methods: {
    doThis() {
      console.log("單擊事件");
    },
    toDo() {
      console.log("外層的事件");
    }
  }
};
</script>
沒有stop修飾符號會在控制台看到單擊事件，外層事件，有stop修飾符號只會看到單擊事件

<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form> 使用了prevent點擊提交事件不會刷新頁面

/* 事件修飾符 */
<template>
  <div>
    <div @click="toDo">
      <p v-on:click.stop="doThis">stop阻止單擊事件繼續傳播</p>
    </div>
    <div id="hdcms">
      <!--方法一:原生-->
      <form action @submit="post1('hdphp',$event)">
        <h1>{{times}}</h1>
        <button>提交</button>
      </form>

      <!--方法二:修復符操作-->
      <form action @submit.prevent="post2('hdphp')">
        <h1>{{times}}</h1>
        <button>提交</button>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  name: "clickModifier",
  data() {
    return {
        times:new Date()
    };
  },
  methods: {
    doThis() {
      console.log("doThis");
    },
    toDo() {
      console.log("toDo");
    },
    // 方法一:修復符操作
    post1(num, event) {
      event.preventDefault(); //默認不刷新頁面提交
      alert(num);
    },
    //            方法二:修復符操作
    post2(num) {
      alert(num);
    }
  }
};
</script>

<!-- 修飾符可以串聯 --> 
<a v-on:click.stop.prevent="doThat"></a>
 <!-- 只有修飾符 --> 
<form v-on:submit.prevent></form> 
<!-- 添加事件監聽器時使用事件捕獲模式 --> 
<!-- 即內部元素觸發的事件先在此處理，然后才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> 
<!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div>    
使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。