真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

   
   
{{value}}

   
   
{{value}}

  ok

  ok

  ok

.once

這個(gè)修飾符的用法也是和名字一樣簡(jiǎn)單粗暴，只能用一次，綁定了事件以后只能觸發(fā)一次，第二次就不會(huì)觸發(fā)。

//鍵盤按壞都只能shout一次
ok

.capture

從上面我們知道了事件的冒泡，其實(shí)完整的事件機(jī)制是：捕獲階段--目標(biāo)階段--冒泡階段。
默認(rèn)的呢，是事件觸發(fā)是從目標(biāo)開始往上冒泡。
當(dāng)我們加了這個(gè).capture以后呢，我們就反過(guò)來(lái)了，事件觸發(fā)從包含這個(gè)元素的頂層開始往下觸發(fā)。

   
      obj1
      
        obj2
        
          obj3
          
            obj4
          
        
      
    
    // 1 2 4 3

從上面這個(gè)例子我們點(diǎn)擊obj4的時(shí)候，就可以清楚地看出區(qū)別，obj1，obj2在捕獲階段就觸發(fā)了事件，因此是先1后2，后面的obj3，obj4是默認(rèn)的冒泡階段觸發(fā)，因此是先4然后冒泡到3~

.passive

當(dāng)我們?cè)诒O(jiān)聽元素滾動(dòng)事件的時(shí)候，會(huì)一直觸發(fā)onscroll事件，在pc端是沒啥問(wèn)題的，但是在移動(dòng)端，會(huì)讓我們的網(wǎng)頁(yè)變卡，因此我們使用這個(gè)修飾符的時(shí)候，相當(dāng)于給onscroll事件整了一個(gè).lazy修飾符

...

.native

我們經(jīng)常會(huì)寫很多的小組件，有些小組件可能會(huì)綁定一些事件，但是，像下面這樣綁定事件是不會(huì)觸發(fā)的

必須使用.native來(lái)修飾這個(gè)click事件（即），可以理解為該修飾符的作用就是把一個(gè)vue組件轉(zhuǎn)化為一個(gè)普通的HTML標(biāo)簽，
注意：使用.native修飾符來(lái)操作普通HTML標(biāo)簽是會(huì)令事件失效的

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

剛剛我們講到這個(gè)click事件，我們一般是會(huì)用左鍵觸發(fā)，有時(shí)候我們需要更改右鍵菜單啥的，就需要用到右鍵點(diǎn)擊或者中間鍵點(diǎn)擊，這個(gè)時(shí)候就要用到鼠標(biāo)按鈕修飾符

.left   左鍵點(diǎn)擊

.right  右鍵點(diǎn)擊

.middle 中鍵點(diǎn)擊

ok

鍵值修飾符

其實(shí)這個(gè)也算是事件修飾符的一種，因?yàn)樗际怯脕?lái)修飾鍵盤事件的。
比如onkeyup，onkeydown啊

.keyCode

如果不用keyCode修飾符，那我們每次按下鍵盤都會(huì)觸發(fā)shout，當(dāng)我們想指定按下某一個(gè)鍵才觸發(fā)這個(gè)shout的時(shí)候，這個(gè)修飾符就有用了，具體鍵碼查看鍵碼對(duì)應(yīng)表

為了方便我們使用，vue給一些常用的鍵提供了別名

//普通鍵
.enter 
.tab
.delete //(捕獲“刪除”和“退格”鍵)
.space
.esc
.up
.down
.left
.right

//系統(tǒng)修飾鍵
.ctrl
.alt
.meta
.shift

可以通過(guò)全局 config.keyCodes 對(duì)象自定義按鍵修飾符別名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

我們從上面看到，鍵分成了普通常用的鍵和系統(tǒng)修飾鍵，區(qū)別是什么呢？
當(dāng)我們寫如下代碼的時(shí)候,我們會(huì)發(fā)現(xiàn)如果僅僅使用系統(tǒng)修飾鍵是無(wú)法觸發(fā)keyup事件的。

那該如何呢？我們需要將系統(tǒng)修飾鍵和其他鍵碼鏈接起來(lái)使用，比如

這樣當(dāng)我們同時(shí)按下ctrl+c時(shí)，就會(huì)觸發(fā)keyup事件。
另，如果是鼠標(biāo)事件，那就可以單獨(dú)使用系統(tǒng)修飾符。

      ok
      ok
      ok

大概是什么意思呢，就是你不能單手指使用系統(tǒng)修飾鍵的修飾符（最少兩個(gè)手指，可以多個(gè)）。你可以一個(gè)手指按住系統(tǒng)修飾鍵一個(gè)手指按住另外一個(gè)鍵來(lái)實(shí)現(xiàn)鍵盤事件。也可以用一個(gè)手指按住系統(tǒng)修飾鍵，另一只手按住鼠標(biāo)來(lái)實(shí)現(xiàn)鼠標(biāo)事件。

.exact(2.5新增)

