目錄

• 1、監聽事件
• 2、傳入event引數
• 3、事件修飾符
• 案例1：阻止單擊事件繼續傳播
• 案例2：提交事件不再過載頁面

1、監聽事件

可以用 v-on 指令監聽 DOM 事件，並在觸發時執行一些 程式碼。事件程式碼可以直接放到v-on後面，也可以寫成一個函式。

示例程式碼如下：

<div id="app">
  <p>{{counter}}</p>
  <button @click="counter += 1">+1</button>
  <button @click="subtract(10)">-10</button>
</div>
<script>
  const app = new ({
    el: "#app",data: {
      counter: 0
    },methods: {
      subtract(value){
        this.counter-=value
      }
    }
  })
</script>
 

2、傳入event引數

如果在事件處理函式中，想要獲取原生的DOM事件，那麼在html程式碼中，呼叫的時候，可以傳遞一個$event引數。

示例程式碼如下：

<button v-on:click="subtract(10,$event)">減10</button>
...
<script>
...
methods: {
    subtract: function(value,event){
        this.count -= value;
        console.log(event);
    }
}
...
</script>
 

3、事件修飾符

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

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

• .stop：event.stopPropagation，阻止事件冒泡。
• .prevent：event.preventDefault，阻止預設行為
• .capture：事件捕獲。
• .self：代表當前這個被點選的元素自身。
• .once：這個事件只執行一次。
• .passive：在頁面滾動的時候告訴瀏覽器不會阻止預設的行為，從而讓滾動更加順暢。

案例1：阻止單擊事件繼續傳播

<div id="app">
  <div @click="divClick">
    1111
    <button @click.stop="btnClick">按鈕</button>
  </div>
</div>
<script>
  let app = new Vue({
    el: "#app",data: {
      count: 0
    },methods: {
      divClick(){
        console.log("divClick")
      },btnClick(){
        console.log("btnClick")
      }
    }
  });
</script>

案例2：提交事件不再過載頁面

<div id="app">
  <form action="">
    <label>
      <input客棧 type="text">
    </label>
    <label>
      <input type="submit" value="提交">
    </label>
  </form>
</div>
<script>
  zwRRnyYtYconst app = new Vue({
    el: "#app",data: {
    }
  })
</script>

以上是最標準的提交資料的程式碼，提交完後會自動跳轉到百度，但是現在有個需求，我們希望輸入完資料後，不會自動跳轉到百度，而是通過自己的方法，先處理資料，處理完後，自己指定頁面跳轉，

程式碼如下：

<div ihttp://www.cppcns.comd="app">
  <form action="https://www.baidu.com">
    <label>
      <input type="text">
    </label>
    <label>
      <input type="submit" value="提交" @click.prevent="testClick">
    </label>
  </form>
</div>
<script>
  const app = new Vue({
    el: "#app",methods: {
      testClick(){
      }
    }
  })
</script>

這裡我們給submit綁定了一個點選事件，並使用.prevent阻止了他的預設行為

到此這篇關於關於Vue v-on指令的使用 的文章就介紹到這了,更多相關Vue v-on指令內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！