功能
- 當你首次進入這個介面的時候 它會給我們展示的是一級的內容 點選一級就展開二級 點選二級就展示下一級的內容
- 如果有子集的話下面會有個小箭頭 如果沒有子集的話就沒有小箭頭 這是一個細節
- 當點選展開全部子集的時候 當再次點選合上然後再次點選展開 還是一次性展開全部子集在我們頁面上
效能優化
- 我們要求我們首屏渲染時間是最少最短的 如果說裡面是隱藏的是一些圖片或者視訊 在使用者沒有去點開的情況下 它就把這些資源載入進來了 對我們使用者體驗是不是不太好 第一次進入到這個介面是優點卡頓的 我們用其他的值控制是不是要去渲染 再寫一個陣列 如果你是之前顯示過它的話 它就去給我們展示 如果你之前不去顯示它的話就不渲染
用到的知識點
-
vue如何修改陣列中物件的值
- 在vue中是無法檢測到根據索引值修改的資料變動的
- 可以用this.$set(target, key, value) // 第一個引數是要修改的資料 第二個值是修改當前陣列的哪一個欄位 第三個是要修改為什麼值
- 也可以通過陣列定義的方法來修改
-
VUE元件中 data 裡面的資料為什麼要return 出來
var data = function() { return { name: "zhangsan", age: 20 } } var a = data(); var b = data(); a.age = 18; console.log(b); 複製程式碼- 因為在JS中只有函式才存在作用域，data是一個函式時，每個元件例項都有自己的作用域，每個例項相互獨立，不會互相影響。
-
v-if與v-show區別
- v-show只是在修改元素的css樣式，也就是display的屬性值，元素始終在Dom樹上，有更高的初始渲染消耗，適合做頻繁的額切換。
- v-if是根據後面資料的真假值判斷直接從Dom樹上刪除或重建元素節點，有更高的切換消耗，不適合做頻繁的切換。
-
font-face使用方法
效果圖片
