文章目錄
- 一、v-on系結監聽
- 1.事件系結
- 2.引數傳遞
- 3.修飾符
- 二、v-if、v-else-if、v-else
- 1.v-if（由一個布爾變數決定他要不要顯示出來）
- 2.v-else顧名思義if沒了就它上
- 3.v-else-if（不建議用太多，復雜判斷不寫標簽里，寫函式里呀）
- 4.v-if在使用時和v-show的區別
- 四、v-for和陣列
- 1.v-for遍歷陣列
- 2.v-for遍歷物件
- 3.系結key
- 4.陣列中有的方法不是回應式的
- 五、高階函式（filter、map、reduce）
- 六、v-model
- 1.資料表單的雙向系結(textarea、input)
- 2.radio型別的使用
- 3.checkbox型別
- 4.select型別使用
- 5.v-model的修飾符
- 七、v-input
- 1.值系結
- 2.key
一、v-on系結監聽
1.事件系結
還有很多事件可以監聽，比如鍵盤滑鼠的，語法糖則是將v-on：換成@
2.引數傳遞
函式本身不要求傳引數，如圖效果一樣的
要求傳參，但沒有傳，顯示為undefined(寫函式時沒有省略小括號)，
既要求傳參沒有傳，又省略了函式小括號，Vue則會默認將瀏覽器產生的event事件物件作為引數傳入到方法，
如果一個方法既需要event引數，又需要其他引數，好，現在你又不寫括號，那么第一個引數是event，后面都undefined，（寫了個空括號當然都undefined）正確寫法是把你想獲得的event引數寫作$event
3.修飾符
先來講的是事件冒泡：
點擊按鈕不希望有divClick的列印，于是把按鈕的@click改為@click.stop
這里有很多修飾符的介紹
監聽鍵盤某個鍵帽：
二、v-if、v-else-if、v-else
1.v-if（由一個布爾變數決定他要不要顯示出來）
效果如下圖：
2.v-else顧名思義if沒了就它上
3.v-else-if（不建議用太多，復雜判斷不寫標簽里，寫函式里呀）
like this，如圖有兩種方式效果一樣的：
這是放在計算屬性里
效果：
4.v-if在使用時和v-show的區別
在網頁打開檢查就能發現區別：
aaa的標簽直接從dom被移除了
于是在開發時的選擇：
當需要在顯示與隱藏之間切片很頻繁時,使用v- show
當只有一次切換時,通過使用v-if
四、v-for和陣列
1.v-for遍歷陣列
2.v-for遍歷物件
3.系結key
系結key的好處是提高性能，在dom渲染前有個虛擬dom，key作用就是為了高效更新虛擬dom，假如一個插入操作，如果不系結在修改時是從插入處一直往后改，如果系結就會不改變以前的直接插入，
但是，系結的東西要和插入的一樣，比如下圖如果key是index就沒用，
4.陣列中有的方法不是回應式的
意思是，當陣列值其實已經發生改變了，但是頁面渲染卻還是以前的樣子，比如用索引值修改陣列中的元素，當點擊按鈕是呼叫this.letters[0]='bbbbbb';就不是回應式的，換成this.letters.splice(0,1,'bbbbbb');就可以實作啦，
還有一個Vue內部的函式，可以實作這件事set(要修改的物件，索引值，修改后的值)Vue.set(this.letters, 0, 'bbbbbb')
回應式的函式：
| 函式用法 | 函式作用 |
|---|---|
| this.letters.pop() | 洗掉陣列中最后一個元素 |
| this.letters.shift() | 洗掉陣列中第一個元素 |
| this.letters.push(‘l’,‘m’,‘n’) | 可以一次性在陣列后加多個元素 |
| this.letters.unshift(‘l’,‘m’,‘n’) | 可以一次性在陣列前加多個元素 |
| this.letters.sort() | 排序 |
| this.letters.reverse() | 反轉陣列內容 |
| this.letters.splice(start，num) | (從1開始數的)start元素(不包括它自己)洗掉之后的num個元素(不傳入num則洗掉后面所有) |
| this.letters.splice(start，num，‘x’,‘y’,‘z’) | 洗掉之后再追加上xyz |
| this.letters.splice(start，0，‘x’,‘y’,‘z’) | 一個都不刪而是插入xyz |
五、高階函式（filter、map、reduce）
可以將一個函式作為引數傳給高階函式，
這里filter里的n是每次回呼一個陣列里的，如圖來講一共回呼了七次，可以實作和注釋部分一樣的功能，
map函式也能回呼，而且不像filter有要求，
這函式是初始值為0，每次回呼會把上次的值保留下來
于是乎，有了這三個函式，我們可以一個函式實作之前的三個功能(很裝13呀）其實這種可讀性強，還簡潔，
六、v-model
1.資料表單的雙向系結(textarea、input)
原本用v-bind可以單向的系結：
結果：
在v-bind的基礎上使用v-on獲取輸入的內容就可實作和v-model一樣的雙向系結了：
也可以不寫方法直接寫運算式@input="message=$event.target.value"
message改變會改變input里的東西，在input寫東西也能改變message的值除了用在input元素，textarea元素也能用，
2.radio型別的使用
如果不用v-model，加上相同的name屬性才能互斥的選擇性別，否則是兩者都能點的，加上v-model后可以將需要的表單資訊獲取傳給后臺，name也可以不加上去，注意v-model系結的還得是在data里面的同一個引數，
3.checkbox型別
首先單選框，勾選同意才能點擊下一步按鈕
然后是多選框，單選和多選系結就是一個值和一個陣列的區別，都能把系結的東西傳回服務器，
PS：checkbox就是多選框型別了，label的作用是讓除了點擊框能選中以外，點擊文字也能選中，
4.select型別使用
select的v-model不是綁在option上的，value才是對應每個option，
5.v-model的修飾符
lazy修飾符:
默認情況下, v-model默認是在input事件中同步輸入框的資料的，也就是說, 一旦有資料發生改變對應的data中的資料就會自動發生改變，lazy修飾符可以讓資料在失去焦點或者回車時才會更新；
number修飾符:
默認情況下,在輸入框中無論我們輸入的是字母還是數字,都會被當做字串型別進行處理，但是如果我們希望處理的是數字型別,那么最好直接將內容當做數字處理，number修飾符可以讓在輸入框中輸入的內容自動轉成數字型別，但是必須輸入數字，敲字母就沒反應了；
trim修飾符:
如果輸入的內容首尾有很多空格,通常我們希望將其去除，trim修飾符可以過濾內容左右兩邊的空格，瀏覽器顯示時是自動去掉空格的，但是保存的值里面是有空格的，
七、v-input
1.值系結
input中的值系結，由服務器回傳資料，動態去系結，而不是像上面的例子寫死了所有選擇，用v-bind就可以實作了，
2.key
以下例子在切換登錄方式時保留輸入框中的內容了，如果不加key的話，
這是因為Vue在進行DOM渲染時,出于性能考慮,會盡可能的復用已經存在的元素,而不是重新創建新的元素，會保留input里的value，加個key，兩個key不一樣就會在切換時被清空了，
是嗶哩嗶哩一個視頻的筆記鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/355352.html
標籤：其他