vue指令中的修飾符怎么使用

這篇文章主要介紹“vue指令中的修飾符怎么使用”，在日常操作中，相信很多人在vue指令中的修飾符怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue指令中的修飾符怎么使用”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

對(duì)比一下vue中的指令修飾符和dom事件中的event對(duì)象

在說vue中的修飾符之前，我門用的是dom操作中用過的event對(duì)象的常用方法/屬性，event的屬性有哪些呢? 我用過的event的屬性如下：

1、阻止默認(rèn)事件跳轉(zhuǎn)(例如a標(biāo)簽的href的跳轉(zhuǎn)、還有form表單的提交)

event.preventDefault()

2、阻止冒泡事件(例如父級(jí)元素綁定事件，子元素也綁定事件，如果不取消冒泡，則點(diǎn)擊子
    元素也會(huì)觸發(fā)父元素的事件

event.stopPropagation()

3、阻止后續(xù)事件觸發(fā)，寫在A中，則后續(xù)注冊(cè)的事件B不會(huì)被觸發(fā)（例如按鈕綁定兩個(gè)事件，
    通過 [優(yōu)先級(jí)]的方式注冊(cè)了A和B，在運(yùn)行A的時(shí)候不運(yùn)行B）

event.stopImmediatePropagation()

4、綁定事件的那個(gè)元素，例如ul綁定事件，然后點(diǎn)擊li，則currentTarget返回就是ul

event.currentTarget

5、發(fā)生事件的那個(gè)元素，例如ul綁定事件，然后點(diǎn)擊li，則target返回就是點(diǎn)擊的那個(gè)li。  

event.target

以上這些都是在dom樹中操作的一些屬性/方法，但使用vue框架就不需要這些dom的操作了，vue中的方法有更好更簡(jiǎn)潔的語法修飾符來實(shí)現(xiàn)各種功能。

事件修飾符

在事件處理程序中，總會(huì)有一些功能需要修飾，比如阻止某些默認(rèn)事件跳轉(zhuǎn)還有提交事件不再重載頁面等等。為了解決這個(gè)問題,vuejs給v-on提供了一些事件修飾符。修飾符是由點(diǎn)開頭的指令后綴名來表示

事件修飾符有哪些呢？

• .stop

• .prevent

• .capture

• .once

.stop

沒加 .stop的打印的結(jié)果

加了 .stop的打印的結(jié)果

源代碼：

  <template >
  <div @click="fnFather">
    <!-- 阻止事件冒泡 -->
    <button @click.stop="fn">阻止事件冒泡</button>
  </div>
</template>
<script>
export default {
  methods: {
    fn() {
      console.log("按鈕點(diǎn)擊了");
    },
    fnFather() {
      console.log("父元素 點(diǎn)擊了");
    },
  },
};
</script>
<style>
</style>

得出結(jié)論

當(dāng)你點(diǎn)擊子元素時(shí),父元素也會(huì)被觸發(fā)，這就是事件冒泡。
使用 .stop 來阻止事件冒泡 也就是阻止子元素的事件傳播到父元素的身上去。

.prevent

沒有加 .prevent屬性的效果

加了 .prevent屬性的效果

源代碼

<template >
  <div>
    <!-- .prevent 阻止默認(rèn)事件跳轉(zhuǎn) -->
    <a href="http://taobao.com" @click.prevent="eve">阻止跳轉(zhuǎn)到淘寶</a>
  </div>
</template>
<script>
export default {
  methods: {
    eve() {
      console.log("按鈕點(diǎn)擊了");
    },
  },
};
</script>

得出結(jié)論

a標(biāo)簽中的href屬性會(huì)跳轉(zhuǎn)頁面，當(dāng)你使用a標(biāo)簽做一些功能時(shí)，不需要默認(rèn)跳轉(zhuǎn)時(shí)，就可以使用 .prevent 來阻止默認(rèn)事件跳轉(zhuǎn)。 其實(shí)還有表單的提交事件也使用 .prevent 來阻止默認(rèn)事件跳轉(zhuǎn)

.capture

.capture 它的含義是事件捕獲 雖然不常用 但還是要了解的

下面寫了一個(gè)結(jié)構(gòu)四個(gè)div的盒子

<template >
  <div @click="hand('最外層')">
    <div class="grandfather" @click="hand('抓到爺爺了')">
      <div class="father" @click="hand('抓到爸爸了')">
        <div class="son" @click="hand('抓到兒子了')"></div>
      </div>
    </div>
  </div>
</template>

沒有設(shè)置 .capture  它的順序是從內(nèi)往外執(zhí)行事件 這種是冒泡事件

源代碼

<template >
  <div @click="hand('最外層')">
    <div class="grandfather" @click="hand('抓到爺爺了')">
      <div class="father" @click="hand('抓到爸爸了')">
        <div class="son" @click="hand('抓到兒子了')"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    hand(val) {
      console.log(val);
    },
  },
};
</script>
<style>
div {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 800px;
  height: 800px;
  background-color: green;
}
.grandfather {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
  background-color: #ccc;
}
.father {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  background-color: red;
}
.son {
  width: 100px;
  height: 100px;

  background-color: skyblue;
}
</style>

如圖所示

設(shè)置了 .capture  它就會(huì)從外往里執(zhí)行  可以給單個(gè)設(shè)置也可以給多個(gè)設(shè)置

源代碼

<template >
  <div @click.capture="hand('最外層')">
    <div class="grandfather" @click.capture="hand('抓到爺爺了')">
      <div class="father" @click.capture="hand('抓到爸爸了')">
        <div class="son" @click.capture="hand('抓到兒子了')"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    hand(val) {
      console.log(val);
    },
  },
};
</script>
<style>
div {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 800px;
  height: 800px;
  background-color: green;
}
.grandfather {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
  background-color: #ccc;
}
.father {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  background-color: red;
}
.son {
  width: 100px;
  height: 100px;

  background-color: skyblue;
}
</style>

如圖所示：

得出結(jié)論

冒泡是從里往外冒，捕獲是從外往里捕.capture 它是事件捕獲  當(dāng)它存在時(shí)，會(huì)先從外到里的捕獲，剩下的從里到外的冒泡。

.once

.once 含義是點(diǎn)擊事件將只會(huì)觸發(fā)一次 沒有設(shè)置  .once  就是普通的函數(shù)正常執(zhí)行

<template >
  <button @click="hand">函數(shù)只會(huì)執(zhí)行一次</button>
</template>
<script>
export default {
  methods: {
    hand() {
      console.log("函數(shù)只會(huì)執(zhí)行一次,再次點(diǎn)擊不會(huì)執(zhí)行");
    },
  },
};
</script>

設(shè)置了 .once  就只能執(zhí)行一次

<template >
  <button @click.once="hand">函數(shù)只會(huì)執(zhí)行一次</button>
</template>
<script>
export default {
  methods: {
    hand() {
      console.log("函數(shù)只會(huì)執(zhí)行一次,再次點(diǎn)擊不會(huì)執(zhí)行");
    },
  },
};
</script>

得出結(jié)論

.once  就只能執(zhí)行一次，再次點(diǎn)擊就不會(huì)執(zhí)行了

到此，關(guān)于“vue指令中的修飾符怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！