我們上面說(shuō)了這個(gè)系統(tǒng)修飾鍵，當(dāng)我們像這樣綁定了click鍵按下的事件，驚奇的是，我們同時(shí)按下幾個(gè)系統(tǒng)修飾鍵，比如ctrl shift點(diǎn)擊，也能觸發(fā)，可能有些場(chǎng)景我們只需要或者只能按一個(gè)系統(tǒng)修飾鍵來(lái)觸發(fā)（像制作一些快捷鍵的時(shí)候），而當(dāng)我們按下ctrl和其他鍵的時(shí)候則無(wú)法觸發(fā)。那就這樣寫。
注意：這個(gè)只是限制系統(tǒng)修飾鍵的，像下面這樣書寫以后你還是可以按下ctrl + c，ctrl+v或者ctrl+普通鍵 來(lái)觸發(fā)，但是不能按下ctrl + shift +普通鍵來(lái)觸發(fā)。

ok

然后下面這個(gè)你可以同時(shí)按下enter+普通鍵來(lái)觸發(fā)，但是不能按下系統(tǒng)修飾鍵+enter來(lái)觸發(fā)。相信你已經(jīng)能聽懂了8~

v-bind修飾符

.sync(2.3.0+ 新增)

在有些情況下，我們可能需要對(duì)一個(gè) prop 進(jìn)行“雙向綁定”。不幸的是，真正的雙向綁定會(huì)帶來(lái)維護(hù)上的問(wèn)題，因?yàn)樽咏M件可以修改父組件，且在父組件和子組件都沒有明顯的改動(dòng)來(lái)源。我們通常的做法是

//父親組件

//js
func(e){
 this.bar = e;
}

//子組件js
func2(){
  this.$emit('update:myMessage',params);
}

現(xiàn)在這個(gè).sync修飾符就是簡(jiǎn)化了上面的步驟

//父組件
 
//子組件
this.$emit('update:myMessage',params);

這樣確實(shí)會(huì)方便很多，但是也有很多需要注意的點(diǎn)

1. 使用sync的時(shí)候，子組件傳遞的事件名必須為update:value，其中value必須與子組件中props中聲明的名稱完全一致(如上例中的myMessage，不能使用my-message)

2. 注意帶有 .sync 修飾符的 v-bind 不能和表達(dá)式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是無(wú)效的)。取而代之的是，你只能提供你想要綁定的屬性名，類似 v-model。

3. 將 v-bind.sync 用在一個(gè)字面量的對(duì)象上，例如 v-bind.sync=”{ title: doc.title }”，是無(wú)法正常工作的，因?yàn)樵诮馕鲆粋€(gè)像這樣的復(fù)雜表達(dá)式的時(shí)候，有很多邊緣情況需要考慮。

.prop

要學(xué)習(xí)這個(gè)修飾符，我們首先要搞懂兩個(gè)東西的區(qū)別。

Property：節(jié)點(diǎn)對(duì)象在內(nèi)存中存儲(chǔ)的屬性，可以訪問(wèn)和設(shè)置。
Attribute：節(jié)點(diǎn)對(duì)象的其中一個(gè)屬性( property )，值是一個(gè)對(duì)象。
可以通過(guò)點(diǎn)訪問(wèn)法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 讀取，通過(guò) document.getElementById('xx').setAttribute('xx',value) 新增和修改。
在標(biāo)簽里定義的所有屬性包括 HTML 屬性和自定義屬性都會(huì)在 attributes 對(duì)象里以鍵值對(duì)的方式存在。

其實(shí)attribute和property兩個(gè)單詞，翻譯出來(lái)都是屬性，但是《javascript高級(jí)程序設(shè)計(jì)》將它們翻譯為特性和屬性，以示區(qū)分

//這里的id,value,style都屬于property
//index屬于attribute
//id、title等既是屬性，也是特性。修改屬性，其對(duì)應(yīng)的特性會(huì)發(fā)生改變；修改特性，屬性也會(huì)改變

//input.index === undefined
//input.attributes.index === this.index

從上面我們可以看到如果直接使用v-bind綁定，則默認(rèn)會(huì)綁定到dom節(jié)點(diǎn)的attribute。
為了

通過(guò)自定義屬性存儲(chǔ)變量，避免暴露數(shù)據(jù)

防止污染 HTML 結(jié)構(gòu)

我們可以使用這個(gè)修飾符，如下

//input.index === this.index
//input.attributes.index === undefined

.camel

由于HTML 特性是不區(qū)分大小寫的。

實(shí)際上會(huì)渲染為

這將導(dǎo)致渲染失敗，因?yàn)?SVG 標(biāo)簽只認(rèn) viewBox，卻不知道 viewbox 是什么。
如果我們使用.camel修飾符，那它就會(huì)被渲染為駝峰名。
另，如果你使用字符串模版，則沒有這些限制。

new Vue({
  template: ''
})

看完了這篇文章，相信你對(duì)“vue修飾符有哪些”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！