快捷導(dǎo)航

關(guān)于Vue v-on指令的使用

更新時(shí)間：2021年10月26日 16:34:26 作者：Silent丿丶黑羽

這篇文章主要介紹了關(guān)于Vue v-on指令的一些使用場(chǎng)景，比如監(jiān)聽事件、傳入event參數(shù)、事件修飾符的一些場(chǎng)景，下面就來看看具體使用的方法吧,需要的朋友可以參考一下

1、監(jiān)聽事件

可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。事件代碼可以直接放到v-on后面，也可以寫成一個(gè)函數(shù)。

示例代碼如下：

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

2、傳入event參數(shù)

如果在事件處理函數(shù)中，想要獲取原生的DOM事件，那么在html代碼中，調(diào)用的時(shí)候，可以傳遞一個(gè)$event參數(shù)。

示例代碼如下：

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

3、事件修飾符

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

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

.stop：event.stopPropagation，阻止事件冒泡。
.prevent：event.preventDefault，阻止默認(rèn)行為
.capture：事件捕獲。
.self：代表當(dāng)前這個(gè)被點(diǎn)擊的元素自身。
.once：這個(gè)事件只執(zhí)行一次。
.passive：在頁面滾動(dòng)的時(shí)候告訴瀏覽器不會(huì)阻止默認(rèn)的行為，從而讓滾動(dòng)更加順暢。

案例1：阻止單擊事件繼續(xù)傳播

<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>
  const app = new Vue({
    el: "#app",
    data: {
    }
  })
</script>

以上是最標(biāo)準(zhǔn)的提交數(shù)據(jù)的代碼，提交完后會(huì)自動(dòng)跳轉(zhuǎn)到百度，但是現(xiàn)在有個(gè)需求，我們希望輸入完數(shù)據(jù)后，不會(huì)自動(dòng)跳轉(zhuǎn)到百度，而是通過自己的方法，先處理數(shù)據(jù)，處理完后，自己指定頁面跳轉(zhuǎn)，

代碼如下：

<div id="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綁定了一個(gè)點(diǎn)擊事件，并使用.prevent阻止了他的默認(rèn)行為

到此這篇關(guān)于關(guān)于Vue v-on指令的使用的文章就介紹到這了,更多相關(guān)Vue v-on指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: