用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…

你的点赞是我持续输出的动力 但愿能帮助到你们 互相学习 有任何问题下面留言 必定回复