2018-11-5工作日報
1.今天主要在考慮複用之前介面的元件進行海通新頁面的書寫,由於效果圖還沒出,但是並不影響我提前預估頁面和互動的工作量。
2.在考慮樣式的時候,要使用到fixed定位。要注意到這種脫離文件流的佈局,本身塊級元素的特性會消失,比如寬度預設佔滿一行的100%,比如block等。所以需要在宣告width:100%
才能展現出原來的效果。
3.f7.showIndicator();
是顯示全域性遮罩的載入圓圈,同理hide()就是隱藏。這個專案裡的init方法裡,在開頭呼叫show(),最後一個介面的then()方法的最後一行程式碼呼叫hide()。倒確實是實現了載入的提示效果,但是總是覺得不太便利,沒有複用性,也沒有非同步判斷,萬一哪個內容載入需要時間,並沒有即時載入,載入卻是取消的。所以這個元件的效能和複用性都很低。
4.這個專案對於template7封裝了兩個方法render()
和renderToTarget()
當然還有其他的,這兩個是最常用的。之前也提到過,render()
方法是直接在script的位置進行append()
和資料渲染,而renderToTarget()
則是在指定的選擇器後進行append()
。這兩個函式封裝的還是很有水平的,也設定了一個布林值供你選擇,是append()
還是html()
。
5.通過自己的研究,做出了一個比較完整的todolist的demo。包括了輸入框裡回車新增待辦事項,點選x號刪除待辦事項,使用localStorage
儲存待辦事項的資料等功能。主要的訓練的知識點還是父子元件之間的傳值,以及vue元件化的格式和思想。自己做了個demo下來,感覺vue還是不如react優美,再繼續學學看看。
6.目前接觸到的屬性,覺得
watch
監聽很有用,資料改變會自動執行語句。同時MVVM框架會讓你感覺到資料和邏輯是一個整體,不像js或者jquery的DOM操作一樣,資料和邏輯層是分離的。在vue裡,你改變了資料,整體的渲染和邏輯也會自動重新載入。而不需要DOM進行觸發。
7.子元件向父元件傳值,第一個引數是自定義事件名,第二個引數是傳值。父元件呼叫,可以直接當實參。
deleteClick(params){
this.$emit('delete-item',params)
}
deleteKiri(params){ this.arrMath.splice(params,1); }