用Vue實現一款屬於本身的樹形組件

功能

• 當你首次進入這個界面的時候 它會給咱們展現的是一級的內容 點擊一級就展開二級 點擊二級就展現下一級的內容
• 若是有子集的話下面會有個小箭頭 若是沒有子集的話就沒有小箭頭 這是一個細節
• 當點擊展開所有子集的時候 當再次點擊合上而後再次點擊展開 仍是一次性展開所有子集在咱們頁面上

性能優化

• 咱們要求咱們首屏渲染時間是最少最短的 若是說裏面是隱藏的是一些圖片或者視頻 在用戶沒有去點開的狀況下 它就把這些資源加載進來了 對咱們用戶體驗是否是不太好 第一次進入到這個界面是優勢卡頓的 咱們用其餘的值控制是否是要去渲染 再寫一個數組 若是你是以前顯示過它的話 它就去給咱們展現 若是你以前不去顯示它的話就不渲染

用到的知識點

• 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使用方法

效果圖片

項目源碼 歡迎start

github.com/cxuhwiuefhu…

你的點贊是我持續輸出的動力 但願能幫助到你們 互相學習 有任何問題下面留言 必定回覆