日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

   
   
{{value}}

   
   
{{value}}

  ok

  ok

  ok

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

   
      obj1
      
        obj2
        
          obj3
          
            obj4
          

...

.native

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

必須使用.native來修飾這個click事件（即），可以理解為該修飾符的作用就是把一個vue組件轉化為一個普通的HTML標簽，
注意：使用.native修飾符來操作普通HTML標簽是會令事件失效的

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

.left   左鍵點擊

.right  右鍵點擊

.middle 中鍵點擊

ok

鍵值修飾符

其實這個也算是事件修飾符的一種，因為它都是用來修飾鍵盤事件的。
比如onkeyup，onkeydown啊

.keyCode

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

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

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

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

可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：

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

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

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

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

      ok
      ok
      ok

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

.exact(2.5新增)

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

ok

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

v-bind修飾符

.sync(2.3.0+ 新增)

在有些情況下，我們可能需要對一個 prop 進行“雙向綁定”。不幸的是，真正的雙向綁定會帶來維護上的問題，因為子組件可以修改父組件，且在父組件和子組件都沒有明顯的改動來源。我們通常的做法是

//父親組件

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

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

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

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

這樣確實會方便很多，但是也有很多需要注意的點

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

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

3. 將 v-bind.sync 用在一個字面量的對象上，例如 v-bind.sync=”{ title: doc.title }”，是無法正常工作的，因為在解析一個像這樣的復雜表達式的時候，有很多邊緣情況需要考慮。

.prop

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

Property：節(jié)點對象在內存中存儲的屬性，可以訪問和設置。
Attribute：節(jié)點對象的其中一個屬性( property )，值是一個對象。
可以通過點訪問法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 讀取，通過 document.getElementById('xx').setAttribute('xx',value) 新增和修改。
在標簽里定義的所有屬性包括 HTML 屬性和自定義屬性都會在 attributes 對象里以鍵值對的方式存在。

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

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

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

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

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

防止污染 HTML 結構

我們可以使用這個修飾符，如下

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

.camel

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

實際上會渲染為

這將導致渲染失敗，因為 SVG 標簽只認 viewBox，卻不知道 viewbox 是什么。
如果我們使用.camel修飾符，那它就會被渲染為駝峰名。
另，如果你使用字符串模版，則沒有這些限制。

new Vue({
  template: ''
})

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