日常开发笔记

小鱼儿 2022-12-20 03:30 1623阅读 0赞

### 目录 ###

*  最新的记在最上面
 *  86. 箭头函数中的arguments
 *  85. 关于js构造函数的理解
 *  84. vue通过监听路由来解决组件复用时产生的问题
 *  83. 让一个元素垂直水平居中的四种方法
 *  82. JS判断一个数能否被另一个数整除
 *  81. vue 修改element \`< el-menu >\` NavMenu 导航菜单组件内部样式
 *  80. vue 使用css var()函数 动态修改伪类样式
 *  79. vue监听当前页面路由并处理
 *  78. 使用伪类在导航栏上添加三角形下表
 *  77. Element-ui中组件图标自由替换成自己想要的图标
 *  76. 如何查看placeholder的CSS属性
 *  75. NPM报错 Error: EPERM: operation not permitted, unlink......解决办法和清除缓存。
 *  74. js 判断字符串中是否包含某个字符串
 *  73. vue data的使用
 *  72. vue作用域的应用
 *  71. echats堆叠柱状图tooltip提示框格式自定义
 *  70. Echarts正负条形图将x轴和tooltip都设置成正数
 *  69. echarts 瀑布阶梯图 数据生成
 *  68. js判断一个元素是否在数组中
 *  67. js去除字符串空格(空白符)
 *  66. 高性能js数组去重(12种方法，史上最全)
 *  65. 单个方法里查询多个接口，分别为同一个数组赋值，解决异步问题，该情况下将\`.then .catch\`替换为\`async await\`
 *  64. js运算规则，分母不能为0，\`0/0 ： NaN\`，\`1/0 ：Infinity(无穷，无穷大) \`
 *  63. js判断对象是否为空对象的几种方法
 *  62. vscode用户片段的快乐使用，动手实现一个自己的snippets
 *  61. css 颜色透明的\`background: transparent\`
 *  60. 如何在控制台直接查看对象和数组值，而不需要通过点击属性值来查看
 *  59. js百分比处理，\`Math.ceil()\` 函数返回大于或等于一个给定数字的最小整数。
 *  58. js保留到整数(四舍五入)，\`Math.round()\` 函数返回一个数字四舍五入后最接近的整数。
 *  57. 数组分割
 *  56. ⭐vue超级重要的一个概念：vue 绑定在组件上的数据，父组件修改数据，子组件监听不到变化的问题详解，解决当对象属性变化页面没有响应更新的问题
 *  55. 堆叠柱状图，复杂数据结构处理思路
 *  54. 数组排序 \`sort()\`
 *  53. vue data对象重新赋值无效(未更改)的解决方式\`this.$set(this.model,'name',response.name)\`
 *  52. 多折叠面板，实现默认点击某子项
 *  51. vue 实例方法 \`this.$nextTick(()=>\{ \})\`
 *  50. 多折叠面板，实现只显示一个点击态
 *  49. js 将对象的属性置为数组后，push操作和解构赋值的区别。【push操作带来的问题】
 *  48. JavaScript 判断对象中是否有某属性
 *  47. try catch 和 then catch 对比
 *  46. 折叠面板 添加点击态样式
 *  45. vue中 \`:style\` 与 \`:class\` 三元运算符使用
 *  44. element-ui 折叠面板 自定义面板标题 样式修改
 *  43. vue 公共组件利器 插槽：solt
 *  42. vue实现折叠面板-手风琴效果 升级版 提供title插槽，标题盒子可自定义dom元素
 *  41. CSS修改浏览器滚动条的样式（实例详解）(转载)
 *  40. vue实现折叠面板-手风琴效果（转载）
 *  39. vue实现图片tabs标签页
 *  38. vue动态渲染图片
 *  37. vue 手写tabs标签页
 *  36. echarts markline 个性化定制
 *  35. echarts x,y轴name 个性化定制 ，通过格式化label来实现
 *  34. js 标准二维数组变一维数组的方法
 *  33. js获取数组中的最大值/最小值
 *  32. 手写弹框，解决点击弹出层外消失，点击弹出层不消失
 *  31. 解决echarts宽度100%变成了100px
 *  30. 记录自己写的百分比处理
 *  29. 数组求和，同上（百分比处理）
 *  28. Vue子组件调用父组件的方法
 *  27. CSS中如何设置父元素透明度不影响子元素透明度
 *  26. 手写弹出框，加蒙层效果，参考element ui
 *  25. js实现的点击div区域外隐藏div区域
 *  24. vue盒子收缩，使用动画
 *  23. 可选链操作符 - JavaScript | MDN \`?.\`
 *  22. 总结axios请求接口的不同写法
 *  21. vscode格式化代码无效解决方案（开发框架vue）
 *  20. vue获取dom元素高度的方法
 *  19. JS中如何正确的使用有变量的calc()？https://blog.csdn.net/qq\_40421277/article/details/79618369
 *  18. 学习css函数
 *  17. echart纵坐标标签特别长换行显示
 *  16. 记css伪类的使用
 *  15. vue中如何动态修改伪元素样式
 *  14. 同上 通过使用css变量实现动态修改伪元素样式
 *  13. 补充echarts 地图缩放大小，可小数
 *  12. 记es6导入导入
 *  11. 记录vscode 快速调整颜色格式的方法，16进制转rgb，rgb转16进制 20min
 *  10. echarts js报错 Cannot read property 'getAttribute' of null - sirdong - 博客园
 *  9. vue nextTick https://cn.vuejs.org/v2/api/index.html\#Vue-nextTick
 *  8. sort排序
 *  7. echarts.js 动态生成多个图表 使用vue封装组件
 *  6. 记录map和foreach的区别，应用场景和性能
 *  5. 记录局部作用域
 *  4. 记录vue布局样式设计
 *  3. echarts 柱状图颜色渐变效果
 *  2. 屏幕不够大？只有一个屏幕？Win10虚拟桌面值得你拥有！！
 *  1. js实现分页，分割数组
 *  map和forEach的区别

# 最新的记在最上面 #

# 86. 箭头函数中的arguments #

1.  箭头函数没有自己的this，arguments，super或new.target。
2.  它的this、arguments都是在定义函数时绑定外层的this和arguments，而不是在执行过程中绑定的，所以不会因为调用者不同而发生变化。

测试一下：

![在这里插入图片描述][856b2841d599fb44c649b8d7eb92f960.png]  
可以发现在setTimeout里的箭头函数直接调用arguments，指向的就是外层的arguments。

> 注意：上述例子里的两个arguments不是同一个参数列表，一个是a函数的，另一个是a函数返回的函数的。

# 85. 关于js构造函数的理解 #

https://www.jianshu.com/p/7e21e23ffba9  
什么是构造函数  
在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。构造函数首字母一般大写

先说一点基本概念。

function Animal(color) { 
     this.color = color;
    }

**当一个函数创建好以后，我们并不知道它是不是构造函数，即使像上面的例子一样，函数名为大写，我们也不能确定。只有当一个函数以 new 关键字来调用的时候，我们才能说它是一个构造函数。就像下面这样：**

var dog = new Animal("black");

# 84. vue通过监听路由来解决组件复用时产生的问题 #

不同商品标签跳转到同一个详情页，只是参数不同，如果商品详情的请求在create钩子里，那么就会产生只请求一次的问题，因为详情页组件复用了，一个组件的create函数只会执行一次，这样我们想要解决这个问题，通过监听路由就可以了，方法如下：

watch: { 
        $route: { 
          immediate: true,
          handler(newValue, oldValue) { 
            console.log("获取详情");
          },
        },
      },

# 83. 让一个元素垂直水平居中的四种方法 #

[https://www.cnblogs.com/linsinan/p/6132241.html][https_www.cnblogs.com_linsinan_p_6132241.html]

# 82. JS判断一个数能否被另一个数整除 #

const isDivisible = (dividend, divisor) => dividend % divisor === 0;

原文：https://blog.csdn.net/weixin\_36270908/article/details/98958065

# 81. vue 修改element `< el-menu >` NavMenu 导航菜单组件内部样式 #

1.  要单独另写一个`style`，不加`scoped`！;  
    因为，element的导航菜单组件的dom是ui框架内用js动态生成的dom  
    如下，dom节点其实是在`app`节点以外；  
    使用`scoped`后，css的样式只会在当前组件内生效；所以对这个在`app`节点以外的dom肯定就更不会生效了；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]

1.  写法：  
    单独写一个`style`，不加scoped，不需要再写`/deep/`；

1.  效果：  
    ![在这里插入图片描述][20201230114534742.png]

# 80. vue 使用css var()函数 动态修改伪类样式 #

data() { 
          return { 
            // 导航栏 箭头颜色
            borderColor: { 
              "--color": "#fff"
            },
          };
        },
        watch: { 
          $route: { 
            immediate: true,
            handler(val) { 
              const path = val.path.split("/");
              // 页面是否属于某某平台
              if (path[1] === "HanSightEnterprise") { 
                this.borderColor["--color"] = "#10153C";
              } else { 
                this.borderColor["--color"] = "#fff";
              }
            },
          },
        }

.tags-view-item { 
          &.active { 
            &::before { 
              position: absolute;
              bottom: 0;
              left: 50%;
              margin-left: -5px;
              content: "";
              display: block;
              border: 5px solid transparent;
              border-bottom-color: var(--color);
            }
          }
        }

实现效果：  
动态改变通过伪类实现的箭头颜色  
![在这里插入图片描述][20201229182024895.png]  
![在这里插入图片描述][20201229182107631.png]

# 79. vue监听当前页面路由并处理 #

watch: { 
          $route: { 
            immediate: true,
            handler(val) { 
              const path = val.path.split("/");
              if (path[1] === "HanSightEnterprise") { 
                this.isHanSightEnterprise = true;
              } else { 
                this.isHanSightEnterprise = false;
              }
              this.setMenuShow(val.path);
            },
          },
        },

# 78. 使用伪类在导航栏上添加三角形下表 #

![在这里插入图片描述][20201229171150310.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]

.tags-view-container .tags-view-item.active[data-v-6c1effb2]::before { 
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -5px;
        content: "";
        display: block;
        border: 5px solid transparent;
        border-bottom-color: #fff;
    }

# 77. Element-ui中组件图标自由替换成自己想要的图标 #

没有验证有效性。  
[https://www.cnblogs.com/longflag/p/13277915.html][https_www.cnblogs.com_longflag_p_13277915.html]

# 76. 如何查看placeholder的CSS属性 #

[https://www.cnblogs.com/yanzhenjingyan/p/10125402.html][https_www.cnblogs.com_yanzhenjingyan_p_10125402.html]

# 75. NPM报错 Error: EPERM: operation not permitted, unlink…解决办法和清除缓存。 #

[https://www.jianshu.com/p/b21196a3a105][https_www.jianshu.com_p_b21196a3a105]

# 74. js 判断字符串中是否包含某个字符串 #

**String对象的方法**  
方法一: indexOf() (推荐)

var str = "123";
    console.log(str.indexOf("3") != -1 );  // true

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。

方法二: search()

var str = "123";
    console.log(str.search("3") != -1 );  // true

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。

方法三:match()

var str = "123";
    var reg = RegExp(/3/);
    if(str.match(reg)){
        // 包含        
    }

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

# 73. vue data的使用 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 2]

# 72. vue作用域的应用 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 3]

# 71. echats堆叠柱状图tooltip提示框格式自定义 #

自己写的tooltop格式化，思路和下面大佬的一样，主要说就是把参数打印出来，你就知道哪些是自己需要的了，然后按值取就完了：

formatter: function (params) {
        console.group('tooltip 数据：');
        console.log('params', JSON.parse(JSON.stringify(params)))
        console.groupEnd();
        let name = '';
        let value = 0;
        let result = '';
        params.length > 0 && params.forEach((item, index) => {
          index === 0 && (name = item.name);
          item.value > 0 && (value += item.value)
        })
        result = name + "年：" + value + "岁";
        return result
      }

https://blog.csdn.net/liang\_rujiang/article/details/104822714  
修改鼠标移到折线图上提示框的样式代码如下，不知道什么意思的可以console.log看一下！

tooltip:{ 
       trigger: 'axis',
       formatter: function (params) { 
           var html=params[0].name+"<br>";
           for(var i=0;i<params.length;i++){ 
               html+='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[i].color+';"></span>'
    
               html+=params[i].seriesName+":"+params[i].value+"%<br>";
    
           }
           return html;
       }
    },

# 70. Echarts正负条形图将x轴和tooltip都设置成正数 #

https://www.jianshu.com/p/cf45deb7fde2

option = { 
        tooltip: { 
            trigger: 'axis',
            axisPointer: {             // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: (params) => { 
        if (!params.length) return ''
        let s = params[0].axisValueLabel + '<br/>'
        for (const iterator of params) { 
          // 如果是负数则反转
          let d = iterator.data < 0 ? -iterator.data : iterator.data
          s += iterator.marker + iterator.seriesName + '：' + d + '<br/>'
        }
        return s
      }
        },
        legend: { 
            data: ['利润', '支出', '收入']
        },
        grid: { 
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            { 
                type: 'value',
                 axisLabel: { 
          formatter: (value) => { 
            // 负数取反 显示的就是正数了
            if (value < 0) return -value
            else return value
          }
        }
            }
        ],
        yAxis: [
            { 
                type: 'category',
                axisTick: { 
                    show: false
                },
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        series: [
            { 
                name: '收入',
                type: 'bar',
                stack: '总量',
                label: { 
                    show: true
                },
                data: [320, 302, 341, 374, 390, 450, 420]
            },
            { 
                name: '支出',
                type: 'bar',
                stack: '总量',
                label: { 
                    show: true,
                    position: 'left',
                    formatter: (value) => { 
                    // 值都是负数的 所以需要取反一下
                    return -value.data
                }
             },
                data: [-120, -132, -101, -134, -190, -230, -210]
            }
        ]
    };

# 69. echarts 瀑布阶梯图 数据生成 #

// 3左下角图表数据处理
              let life = item.life;
              if (life <= 76.34) { 
                /* - 只需要处理stepWaterfallBar_3_option_overstepdata1就行,因为其他的数据已经给了默认数据; - stepWaterfallBar_3_option_base_transparent_data默认为0; */
                stepWaterfallBar_3_option_overstepdata1[index] = life;
              } else { 
                if (index === 0) { 
                  stepWaterfallBar_3_option_base_transparent_data[index] = 76.34;
                  stepWaterfallBar_3_option_overstepdata2[index] = life - 76.34;
                } else { 
                  for (let i = index - 1; i > -1; i--) { 
                    if (life > this.mainData[i].life && this.mainData[i].life >= 76.34) { 
                      // 前后数据符合阶梯瀑布图 透明值=前值
                      stepWaterfallBar_3_option_base_transparent_data[index] = this.mainData[index - 1].life;
                      // 同理 超出基准值=当前值-前值
                      stepWaterfallBar_3_option_overstepdata2[index] = life - this.mainData[index - 1].life;
                      return;
                    } else { 
                      stepWaterfallBar_3_option_base_transparent_data[index] = 76.34;
                      stepWaterfallBar_3_option_overstepdata2[index] = life - 76.34;
                    }
                    if (i === 0) { 
                      stepWaterfallBar_3_option_base_transparent_data[index] = 76.34;
                      stepWaterfallBar_3_option_overstepdata2[index] = life - 76.34;
                    }
                  }
                }
              }
            })

# 68. js判断一个元素是否在数组中 #

`includes()` 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 5]

# 67. js去除字符串空格(空白符) #

*  `tr.trim()方法`

> trim()方法是用来删除字符串两端的空白字符并返回，trim方法并不影响原来的字符串本身，它返回的是一个新的字符串。

缺陷：只能去除字符串两端的空格，不能去除中间的空格  
示例：

var str = " 6 6 ";
    var str_1 = str.trim();
    console.log(str_1); //6 6//输出左右侧均无空格

*  单独去除左侧空格则使用 str.trimLeft(); //var str\_1 = str.trimLeft();
 *  单独去除右侧空格则使用 str.trimRight();//var str\_1 = str.trimRight();
 *

https://www.cnblogs.com/a-cat/p/8872498.html

# 66. 高性能js数组去重(12种方法，史上最全) #

https://www.jb51.net/article/176903.htm

# 65. 单个方法里查询多个接口，分别为同一个数组赋值，解决异步问题，该情况下将`.then .catch`替换为`async await` #

async getSymptomDic() { 
       let arr = [];
       // 1
       const heartBloodDic = await getHeartBloodDic();
       if (heartBloodDic.code === 1) { 
         console.log('1 res', JSON.parse(JSON.stringify(heartBloodDic)))
         let obj = { 
           title: "1",
           dic: heartBloodDic.data
         };
         arr = [...arr, obj];
       }
       // 2
       const diabetesDic = await getDiabetesDic();
       if (diabetesDic.code === 1) { 
         console.log('2 res', JSON.parse(JSON.stringify(diabetesDic)))
         let obj = { 
           title: "2",
           dic: diabetesDic.data
         };
         arr = [...arr, obj];
       }
       // 3
       const tomourDic = await getTomourDic();
       if (tomourDic.code === 1) { 
         console.log('3 res', JSON.parse(JSON.stringify(tomourDic)))
         let obj = { 
           title: "3",
           dic: tomourDic.data
         };
         arr = [...arr, obj];
       }
       // 4
       const respiratoryDiseaseDic = await getRespiratoryDiseaseDic()
       if (respiratoryDiseaseDic.code === 1) { 
         console.log('4 res', JSON.parse(JSON.stringify(respiratoryDiseaseDic)));
         let obj = { 
           title: "4",
           dic: respiratoryDiseaseDic.data
         };
         arr = [...arr, obj];
       }
       this.getSymptomDic = arr;// 主要就是为了用以上多个接口为该值丰富数据，如果分别使用链式操作，最终会因为异步，得到一个空数组
       console.log('this.getSymptomDic', JSON.parse(JSON.stringify(this.getSymptomDic)))
     },

# 64. js运算规则，分母不能为0，`0/0 ： NaN`，`1/0 ：Infinity(无穷，无穷大)` #

# 63. js判断对象是否为空对象的几种方法 #

*  `Object.keys()`  
    Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 6]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 7]

# 62. vscode用户片段的快乐使用，动手实现一个自己的snippets #

*  文件-首选项-用户片段
 *  **`vue.json`**

{ 
    	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
    	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    	// same ids are connected.
    	// Example:
    	"Print to console": { 
    		"prefix": "log",
    		"body": [
    			"console.log('$1');",
    			"$2"
    		],
    		"description": "Log output to console"
        },
        "Print to vue_fast_all":{ 
            "prefix": "vue",
            "body": [
                "<template>",
                " <div class='className'>",
                " $1",
                " </div>",
                "</template>",
    
                "<script>",
                "export default {",
                " name: 'className',",
                " components: {},",
                " props: {",
                " // props: {",
                " // type: String",
                " // }",
                " },",
                " data() {",
                " return {",
                " ",
                " };",
                " },",
                " computed: {},",
                " created() {},",
                " mounted() {},",
                " methods: {},",
                " watch: {}",
                " };",
                "</script>",
    
                "<style lang='scss' scoped>",
                ".className{",
                " background: #fff;",
                "}",
                "</style>" ,
            ],
            "description": "vue fast full skeleton"
        },
    }

*  **`javascript.json`**

{ 
    	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
    	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    	// same ids are connected.
        // Example:
        "Print to console_deep":{ 
                "prefix": "clod",
                "body": [
                  "console.log('$1', JSON.parse(JSON.stringify($1)))"
                ],
                "description": "console_deep 一个简单的深拷贝，实现打印数据的直观展示，解决查看对象，数组值需要鼠标一个一个点击的麻烦问题"
        },
        "Print to console.group()":{ 
                "prefix": "clge",
                "body": [
                  "console.group('$1');",
                  "$2",
                  "console.groupEnd();",
                ],
                "description": "console.group()"
        },
    	// "Print to console": { 
    	// "prefix": "log",
    	// "body": [
    	// "console.log('$1');",
    	// "$2"
    	// ],
    	// "description": "Log output to console"
    	// }
    }

# 61. css 颜色透明的`background: transparent` #

# 60. 如何在控制台直接查看对象和数组值，而不需要通过点击属性值来查看 #

处理方法：`let dataHandler = JSON.parse(JSON.stringify(newValue));`(用了一个简单的深拷贝)  
效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 8]

watch: { 
       mainData: { 
         deep: true,
         immediate: false,
         handler(newValue, oldValue) { 
           let dataHandler = JSON.parse(JSON.stringify(newValue));
           console.log('main组件监听 mainData:', dataHandler)
           console.table(dataHandler);
         }
       }
     },

# 59. js百分比处理，`Math.ceil()` 函数返回大于或等于一个给定数字的最小整数。 #

this.cardListData[item.health_class].ratio = Math.ceil(item.ratio * 1000) / 10;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 10]

# 58. js保留到整数(四舍五入)，`Math.round()` 函数返回一个数字四舍五入后最接近的整数。 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 11]

# 57. 数组分割 #

arr.length > 12 && (arr = arr.slice(0, 12));

# 56. ⭐vue超级重要的一个概念：vue 绑定在组件上的数据，父组件修改数据，子组件监听不到变化的问题详解，解决当对象属性变化页面没有响应更新的问题 #

*  问题定位：

this.popupData.bigTitle = bigTitle;

然后将`popupData`绑定到子组件上，此时上面对象属性的修改，子组件会监听不到数据变化；

*  解决方法:

1.  其实，之所以vue没有监听到对象的变化，是因为我在data里的`popupData`是空对象，里面并没有bigTitle这个属性，vue不会去监听对象中没有定义的属性，所以，监听不到变化。最正确的方法：在data中把bigTitle属性添加上，这样，上面代码的属性变化，子组件就能监听到了；
2.  如果不想给data里加默认需要修改的属性，那就直接给绑定的值重新赋一个对象，不要修改对象中的属性 `this.popupData ={ bigTitle};`
3.  使用官方推荐的`this.$set( target, 'propertyName'/index, value )`  
    **解决方法1的官方解释：**  
    ![在这里插入图片描述][20201202172814237.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 12]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 13]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 14]

# 55. 堆叠柱状图，复杂数据结构处理思路 #

情况：

*  首先要过滤掉没有性别的脏数据
 *  然后，同一病种并不都会有成对的男女数据，这一层考虑是稍复杂的

一个比较好的思路：  
可以把xAxisData和男女的data都赋值，xAxisData的数据如果需要动态，可以通过使用对象或者其他结构的数据，先给xAxisData写上动态的name，然后让data来通过上面的对象结构来匹配；  
下面的思路是，xAxisData直接写死，data通过xAxisData的下标匹配赋值；

let arr = diseaseClassNumObj[index];
         console.log('arr', arr)
         console.table(arr);
         let xAxisData = [
           '健康人群',
           '高危人群',
           '心脑血管病',
           '糖尿病',
           '恶行肿瘤',
           '慢性呼吸道疾病'
         ];
         let seriesData0 = [0, 0, 0, 0, 0, 0]; // 女 data
         let seriesData1 = [0, 0, 0, 0, 0, 0] // 男 data
         arr.forEach(item => { 
           if ('GENDER' in item) { 
             item.GENDER === 1 && (seriesData1[item.disease_classify - 1] = item.count);
             item.GENDER === 2 && (seriesData0[item.disease_classify - 1] = item.count);
           }
         });
         console.log('seriesData0', seriesData0)
         console.log('seriesData1', seriesData1)
         this.rightBardata.titleText = '各省健康人数';

应用到堆叠柱状图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 15]

# 54. 数组排序 `sort()` #

Array.sort(function (a, b) {
       return b.value - a.value;
     }),

[{ 
        value: 335,
         name: "0级防控",
         itemStyle: { 
           color: "#9CD0A4",
         },
       },
       { 
         value: 300,
         name: "1级防控",
         itemStyle: { 
           color: "#72B8FA",
         },
       },
       { 
         value: 280,
         name: "2级防控",
         itemStyle: { 
           color: "#E9B43B",
         },
       },
       { 
         value: 260,
         name: "3级防控",
         itemStyle: { 
           color: "#9785FF",
         },
       },
       { 
         value: 234,
         name: "4级防控",
         itemStyle: { 
           color: "#E46B3D",
         },
       },
       { 
         value: 200,
         name: "5级防控",
         itemStyle: { 
           color: "#AF2B2B",
         },
       },
     ].sort(function (a, b) { 
       return b.value - a.value;
     }),

# 53. vue data对象重新赋值无效(未更改)的解决方式`this.$set(this.model,'name',response.name)` #

[https://www.jb51.net/article/191669.htm][https_www.jb51.net_article_191669.htm]

# 52. 多折叠面板，实现默认点击某子项 #

dom结构参考：多折叠面板，实现只显示一个点击态

# 51. vue 实例方法 `this.$nextTick(()=>{ })` #

**非常重要的一个概念：**

[**vue.js异步更新队列**https://cn.vuejs.org/v2/guide/reactivity.html\#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97][vue.js_https_cn.vuejs.org_v2_guide_reactivity.html_E5_BC_82_E6_AD_A5_E6_9B_B4_E6_96_B0_E9_98_9F_E5_88_97]

*  **`this.$nextTick(()=>{ })`**
 *  **用法：**  
    在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

// 修改数据
    vm.msg = 'Hello'
    // DOM 还没有更新
    Vue.nextTick(function () { 
      // DOM 更新了
    })
    
    // 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
    Vue.nextTick()
      .then(function () { 
        // DOM 更新了
      })

> 2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。

# 50. 多折叠面板，实现只显示一个点击态 #

<el-collapse v-model="activeNames">
      <template v-for="(item,index) in diseaseList">
        <el-collapse-item v-if="item.detail.length>1" :style="{'margin-bottom':(index<diseaseList.length-1)?'20px':'0'}"
          :name="index">
          <template slot="title">
            <el-row class="accordion-head">
              <el-col :span="17">{ { item.title}}</el-col>
              <el-col :span="5">{ { item.num}}人</el-col>
              <el-col :span="2">{ { item.ratio}}</el-col>
            </el-row>
          </template>
          <template v-for="(detailItem, detailIndex) in item.detail">
            <el-row class="line-item" v-if="detailItem.count>0"
              :class="[detailIndex===middleList.length-1?'margin-bottom-0':'',rowActive===item.title+detailIndex?'row-active':'']"
              :style="{'background': (rowActive===item.title+detailIndex?rowActiveColor:'')}" :key="detailIndex"
              @click.native="rowActive=item.title+detailIndex;diseaseClick(detailItem.HEADING_CODE,detailItem.subTitle,item.title)">
              <el-col :span="17">{ {  detailItem.subTitle }}</el-col>
              <el-col :span="5">{ {  detailItem.count }}人</el-col>
              <el-col :span="2">{ {  detailItem.ratio }}</el-col>
            </el-row>
          </template>
        </el-collapse-item>
        <el-row class="alone-head" v-else :style="{'margin-bottom':(index<diseaseList.length-1)?'20px':'0'}">
          <el-col :span="17">{ { item.title}}</el-col>
          <el-col :span="5">{ { item.num}}人</el-col>
          <el-col :span="2">{ { item.ratio}}</el-col>
        </el-row>
      </template>
    
        data() { 
          return { 
            activeNames: [2], // 可同时展开多个面板
            rowActive: '',
    		}
    	}

**关键点：**  
将绑定的唯一值，设为当前循环的index+父节点循环的item.name，使变量唯一，如果只设置为当前循环的index则会有多个点击态的bug；

<el-row class="line-item" v-if="detailItem.count>0"
              :class="[detailIndex===middleList.length-1?'margin-bottom-0':'',rowActive===item.title+detailIndex?'row-active':'']"
              :style="{'background': (rowActive===item.title+detailIndex?rowActiveColor:'')}" :key="detailIndex"          @click.native="rowActive=item.title+detailIndex;diseaseClick(detailItem.HEADING_CODE,detailItem.subTitle,item.title)">

**效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 16]

# 49. js 将对象的属性置为数组后，push操作和解构赋值的区别。【push操作带来的问题】 #

if (item.PREVENTION_CLASS in newGenderRatioLegend) { 
       console.log('newGenderRatioLegend', newGenderRatioLegend)
       console.log('newGenderRatioLegend[item.PREVENTION_CLASS]', newGenderRatioLegend[item
         .PREVENTION_CLASS])
       newGenderRatioLegend[item.PREVENTION_CLASS] = [...newGenderRatioLegend[item.PREVENTION_CLASS], item
         .count
       ]; // 解构赋值
       // newGenderRatioLegend[item.PREVENTION_CLASS].push(item.count) // push 操作
     } else { 
       // newGenderRatioLegend[item.PREVENTION_CLASS] = [].push(item.count); // push 操作
       newGenderRatioLegend[item.PREVENTION_CLASS] = [item.count];// 解构赋值
     }

*  `push`操作：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 17]
 *  `结构赋值`:  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 18]

# 48. JavaScript 判断对象中是否有某属性 #

[https://www.cnblogs.com/shapeY/p/9180908.html][https_www.cnblogs.com_shapeY_p_9180908.html]

*  object.hasOwnProperty(key)

for (const key in object) { 
          if (object.hasOwnProperty(key)) { 
              const element = object[key];
              
          }
      }

[https://www.cnblogs.com/weiqinl/p/8683207.html][https_www.cnblogs.com_weiqinl_p_8683207.html]

# 47. try catch 和 then catch 对比 #

# 46. 折叠面板 添加点击态样式 #

<template>
      <div class="sfleft">
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              <el-row class="accordion-head">
                <el-col :span="17">慢病高危险人群</el-col>
                <el-col :span="5">23487人</el-col>
                <el-col :span="2">20%</el-col>
              </el-row>
            </template>
            <el-row class="line-item"
              :class="[index===middleList.length-1?'margin-bottom-0':'',rowActive===index?'row-active':'']"
              :style="{'background': (rowActive===index?rowActiveColor:'')}" v-for="(item, index) in middleList"
              :key="index" @click.native="rowActive=index;tete(index)">
              <el-col :span="17">{ {  item.name }}</el-col>
              <el-col :span="5">{ {  item.number }}人</el-col>
              <el-col :span="2">{ {  item.ratio }}%</el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </div>
    </template>
    
    <script>
      export default { 
        data() { 
          return { 
            rowActive: Number,
            rowActiveColor: '#4e57aa',
            middleList: [{ 
                name: "心脑血风险人群",
                number: 345,
                ratio: 40,
              },
              { 
                name: "肺群",
                number: 345,
                ratio: 30,
              },
              { 
                name: "乳险人群",
                number: 345,
                ratio: 25,
              },
              { 
                name: "大肠群",
                number: 345,
                ratio: 20,
              },
              { 
                name: "人群",
                number: 345,
                ratio: 15,
              },
              { 
                name: "肝癌人群",
                number: 345,
                ratio: 10,
              },
              { 
                name: "风险人群",
                number: 345,
                ratio: 4,
              },
            ],
          };
        },
        methods: { 
          tete(index) { 
            console.log('click test', index)
          }
        },
      }
    
    </script>
    
    <style lang="scss" scoped>
      .sfleft { 
        /deep/ .el-collapse { 
          border: 0;
          background: rgba(10, 15, 52, 0.8);
    
          .margin-bottom-0 { 
            margin-bottom: 0;
          }
    
          .el-collapse-item__header.is-active { 
            border-radius: 8px 8px 0 0;
          }
    
          .el-collapse-item__header { 
            padding-left: 0;
            padding: 20px;
            border-radius: 8px;
            height: 60px;
            background: rgba(10, 15, 52, 0.8);
            border: 1px solid rgba(115, 166, 255, 0.2);
    
            .accordion-head { 
              width: 100%;
              font-size: 16px;
              font-weight: 700;
              color: #72b8fa;
            }
    
            .el-collapse-item__arrow,
            .el-icon-arrow-right { 
              display: none;
            }
          }
    
          .el-collapse-item__wrap { 
            background-color: unset;
    
            .el-collapse-item__content { 
              padding: 6px;
              background: rgba(10, 15, 52, 0.8);
              font-size: 12px;
              border: 1px solid rgba(115, 166, 255, 0.2);
              border-top: 0;
              border-radius: 0 0 8px 8px;
            }
          }
    
          .line-item { 
            font-size: 12px;
            color: #4d77c6;
            cursor: pointer;
            opacity: 0.8;
            border-radius: 6px;
            padding: 14px;
          }
    
          .row-active { 
            font-weight: 700;
            color: #ffffff;
            background: #4e57aa;
          }
        }
      }
    </style>

**效果：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 19]

# 45. vue中 `:style` 与 `:class` 三元运算符使用 #

[https://www.jianshu.com/p/31664974303d][https_www.jianshu.com_p_31664974303d]

# 44. element-ui 折叠面板 自定义面板标题 样式修改 #

<template>
      <div class="sfleft">
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              <div class="accordion-head" style="display:flex;">
                <span>慢病</span>
                <span>23ren</span>
                <span>20%</span>
              </div>
            </template>
            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </template>
    
    <script>
      export default { 
        data() { 
          return { 
          };
        },
      }
    
    </script>
    
    <style lang="scss" scoped>
      .sfleft { 
        /deep/ .el-collapse { 
          border: 0;
          background: rgba(10, 15, 52, 0.8);
    
          .el-collapse-item__wrap { 
            background-color: unset;
    
            .el-collapse-item__content { 
              padding: 20px;
              background: rgba(10, 15, 52, 0.8);
              font-size: 12px;
              color: #4d77c6;
              border: 1px solid rgba(115, 166, 255, 0.2);
              border-top: 0;
              border-radius: 0 0 8px 8px;
            }
          }
    
          .el-collapse-item__header.is-active { 
            border-radius: 8px 8px 0 0;
          }
    
          .el-collapse-item__header { 
            padding-left: 0;
            padding: 20px;
            border-radius: 8px;
            height: 60px;
            background: rgba(10, 15, 52, 0.8);
            border: 1px solid rgba(115, 166, 255, 0.2);
    
            .accordion-head { 
              width: 100%;
              justify-content: space-between;
              align-items: center;
              font-size: 14px;
              font-weight: 700;
              color: #72b8fa;
            }
    
            .el-collapse-item__arrow,
            .el-icon-arrow-right { 
              display: none;
            }
          }
        }
      }
    
    </style>

**实现效果：**

*  收缩样式：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 20]
 *  展开样式：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 21]

# 43. vue 公共组件利器 插槽：solt #

**注意：**  
在 2.6.0 中，vue为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。  
详见：  
[https://cn.vuejs.org/v2/guide/components-slots.html][https_cn.vuejs.org_v2_guide_components-slots.html]  
参考下面实现手风琴的写法；手风琴里的插槽用的是已废弃的写法

# 42. vue实现折叠面板-手风琴效果 升级版 提供title插槽，标题盒子可自定义dom元素 #

记录一下

# 41. CSS修改浏览器滚动条的样式（实例详解）(转载) #

**[原文：https://zhuanlan.zhihu.com/p/142523164][https_zhuanlan.zhihu.com_p_142523164]**  
首先介绍滚动条相关的CSS代码，以及他们的含义

::-webkit-scrollbar：指滚动条整体部分，它的属性有width,height,background等
    ::-webkit-scrollbar-button ： 指滚动条两边的按钮。当不需要时可以用display:none将其隐藏
    ::-webkit-scrollbar-track ：指外层轨道部分，当不需要时可以用display:none将其隐藏，也可以添加你想要的颜色
    ::-webkit-scrollbar-track-piece ：指内层轨道部分，即滚动条中间的部分
    ::-webkit-scrollbar-thumb ： 指滚动条里面可以拖动的部分，也就是滑块
    ::-webkit-scrollbar-corner ：指边角部分
    ::-webkit-resizer ：他用来定义右下角滑块的样式

但是最常用的是滚动条整体部分（-webkit-scrollbar），滑块（-webkit-scrollbar-thumb）以及外轨道（ -webkit-scrollbar-track）三部分。

接下来我们将div盒子里面超出的部分隐藏，给div设置滚动条样式，看看怎么用CSS实现滚动条样式。  
**实例：**

<divclass="scroll">
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    have a nice day <br/>
    </div>

.scroll{ 
    margin:100pxauto;
    border: 1pxsolid#000;
    width: 200px;
    height: 300px;
    overflow: auto;
    }
    .scroll::-webkit-scrollbar { 
    width: 10px;
    height: 10px;
    }
    /*正常情况下滑块的样式*/
    .scroll::-webkit-scrollbar-thumb { 
    background-color: rgba(0,0,0,.05);
    border-radius: 10px;
    -webkit-box-shadow: inset1px1px0rgba(0,0,0,.1);
    }
    /*鼠标悬浮在该类指向的控件上时滑块的样式*/
    .scroll:hover::-webkit-scrollbar-thumb { 
    background-color: rgba(0,0,0,.2);
    border-radius: 10px;
    -webkit-box-shadow: inset1px1px0rgba(0,0,0,.1);
    }
    /*鼠标悬浮在滑块上时滑块的样式*/
    .scroll::-webkit-scrollbar-thumb:hover { 
    background-color: rgba(0,0,0,.4);
    -webkit-box-shadow: inset1px1px0rgba(0,0,0,.1);
    }
    /*正常时候的主干部分*/
    .scroll::-webkit-scrollbar-track { 
    border-radius: 10px;
    -webkit-box-shadow: inset006pxrgba(0,0,0,0);
    background-color: white;
    }
    /*鼠标悬浮在滚动条上的主干部分*/
    .scroll::-webkit-scrollbar-track:hover { 
    -webkit-box-shadow: inset006pxrgba(0,0,0,.4);
    background-color: rgba(0,0,0,.01);
    }

**效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]  
注意：如果是水平滚动条，那么width属性不起作用，height可以设置滚动条的高度；如果是竖直滚动条，那么height高度不起作用，width可以用来设置滚动条的宽度。在工作中可以根据需要设置想要的样式，没有接触过得小伙伴可以多去尝试，加深对知识点的理解，希望可以帮助到你！

以上就是如何用CSS修改浏览器滚动条的样式（实例详解）的详细内容，更多请关注他（[https://www.zhihu.com/people/cheng-xu-yuan-de-ri-chang-57][https_www.zhihu.com_people_cheng-xu-yuan-de-ri-chang-57]）！！！

# 40. vue实现折叠面板-手风琴效果（转载） #

[**原文：https://juejin.cn/post/6844904015101165582**][https_juejin.cn_post_6844904015101165582]

1.  **第一步，先新建一个Accordion.vue文件用来存放你的组件。**

<template>
      <div class="Accordion">
        
        <div class="AccordionTitle">
          <div class="AccordionTitleL LEFTTEXT" v-text="AccordionData" v-show="isSlotSecond != 2">fadasfa</div>
          <div class="AccordionTitleL LEFTTEXT" v-show="isSlotSecond == 2">
            <slot name="Second"></slot>
          </div>
          <div class="ClickArea" @click="Shrink">
            <div class="AccordionTitleR LEFTTEXT" v-text="RightContent"></div>
          </div>
        </div>
        
        <div class="AccordionBody" ref="AccordionBody">
          
          
          <div class="ContentA">
            <slot name="First"></slot>
            <p class="isshrink" v-show="isShrink"></p>
          </div>
        </div>
      </div>
    </template>
    
    <script>
      /* Accordionindex 控制某一个展开收缩 * AccordionData 左上角标题的文字 * isSlotSecond 决定显示那个插槽 first or second * 这样的好处可以实现多个共存 * */
      export default { 
        props: ["AccordionData", "Accordionindex", "isSlotSecond"],
        data() { 
          return { 
            RightContent: "收缩",
            isshow: this.Accordionindex,
            isShrink: false
          };
        },
        methods: { 
          Shrink() { 
            let AllHiden = this.$refs.AccordionBody;
            let eleMoreHeight = AllHiden.childNodes[0].offsetHeight;
            AllHiden.style.height = eleMoreHeight + "px";
            setTimeout(() => { 
              if (this.isshow == 0) { 
                AllHiden.style.height = "0px";
                this.isshow = 1;
                this.RightContent = "展开";
                this.isShrink = false;
              } else { 
                AllHiden.style.height = eleMoreHeight + "px";
                this.isshow = 0;
                this.RightContent = "收缩";
                this.isShrink = true;
              }
            }, 1);
          }
        }
      }
    
    </script>
    
    <style lang="scss" scoped>
      .Accordion { 
        width: 100%;
        height: auto;
      }
    
      .AccordionTitle { 
        width: 100%;
        height: 50px;
        background: #e4eaec;
        padding: 0px 20px 0px 20px;
        display: flex;
      }
    
      /* 动画效果采用css3来实现 */
      .AccordionBody { 
        position: relative;
        height: auto;
        overflow: hidden;
        -webkit-transition: height 0.6s;
        -moz-transition: height 0.6s;
        -o-transition: height 0.6s;
        transition: height 0.6s;
      }
    
      .AccordionTitleL { 
        float: left;
        font-size: 14px;
        background: #e4eaec;
      }
    
      .AccordionTitleR { 
        float: right;
        font-size: 12px;
        color: #518bdc;
      }
    
      .LEFTTEXT { 
        height: 50px;
        line-height: 50px;
      }
    
      .ClickArea { 
        flex: 1;
      }
    
      .isshrink { 
        width: 100%;
        height: 20px;
    
      }
      /* 后期如果有修改样式的需求，直接在引用页面修改就好 */
    </style>

1.  **第二步，新建一个index.vue文件来引用你的组件**

<template>
      <div class="FundMangerDetail">
        <div class="baseBox W100 BGCW MT20">
          
          <Accordion class="rightFixed0" :Accordionindex="0" :isSlotSecond="0" :AccordionData="baseInformation">
            <div class="baseInformation" slot="First">
              
              
              <div style="background:#fff;color:white">test</div>
            </div>
          </Accordion>
          
        </div>
      </div>
    </template>
    
    <script>
      import Accordion from "../pComponents/Accordion";
      // import baseInformation from "./Models/baseInformation";
      export default { 
        components: { 
          Accordion,
          // baseInformation,
        },
        data() { 
          return { 
            bodyScroll: "",
            baseInformation: "基本资料",
          };
        },
      }
    
    </script>
    
    <style lang="scss" scoped>
    
    </style>

1.  效果  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 1]

# 39. vue实现图片tabs标签页 #

<el-row>
            <template v-for="(item,index) in provinceResources">
              <el-col :span="4" @click.native="provinceItemActive = index" :key="index">
                <img v-if="index !== provinceItemActive" :src="require(`@/assets/province_images/${item}.png`)" alt="">
                <img v-else :src="require(`@/assets/province_images/${provinceActiveResources[index]}.png`)" alt="">
              </el-col>
            </template>
          </el-row>
    
    
    <script>
      export default { 
        data() { 
          return { 
            provinceItemActive: 1,
            provinceResources: [
              "河南2",
              "湖北2",
              "湖南2",
              "广西2",
              "广东2",
              "海南2"
            ],
            provinceActiveResources: [
              "河南1",
              "湖北1",
              "湖南1",
              "广西1",
              "广东1",
              "海南1"
            ]
          }
        },
      }
    </script>
    
     .right-section { 
       width: 50%;
       padding-left: 20px;
    
       .el-row { 
         width: 100%;
         height: 100%;
    
         .el-col { 
           height: 100%;
           cursor: pointer;
           display: flex;
           justify-content: center;
           align-items: center;
         }
       }
     }

实现效果  
![在这里插入图片描述][20201126133724682.png_pic_center]

# 38. vue动态渲染图片 #

<template>
      <img :src="require(`@/assets/images/${type}.png`)" alt="">
    </template>
    
    <script>
      export default { 
        props: { 
          type: String
        },
        data() { 
          return { 
            
          }
        }
      }
    </script>
    
    <style lang="scss" scoped>
      img { 
        height: 14px;
        width: 14px;
        cursor: pointer;
      }
    </style>

# 37. vue 手写tabs标签页 #

https://www.cnblogs.com/shenbo666/p/13208029.html

核心思路，click改变单一变量，单一变量来控制不同页面的:class

# 36. echarts markline 个性化定制 #

ui  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 2]  
代码实现：

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 3]

# 35. echarts x,y轴name 个性化定制 ，通过格式化label来实现 #

ui效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 4]  
代码实现：

实现效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 5]

# 34. js 标准二维数组变一维数组的方法 #

**实践**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 6]

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Array/Reduce  
mdn官方解答  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 7]

https://www.cnblogs.com/EnSnail/p/9762764.html

# 33. js获取数组中的最大值/最小值 #

Math.max(1,2,3,4,4) // 4
      Math.max(...this.manData) //需要解构
      let max = Math.max(Math.max(...this.manData), Math.max(...this.womanData)) + 10;

[https://www.cnblogs.com/weiqinl/p/10945596.html\#%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E8%BF%90%E8%A1%8C%E7%BB%93%E6%9E%9C][https_www.cnblogs.com_weiqinl_p_10945596.html_E6_B5_8F_E8_A7_88_E5_99_A8_E4_B8_AD_E8_BF_90_E8_A1_8C_E7_BB_93_E6_9E_9C]

# 32. 手写弹框，解决点击弹出层外消失，点击弹出层不消失 #

# 31. 解决echarts宽度100%变成了100px #

加上自己动态改变z-index,解决该问题的方法  
https://blog.csdn.net/HYeeee/article/details/108199973

# 30. 记录自己写的百分比处理 #

# 29. 数组求和，同上（百分比处理） #

// 求和
       let sum = 0;
       item.data.forEach(i => { 
         sum += i.value;
       })
       // 求百分比 修改data.name
       let data = JSON.parse(JSON.stringify(item.data));
       data.forEach(dataItem => { 
         let ratio = (dataItem.value / sum) * 100;
         if (ratio.toString().split('.').length > 1) { 
           dataItem.name += (' ' + ratio.toFixed(1) + '%');
         } else { 
           dataItem.name += (' ' + ratio + '%');
         }
       })

# 28. Vue子组件调用父组件的方法 #

[https://cn.vuejs.org/v2/api/\#vm-emit][https_cn.vuejs.org_v2_api_vm-emit]  
[https://www.cnblogs.com/jin-zhe/p/9523782.html][https_www.cnblogs.com_jin-zhe_p_9523782.html]

# 27. CSS中如何设置父元素透明度不影响子元素透明度 #

https://www.cnblogs.com/mica/p/11162582.html

# 26. 手写弹出框，加蒙层效果，参考element ui #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 8]

# 25. js实现的点击div区域外隐藏div区域 #

https://www.cnblogs.com/sghy/p/10044313.html

**还有自己写的那个弹出层**

# 24. vue盒子收缩，使用动画 #

[https://cn.vuejs.org/v2/guide/transitions.html\#%E5%8D%95%E5%85%83%E7%B4%A0-%E7%BB%84%E4%BB%B6%E7%9A%84%E8%BF%87%E6%B8%A1][https_cn.vuejs.org_v2_guide_transitions.html_E5_8D_95_E5_85_83_E7_B4_A0-_E7_BB_84_E4_BB_B6_E7_9A_84_E8_BF_87_E6_B8_A1]

# 23. 可选链操作符 - JavaScript | MDN `?.` #

**可选链实现的功能也可以用obj\[a\]来实现**

if (res.code === 1) {
                let data = res.data[0];
                console.log('data', data);
                let leftTopData = {};
                leftTopData.areaNum = data[areaNum];  // 查询对象中有无属性来实现可选链的效果
              }

可选链操作符 - JavaScript | MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/%E5%8F%AF%E9%80%89%E9%93%BE  
【骚操作系列】一、如何通过babel配置使用可选链`?.`和双问号`??` \- 简书 https://www.jianshu.com/p/bca4ce835caf

于是，立马专门去 babel在线编译了一下，编译出来的内容如下：

“use strict”;

var x = null;  
var y = x === null || x === void 0 ? void 0 : x.a;  
字符数相比于源代码增长了大概三倍，确实会对最终项目的体积产生影响，不过考虑到为了保证项目代码正常运行，必要的判空逻辑是需要的，只不过如果能避免滥用当然更好了

# 22. 总结axios请求接口的不同写法 #

# 21. vscode格式化代码无效解决方案（开发框架vue） #

https://blog.csdn.net/u014054437/article/details/79980691

# 20. vue获取dom元素高度的方法 #

http://www.yuxang.com/vue%E8%8E%B7%E5%8F%96dom%E5%85%83%E7%B4%A0%E9%AB%98%E5%BA%A6%E7%9A%84%E6%96%B9%E6%B3%95/  
https://www.cnblogs.com/lhl66/p/7908133.html

# 19. JS中如何正确的使用有变量的calc()？https://blog.csdn.net/qq\_40421277/article/details/79618369 #

# 18. 学习css函数 #

https://www.runoob.com/cssref/css-functions.html

# 17. echart纵坐标标签特别长换行显示 #

https://www.cnblogs.com/wgl0126/p/9187901.html

# 16. 记css伪类的使用 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 9]

# 15. vue中如何动态修改伪元素样式 #

# 14. 同上 通过使用css变量实现动态修改伪元素样式 #

https://blog.csdn.net/qq\_44827891/article/details/106413564  
https://segmentfault.com/q/1010000018610355

# 13. 补充echarts 地图缩放大小，可小数 #

geo. zoom = 1number  
当前视角的缩放比例。

# 12. 记es6导入导入 #

# 11. 记录vscode 快速调整颜色格式的方法，16进制转rgb，rgb转16进制 20min #

# 10. echarts js报错 Cannot read property ‘getAttribute’ of null - sirdong - 博客园 #

https://www.cnblogs.com/sirdong/p/11782382.html  
还要记得就是，除了自己想要渲染得图表，还要看自己有没有用了document.getElementById(“bie-right”)，如果用了，但是没有这个dom元素，也会报这个错，导致整个使用document.getElementById（）都不生效

# 9. vue nextTick https://cn.vuejs.org/v2/api/index.html\#Vue-nextTick #

# 8. sort排序 #

Examples - Apache ECharts (incubating) https://echarts.apache.org/examples/zh/editor.html?c=pie-custom  
正序和倒序

# 7. echarts.js 动态生成多个图表 使用vue封装组件 #

https://blog.csdn.net/ange2017/article/details/95078159?utm\_medium=distribute.pc\_aggpage\_search\_result.none-task-blog-2allsobaiduend~default-1-95078159.nonecase&utm\_term=%E5%BE%AA%E7%8E%AF%E5%8A%A8%E6%80%81%E7%94%9F%E6%88%90echarts&spm=1000.2123.3001.4430

# 6. 记录map和foreach的区别，应用场景和性能 #

# 5. 记录局部作用域 #

this.chartOptions = this.options.map((item) => { 
            let baseOption = JSON.parse(JSON.stringify(this.baseOption));
            baseOption.title.text = item.ratio + "%";
            baseOption.tooltip.formatter = item.ratio + "%";
            baseOption.series.data[0].value = item.ratio;
            baseOption.series.data[1].value = 100 - item.ratio;
            baseOption.series.data[0].itemStyle.color = item.color;
            return baseOption;
          });

和下面的区别：

let baseOption = JSON.parse(JSON.stringify(this.baseOption));
          this.chartOptions = this.options.map((item) => { 
            baseOption.title.text = item.ratio + "%";
            baseOption.tooltip.formatter = item.ratio + "%";
            baseOption.series.data[0].value = item.ratio;
            baseOption.series.data[1].value = 100 - item.ratio;
            baseOption.series.data[0].itemStyle.color = item.color;
            return baseOption;
          });

<template>
      <div>
        <header>
          <el-row class="header-row">
            <el-col :span="6" class="header-row-col">
              <div id="left-pie"></div>
            </el-col>
            <el-col :span="9" class="header-row-col">
              <div class="title">危险率</div>
              <el-row id="middle-pie">
                <el-col
                  :span="4"
                  class="middle-pie-col"
                  v-for="(item, index) in chartOptions"
                  :key="index"
                >
                  <Progress :option="item" :id="'chart' + index"></Progress>
                  <div class="label">{ {  index }}级</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="9" class="header-row-col">
              <div class="title">规率</div>
              <div id="right-pid"></div>
            </el-col>
          </el-row>
        </header>
      </div>
    </template>
    
    <script>
    // 引入 ECharts 主模块
    var echarts = require("echarts/lib/echarts");
    require("echarts/lib/chart/pie");
    // 引入提示框和标题组件
    require("echarts/lib/component/tooltip");
    require("echarts/lib/component/title");
    require("echarts/lib/component/legend");
    import Progress from "./Progress";
    export default { 
      data() { 
        return { 
          options: [
            { 
              ratio: 30,
              color: "#9CD0A4",
            },
            { 
              ratio: 25,
              color: "#72B8FA",
            },
            { 
              ratio: 44,
              color: "#9785FF",
            },
            { 
              ratio: 16,
              color: "#E9B43B",
            },
            { 
              ratio: 20,
              color: "#E46B3D",
            },
            { 
              ratio: 10,
              color: "#AF2B2B",
            },
          ],
          chartOptions: [],
          baseOption: { 
            title: { 
              show: true,
              text: "", // 联调的时候用变量控制
              x: "center",
              y: "center", // 通过x,y将标题(进度)定位在圆环中心
              textStyle: { 
                fontSize: "16",
                color: "#fff",
                fontWeight: "400",
                fontFamily: "DINPro, DINPro-Regular",
              },
            },
            tooltip: { 
              trigger: "item",
              formatter: "{d}%",
              show: false,
            },
            legend: { 
              orient: "vertical",
              x: "left",
              show: false,
            },
            series: { 
              name: "",
              type: "pie",
              avoidLabelOverlap: true,
              hoverAnimation: false,
              label: { 
                normal: { 
                  show: false,
                  position: "center",
                },
                emphasis: { 
                  show: false,
                },
              },
              labelLine: { 
                normal: { 
                  show: false,
                },
              },
              data: [
                { 
                  value: "",
                  name: "",
                  itemStyle: { 
                    color: "#6790D8",
                  },
                },
                { 
                  value: "", // 联调的时候用变量控制
                  name: "",
                  itemStyle: { 
                    color: "transparent",
                  },
                },
              ],
              radius: ["80%", "100%"],
              // center: ["30%", "50%"],
            },
          },
        };
      },
      components: { 
        Progress,
      },
      created() { 
        this.getChartOptionList();
      },
      mounted() { 
        this.drawCharts();
      },
      methods: { 
        getChartOptionList() { 
          let baseOption = JSON.parse(JSON.stringify(this.baseOption));
          this.chartOptions = this.options.map((item) => { 
            baseOption.title.text = item.ratio + "%";
            baseOption.tooltip.formatter = item.ratio + "%";
            baseOption.series.data[0].value = item.ratio;
            baseOption.series.data[1].value = 100 - item.ratio;
            baseOption.series.data[0].itemStyle.color = item.color;
            return baseOption;
          });
          console.log("chartoption", this.chartOptions);
          this.chartOptions.forEach((item) => { 
            console.log(item.title.text);
          });
        },
        drawCharts() { 
          console.log(document.getElementById("left-pie"));
          // 基于准备好的dom，初始化echarts实例
          var leftPie = echarts.init(document.getElementById("left-pie"));
          // var rightPie = echarts.init(document.getElementById("bie-right"));
          window.addEventListener("resize", () => { 
            leftPie.resize();
          });
          var leftPieOption = { 
            title: { 
              text: "各等比",
              left: 0,
              top: 0,
              textStyle: { 
                color: "#fff",
                fontSize: 16,
              },
            },
            tooltip: { 
              trigger: "item",
              formatter: "{a} <br/>{b}: {c} ({d}%)",
            },
            legend: { 
              orient: "vertical",
              top: 55,
              left: 0,
              data: [
                "0控",
                "1控",
                "2控",
                "4控",
                "4控",
                "5防控",
              ],
              textStyle: { 
                color: "#fff",
                fontSize: 12,
                padding: [0, 14, 0, 0],
              },
              itemWidth: 14,
              itemHeight: 8,
              itemGap: 20,
              borderRadius: [1, 1, 1, 1],
            },
            series: [
              { 
                roseType: "radius",
                type: "pie",
                avoidLabelOverlap: false,
                label: { 
                  show: false,
                },
                emphasis: { 
                  label: { 
                    show: true,
                    fontSize: "30",
                    fontWeight: "bold",
                  },
                },
                labelLine: { 
                  show: false,
                },
                // itemStyle: { 
                // borderWidth: 3, //设置border的宽度有多大
                // borderColor: "#262D68",
                // },
                radius: ["0%", "85%"],
                data: [
                  { 
                    value: 335,
                    name: "0级防控",
                    itemStyle: { 
                      color: "#9CD0A4",
                    },
                  },
                  { 
                    value: 300,
                    name: "1级防控",
                    itemStyle: { 
                      color: "#72B8FA",
                    },
                  },
                  { 
                    value: 280,
                    name: "2控",
                    itemStyle: { 
                      color: "#E9B43B",
                    },
                  },
                  { 
                    value: 260,
                    name: "3控",
                    itemStyle: { 
                      color: "#9785FF",
                    },
                  },
                  { 
                    value: 234,
                    name: "防",
                    itemStyle: { 
                      color: "#E46B3D",
                    },
                  },
                  { 
                    value: 200,
                    name: "5控",
                    itemStyle: { 
                      color: "#AF2B2B",
                    },
                  },
                ].sort(function (a, b) { 
                  return b.value - a.value;
                }),
                center: ["58%", "60%"],
              },
            ],
          };
          leftPie.setOption(leftPieOption);
        },
        // methods end
      },
    };
    </script>
    
    <style lang="scss" scoped>
    header { 
      width: 100%;
      height: 232px;
      background: #343c8399;
      border: 1px solid #606cdf;
      border-radius: 12px;
      padding: 40px 30px 20px;
      position: relative;
      .header-row { 
        height: 100%;
        .header-row-col { 
          height: 100%;
          overflow: hidden;
          #left-pie { 
            height: 100%;
            width: 100%;
          }
          #middle-pie { 
            width: 100%;
            height: calc(100% - 64px);
            .middle-pie-col { 
              height: 100%;
            }
            .label { 
              margin-top: 7px;
              text-align: center;
              height: 17px;
              font-size: 12px;
              font-family: SourceHanSansSC, SourceHanSansSC-Regular;
              color: #5d6dbd;
              line-height: 17px;
            }
          }
          .title { 
            height: 24px;
            font-size: 16px;
            font-family: SourceHanSansSC, SourceHanSansSC-Bold;
            font-weight: 700;
            text-align: left;
            color: #ffffff;
            line-height: 24px;
            margin-bottom: 40px;
          }
        }
      }
    }
    </style>

# 4. 记录vue布局样式设计 #

记之前要研究清楚，这两个类名，内部能用外部的吗？外部能用内部的吗？要好好了解清楚  
![在这里插入图片描述][20201111151832890.png_pic_center]

父组件布局  
父组件通过给组件加类名写样式来设计布局

<template>
      <div class="patient-classification">
        <Head class="header"></Head>
        <Main></Main>
      </div>
    </template>
    
    <script>
    import Head from "./compontents/Head";
    import Main from "./compontents/Main";
    export default { 
      components: { 
        Head,
        Main,
      },
    };
    </script>
    <style lang="scss" scoped>
    .patient-classification { 
      height: 100%;
      color: #fff;
      position: relative;
      .header { 
        width: 100%;// ！！！
        height: 232px;// ！！！
      }
    }
    </style>

子组件  
子组件跟节点宽高设为100%

<template>
      <header>
      </header>
    </template>
    <style lang="scss" scoped>
    header { 
      width: 100%;// !!!
      height: 100%; // !!!
      background: #343c8399;
      border: 1px solid #606cdf;
      border-radius: 12px;
      padding: 40px 30px 20px;
      position: relative;
    }
    </style>

# 3. echarts 柱状图颜色渐变效果 #

echart 渐变内置生成器echarts.graphic.LinearGradient\_假装是个web dog-CSDN博客  
https://blog.csdn.net/weixin\_44897255/article/details/96877562

# 2. 屏幕不够大？只有一个屏幕？Win10虚拟桌面值得你拥有！！ #

屏幕不够大？只有一个屏幕？Win10虚拟桌面值得你拥有！！\_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili https://www.bilibili.com/video/BV1EJ411s7BM?from=search&seid=16644706457606251170

# 1. js实现分页，分割数组 #

# map和forEach的区别 #

[https://www.cnblogs.com/leaf930814/p/6667011.html][https_www.cnblogs.com_leaf930814_p_6667011.html]

[https://www.jianshu.com/p/83aa9a2a4055][https_www.jianshu.com_p_83aa9a2a4055] （**这篇写的不错**）

[856b2841d599fb44c649b8d7eb92f960.png]: /images/20221120/2abbc3eef38541908525edf235f36340.png
[https_www.cnblogs.com_linsinan_p_6132241.html]: https://www.cnblogs.com/linsinan/p/6132241.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201230113752687.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[20201230114534742.png]: https://img-blog.csdnimg.cn/20201230114534742.png
[20201229182024895.png]: https://img-blog.csdnimg.cn/20201229182024895.png
[20201229182107631.png]: https://img-blog.csdnimg.cn/20201229182107631.png
[20201229171150310.png]: https://img-blog.csdnimg.cn/20201229171150310.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020122917110265.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[https_www.cnblogs.com_longflag_p_13277915.html]: https://www.cnblogs.com/longflag/p/13277915.html
[https_www.cnblogs.com_yanzhenjingyan_p_10125402.html]: https://www.cnblogs.com/yanzhenjingyan/p/10125402.html
[https_www.jianshu.com_p_b21196a3a105]: https://www.jianshu.com/p/b21196a3a105
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201215133051453.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201215115055655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201208175109241.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201208175149133.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201207150952515.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201207151015325.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201207030655906.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201204175429230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20201204175454940.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20201204163551233.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[20201202172814237.png]: https://img-blog.csdnimg.cn/20201202172814237.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20201202174232961.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20201202173126795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20201202174201546.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20201202162845674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[https_www.jb51.net_article_191669.htm]: https://www.jb51.net/article/191669.htm
[vue.js_https_cn.vuejs.org_v2_guide_reactivity.html_E5_BC_82_E6_AD_A5_E6_9B_B4_E6_96_B0_E9_98_9F_E5_88_97]: https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20201201214209983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20201201142037369.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20201201142209711.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[https_www.cnblogs.com_shapeY_p_9180908.html]: https://www.cnblogs.com/shapeY/p/9180908.html
[https_www.cnblogs.com_weiqinl_p_8683207.html]: https://www.cnblogs.com/weiqinl/p/8683207.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20201130142347530.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[https_www.jianshu.com_p_31664974303d]: https://www.jianshu.com/p/31664974303d
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/2020113010393770.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20201130104002272.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70
[https_cn.vuejs.org_v2_guide_components-slots.html]: https://cn.vuejs.org/v2/guide/components-slots.html
[https_zhuanlan.zhihu.com_p_142523164]: https://zhuanlan.zhihu.com/p/142523164
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201127104032313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[https_www.zhihu.com_people_cheng-xu-yuan-de-ri-chang-57]: https://www.zhihu.com/people/cheng-xu-yuan-de-ri-chang-57
[https_juejin.cn_post_6844904015101165582]: https://juejin.cn/post/6844904015101165582
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/2020112710001720.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[20201126133724682.png_pic_center]: https://img-blog.csdnimg.cn/20201126133724682.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/202011251609436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201125161242748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/2020112514473411.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201125144908860.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20201125141917527.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 7]: https://img-blog.csdnimg.cn/20201125141613271.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[https_www.cnblogs.com_weiqinl_p_10945596.html_E6_B5_8F_E8_A7_88_E5_99_A8_E4_B8_AD_E8_BF_90_E8_A1_8C_E7_BB_93_E6_9E_9C]: https://www.cnblogs.com/weiqinl/p/10945596.html#%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E8%BF%90%E8%A1%8C%E7%BB%93%E6%9E%9C
[https_cn.vuejs.org_v2_api_vm-emit]: https://cn.vuejs.org/v2/api/#vm-emit
[https_www.cnblogs.com_jin-zhe_p_9523782.html]: https://www.cnblogs.com/jin-zhe/p/9523782.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 8]: https://img-blog.csdnimg.cn/20201124110611161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[https_cn.vuejs.org_v2_guide_transitions.html_E5_8D_95_E5_85_83_E7_B4_A0-_E7_BB_84_E4_BB_B6_E7_9A_84_E8_BF_87_E6_B8_A1]: https://cn.vuejs.org/v2/guide/transitions.html#%E5%8D%95%E5%85%83%E7%B4%A0-%E7%BB%84%E4%BB%B6%E7%9A%84%E8%BF%87%E6%B8%A1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 9]: https://img-blog.csdnimg.cn/20201113141744743.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ==,size_16,color_FFFFFF,t_70#pic_center
[20201111151832890.png_pic_center]: https://img-blog.csdnimg.cn/20201111151832890.png#pic_center
[https_www.cnblogs.com_leaf930814_p_6667011.html]: https://www.cnblogs.com/leaf930814/p/6667011.html
[https_www.jianshu.com_p_83aa9a2a4055]: https://www.jianshu.com/p/83aa9a2a4055