面試最常問的13種Vue修飾符
阿新 • • 發佈:2021-07-13
目錄
- 1.lazy
- 2.trim
- 3.number
- 4.stop
- 5.capture
- 6.self
- 7.once
- 8.prevent
- 9.native
- 10.left,right,middle
- 11.passive
- 12.camel
- 12.sync
- 13.keyCode
1.lazy
lazy修飾符作用是,改變輸入框的值時value不會改變,當游標離開輸入框時,v-model繫結的值value才會改變
<input type="text" v-mowww.cppcns.comdel.lazy="value"> <div>{{value}}</div> data() { return { value: '111111' } }
2.trim
trim修飾符的作用類似於中的trim()方法,作用是把v-model繫結的值的首尾空格給過濾掉。
<input type="text" v-model.trim="value"> <div>{{value}}</div> data() { return { value: '111111' } }
3.number
number修飾符的作用是將值轉成數字,但是先輸入字串和先輸入數字,是兩種情況
<input type="text" v-model.number="value"> <div>{{value}}</div> data() { return { value: '111111' } }
先輸入數字的話,只取前面數字部分
先輸入字母的話,number修飾符無效
4.stop
stop修飾符的作用是阻止冒泡
<div @click="clickEvent(2)" style="width:300px;height:100px;background:red"> <button @click.stop="clickEvent(1)">點選</button> </div> methods: { clickEvent(num) { // 不加 stop 點選按鈕輸出 1 2 // 加了 stop 點選按鈕輸出 1 console.log(num) } }
5.capture
事件預設是由裡往外冒泡,capture修飾符的作用是反過來,由外網內捕獲
<div @click.capture="clickEvent(2)" style="width:300px;height:100px;background:red"> <button @click="clickEvent(1)">點選</button> </div> methods: { clickEvent(num) { // 不加 capture 點選按鈕輸出 1 2 // 加了 capture 點選按鈕輸出 2 1 console.log(num) } }
6.self
self修飾符作用是,只有點選事件繫結的本身才會觸發事件
<div @click.self="clickEvent(2)" style="width:300px;height:100px;background:red"> <button @click="clickEvent(1)">點選</button> </div> methods: { clickEvent(num) { // 不加 self 點選按鈕輸出 1 2 // 加了 self 點選按鈕輸出 1 點選div才會輸出 2 console.log(num) } }
7.once
once修飾符的作用是,事件只執行一次
<div @click.once="clickEvent(2)" style="width:300px;height:100px;background:red"> <button @click="clickEvent(1)">點選</button> </div> methods: { clickEvent(num) { // 不加 once 多次點選按鈕輸出 1 // 加了 once 多次點選按鈕只會輸出一次 1 console.log(num) } }
8.prevent
prevent修飾符的作用是阻止預設事件(例如a標籤的跳轉)
<a href="#" rel="external nofollow" @click.prevent="clickEvent(1)">點我</a> methods: { clickEvent(num) { // 不加 prevent 點選a標籤 先跳轉然後輸出 1 // 加了 prevent 點選a標籤 不會跳轉只會輸出 1 console.log(num) } }
9.native
native修飾符是加在自定義元件的事件上,保證事件能執行
執行不了
<My-component @click="shout(3)"></My-component>
可以執行
<My-component @click.native="shout(3)"></My-component>
10.left,right,middle
這三個修飾符是滑鼠的左中右按鍵觸發的事件
<button @click.middle="clickEvent(1)" @click.left="clickEvent(2)" @click.right="clickEvent(3)">點我</button> methods: { // 點選中鍵輸出1 // 點選左鍵輸出2 // 點選右鍵輸出3 clickEvent(num) { console.log(num) } }
11.passive
當我們在監聽元素滾動事件的時候,會一直觸發onscroll事件,在pc端是沒啥問題的,但是在移動端,會讓我們的變卡,因此我們使用這個修飾符的時候,相當於給onscroll事件整了一個.lazy修飾符
<div @scroll.passive="onScroll">...</div>
12.camel
不加camel viewBox會被識別成viewbox <svg :viewBox="viewBox"></svg> 加了canmel viewBox才會被識別成viewBox <svg :viewBox.camel="viewBox"></svg>
12.sync
當父元件傳值進子元件,子元件想要改變這個值時,可以這麼做
父元件裡
<children :foo="bar" @update:foo="val => bar = val"></children>
子元件裡
this.$emit('update:foo',newValue)
sync修飾符的作用就是,可以簡寫:
父元件裡
<children :foo.sync="bar"></children>
子元件裡
this.$emit('update:foo',newValue)
13.keyCode
當我們這麼寫事件的時候,無論按什麼按鈕都會觸發事件
<input type="text" @keyup="shout(4)"www.cppcns.com>
那麼想要限制成某個按鍵觸發怎麼辦?這時候keyCode修飾符就派上用場了
<input type="text" @keyup.keyCode="shout(4)">
提供的keyCode:
//普通鍵 .enter .tab .delete //(捕獲“刪除”和“退格”鍵) .space .esc .up .down .left .right //系統修飾鍵 .ctrl .alt .meta .shift
例如:
按 ctrl 才會觸發
<input type="text" @keyup.ctrl="shout(4)">
也可以滑鼠事件+按鍵
<input type="text" @mousedown.ctrl.="shout(4)">
可以多按鍵觸發 例如 ctrl + 67
<input type="text" @
到此這篇關於面試最常問的13種Vue修飾符的文章就介紹到這了,更多相關Vue修飾符內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!