前置內(nèi)容：
1.vue指令基礎(chǔ)

指令修飾符介紹

所謂指令修飾符就是通過“.”指明一些指令后綴 不同的后綴封裝了不同的處理操作 —> 簡(jiǎn)化代碼

在學(xué)習(xí)指令的時(shí)候就提到過一些修飾符，可以簡(jiǎn)化代碼。這里在來系統(tǒng)學(xué)習(xí)一下修飾符

修飾符的使用

基礎(chǔ)使用

不加修飾符的input

<input v-model="a">

現(xiàn)在加一個(gè).trim

<input v-model.trim="a">

可以看到前面的空格全部沒了，但是中間的是不影響的，畢竟這不是把空格替換為空。

額外的，在el-input的trim修飾符做了額外的加強(qiáng).
這樣是不能在前后輸入空格的，輸入的會(huì)全部刪掉。這個(gè)效果發(fā)幾個(gè)圖演示不出，就不演示了。

<el-input v-model.trim="a"></el-input>

多修飾符

如果需要多修飾符直接在后面加就可以了

@事件名.stop.prevent —>可以連用 即阻止事件冒泡也阻止默認(rèn)行為

修飾符大全

v-model

.trim

輸入首尾空格過濾，使用里面演示過了

.number

輸入字符串轉(zhuǎn)為有效的數(shù)字
el-input同樣也有所不同

    <el-input v-model.number="a"></el-input>
    <input v-model.number="a" />

先輸入字母，發(fā)現(xiàn)沒用啥作用

先輸入數(shù)字在輸入字母,el-input會(huì)直接不顯示，但是input的會(huì)在取消焦點(diǎn)后刪除字母
還有我們會(huì)發(fā)現(xiàn)data中的a數(shù)據(jù)是數(shù)字格式，而不是和上面一樣的字符串。
其轉(zhuǎn)數(shù)字的能力也只是最大努力去實(shí)現(xiàn)，轉(zhuǎn)不了的會(huì)變成字母

input的會(huì)在取消焦點(diǎn)后刪除字母

如果是數(shù)字+字母在輸入了數(shù)字呢

會(huì)把出現(xiàn)字母開始，后面的所有全部刪掉

lazy

懶更新，原本是改變了就直接改了，加上后是失去焦點(diǎn)之后才會(huì)更新。
嘗試過，lazy修飾符在elementui 不起作用

    <el-input v-model.lazy="a"></el-input>
    <input v-model.lazy="a" />

input不實(shí)時(shí)刷新

el-input實(shí)時(shí)更新，lazy不起作用

v-bind

prop

作為一個(gè) DOM property 綁定而不是作為 attribute 綁定

這個(gè)我好像沒想到案例，留個(gè)心眼。

dom屬性和html屬性區(qū)別

• 屬性由 HTML 定義。屬性由 DOM 定義 （文檔對(duì)象模型）。
• 一些 HTML 屬性與屬性的 1：1 映射。 是一個(gè) 例。id
• 某些 HTML 屬性沒有相應(yīng)的屬性。 是 舉個(gè)例子。colspan
• 某些 DOM 屬性沒有相應(yīng)的屬性。 就是一個(gè)例子。textContent
• 許多 HTML 屬性似乎映射到屬性…但不在 你可能會(huì)想！

.camel

將 kebab-case attribute 名轉(zhuǎn)換為 camelCase

.sync

語法糖，會(huì)擴(kuò)展成一個(gè)更新父組件綁定值的 v-on 偵聽器。
簡(jiǎn)寫父子組件傳值用的，在組件介紹在說。

v-on 事件修飾符

寫為@事件.修飾符

.stop

阻止冒泡
相當(dāng)于調(diào)用 event.stopPropagation()。
首先看這樣的代碼

<template>
  <div id="app">
    <div style="height: 500px;width: 200px;background-color: red" @click="fu">
      <div style="height: 200px;width: 100%;background-color: blueviolet;" @click="zi">

      </div>
    </div>

  </div>
</template>
<script>

export default {
  methods: {
    fu() {
      console.log('父')
    },
    zi() {
      console.log('子')
    }
  }
}
</script>

點(diǎn)擊藍(lán)色區(qū)域

點(diǎn)擊紅色

我們發(fā)現(xiàn)點(diǎn)擊子的時(shí)候父也會(huì)執(zhí)行。因?yàn)樽拥膮^(qū)域有父。
我們可以在子的代碼修改如下

    zi(e) {
      e.stopPropagation()
      console.log('子')
    }

點(diǎn)擊就只有子了

而.stop可以省掉這個(gè)代碼，修改如下。

