1. 程式人生 > >Vue 經驗總結

Vue 經驗總結

1、data操作

新增:

1)陣列 用push unshit 新增,用splice,pop 刪除

2)直接obj.xx= 新增物件屬性是不會更新到view的,需要用$set('objname',{}) 來修改物件。

新物件可以用:Object.assign({}, this.listobj, {show:!this.listobj.show }) 返回。

單屬性新增可用this.$set('obj.name',value)

3)對於以有的字串,數字可以直接修改

4)對於沒有的基礎型別,新增時用$set,雖然可以用,但是不推薦,vue會提示

5)對於陣列物件,直接用下標新增物件屬性是不會更新view的,可用$set('arr[0].tel',xxx)

6)對於陣列物件,用push 新增物件元素是可以的

2、class 繫結

元件可以接受props傳遞過來的class 和bool值為新增類

 :class="{openclass:openshow,focusclass:focusshow}" 四個引數都props傳遞

但是對於巢狀元件引用頂級傳遞值,多層巢狀元件傳遞後用以上方法會把openclass當成class值繫結,而不會去解析。

但是輸出的this.openclass 是傳遞的值。

於是找到了另一個繫結方法  :class="[show?openclass:'',showfocus?focusclass:'']"。用三元表示式和陣列

3、計算屬性使用

對於簡單的可用三元表示式,或簡單操作符+這些來實現。計算屬性用來做表示式無法實現的。

4、$dispatch

在寫樹元件時,會用到元件不定級巢狀使用,這時如需要點選時觸發繫結的事件。

如果用v-on一直傳遞下去,元件內建立methods內部用$emit觸發繫結的事件。這樣也是可以實現的。但是元件使用時繫結的資料太多了。

這時就可以用派生,頂層繫結接收到v-on繫結的事件,在events上建立監聽事件,接收引數和$emit觸發事件。而巢狀的元件用派生來觸發頂層上監聽的事件。

5、動態繫結和靜態繫結

對於傳遞classname字串這些可以用靜態 openclass="active" 以字串形式傳遞。

元件接收到的是一個變數,如子元件需要就需要用:openclass="openclass" 傳遞了。

對於class傳遞意見用陣列,這樣可以傳遞多個類。這樣傳遞時就需要:class="[]" 動態綁定了,以js解析它如是變數就引用元件上的值

動態也可以傳遞字串:a="' '" 

動態和靜態的使用情況:

動態:對於傳遞資料需要動態的,如果子會修改資料就用.sync。如值頁面和元件都會使用到就動態傳遞,對於個別的陣列物件這些配置也可以用動態傳遞,在""內定義陣列或物件來傳遞。

靜態:它以字串傳遞,解析成一個變數值為字串再傳遞,它有來傳遞元件的配置資訊不會和頁面產生關係的。

靜態屬性呢,元件接收後也可以動態傳遞到子元件

6、建立動態值傳遞

元件在對陣列物件操作時要識別物件,當然用id是可能的。但是不能保證所有傳遞的物件都有id呀。

所以需要為物件建立標識indexid 。可以用v-for迴圈時產生的$index,加上一些關鍵字。

7、元件內對dom操作

元件內減少對dom的操作這是真理。但有時就是需要,如元件獲取頁面寬高,設定元件樣式等。

對於這些意見是在data上建立物件儲存style。在標籤上:style繫結。在ready內或方法內用js計算出值修改data style。

最好做到只修改資料,資料繫結到需要的地方。

8、style

在做專案時會遇到把動態背景繫結到style

:style="{backgroundImage:'url('+item.path+')'}"

動態繫結是必須的值是物件,鍵名用小駝峰vue會解析,如果是transform 還會新增上字首

9、元件執行時需要觸發或自動執行的方法。

元件開發儘量不要做ajax 來獲取資料這些,因為如果頁面中大量用元件就會發起很多請求。意見元件只接收資料。

還有一種情況需要觸發執行方法,如在寫上傳元件時,iframe需要繫結load方法,這樣呢在元件建立後iframe會觸發一次事件。

這也是沒辦法的,只能在方法內做判斷,return 回去不符合的。

var pre=event.target.contentWindow.document.body.querySelector('pre');
if(!pre){
return ;
}

10、元件的狀態屬性

元件內部的狀態屬性都在data上定義,傳遞狀態也可以。目標就是元件狀態元件data定義,所需引數props傳遞。

11、元件理想的狀態

元件就是把單一功能,單一模組獨立,可公用重複使用,降低耦合度。

就像boss說這件事交給你了,不要煩我了。元件也一樣。