阅读 1153
用Vue实现一款属于自己的树形组件

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

效果图片

图片atl

项目源码 欢迎start

github.com/cxuhwiuefhu…

你的点赞是我持续输出的动力 希望能帮助到大家 互相学习 有任何问题下面留言 一定回复

文章分类
阅读
文章标签