<template>
  <div id="app">
    <div style="height: 500px;width: 200px;background-color: red" @click="fu">
      <div style="height: 200px;width: 100%;background-color: blueviolet;" @click.stop="zi">

      </div>
    </div>

  </div>
</template>
<script>

export default {
  methods: {
    fu() {
      console.log('父')
    },
    zi() {
      console.log('子')
    }
  }
}
</script>

.prevent

阻止默認(rèn)行為
相當(dāng)于調(diào)用 event.preventDefault()。

最典型的就是a標(biāo)簽

    <a href="https://www.baidu.com"  @click="click">百度</a>

    click() {
      console.log(111)
    }

點(diǎn)擊后會(huì)打印，也會(huì)跳轉(zhuǎn)
在click加上prevent就只會(huì)打印了

    <a href="https://www.baidu.com" @click.prevent="click">百度</a>

.capture

添加事件偵聽器時(shí)使用 capture 模式。
監(jiān)聽子組件的冒泡事件，先觸發(fā)帶有該修飾符的元素。若有多個(gè)該修飾符，則由外而內(nèi)觸發(fā)。

    <div style="height: 500px;width: 200px;background-color: red" @click.capture="fu">
      <div style="height: 300px;width: 200px;background-color: aliceblue " @click="zhong">
        <div style="height: 200px;width: 100%;background-color: blueviolet;" @click="zi">

點(diǎn)擊藍(lán)，先出藍(lán)，在本被點(diǎn)擊的，在冒泡。

如果和stop使用會(huì)怎么樣，會(huì)發(fā)現(xiàn)父執(zhí)行中不執(zhí)行。
stop阻止的是冒泡，而capture不是冒泡

.self

只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)。
來做幾個(gè)小實(shí)驗(yàn)。

    <div style="height: 500px;width: 200px;background-color: red" @click="fu">
      <div style="height: 300px;width: 200px;background-color: aliceblue " @click.self="zhong">
        <div style="height: 200px;width: 100%;background-color: blueviolet;" @click="zi">

點(diǎn)擊中

點(diǎn)擊子

接下來在中加上stop

    <div style="height: 500px;width: 200px;background-color: red" @click="fu">
      <div style="height: 300px;width: 200px;background-color: aliceblue " @click.self.stop="zhong">
        <div style="height: 200px;width: 100%;background-color: blueviolet;" @click="zi">

點(diǎn)擊子，發(fā)現(xiàn)父執(zhí)行了，但是中不執(zhí)行，中不在冒泡中，所有沒用阻止冒泡

點(diǎn)擊中，發(fā)現(xiàn)只有中。

.native

監(jiān)聽組件根元素的原生事件。
在父組件中給子組件綁定一個(gè)原生的事件，就將子組件變成了普通的HTML標(biāo)簽，不加’. native’事件是無法觸 發(fā)的。

    <HelloWorld @click="fu"></HelloWorld>

此時(shí)點(diǎn)擊頁面沒用反應(yīng)

加上

    <HelloWorld @click.native="fu"></HelloWorld>

.once

只觸發(fā)一次回調(diào)。
點(diǎn)擊事件最多被觸發(fā)一次
后面的就不會(huì)在執(zhí)行了

.passive

以 { passive: true } 模式添加偵聽器
就是會(huì)執(zhí)行默認(rèn)行為
瀏覽器都會(huì)去查詢一下是否有preventDefault阻止該次事件的默認(rèn)動(dòng)作。我們加上passive就是為了告訴瀏覽器，不用查詢了，我們沒用preventDefault阻止默認(rèn)動(dòng)作。

鼠標(biāo)按鍵修飾符

這部分畢竟簡(jiǎn)單就演示一個(gè)了

.left

只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時(shí)觸發(fā)。

.right

只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時(shí)觸發(fā)。

   <div style="height: 500px;width: 200px;background-color: red" @click.right="fu">
      <div style="height: 300px;width: 200px;background-color: aliceblue " @click="zhong">
        <div style="height: 200px;width: 100%;background-color: blueviolet;" @click="zi">
        </div>

只有右鍵才執(zhí)行

.middle

只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時(shí)觸發(fā)。

.{keyCode | keyAlias}按鍵修飾符

只當(dāng)事件是從特定鍵觸發(fā)時(shí)才觸發(fā)回調(diào)。
最實(shí)用的就是input框按下回車進(jìn)行搜索啥的事件。

 <input v-model="a" @keyup.enter="fu"></input>

按下空格打印

還可以通過點(diǎn)按鍵碼來

    <input v-model="a" @keyup.65="loga"/>

65是a

別名就是.enter文章來源地址http://www.zghlxwxcb.cn/news/detail-633318.html

到了這里，關(guān)于前端學(xué)習(xí)---vue2--指令修飾符詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！