03 2022 档案
摘要：常用遍历方法 for 循环 for(j = 0,len=arr.length; j < len; j++) { ... } for... in for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。 缺点：遍历对象的原型属性，用hasOwnProperty
阅读全文
摘要：背景 前段时间开发快应用，因为快应用的生态不活跃，没有像 ECharts 这么强大的图表库，所以为了实现需求自己用原生的Canvas封装了一个。 直接上代码！！！ Canvas折线图组件代码 <template> <div class="wrapper"> <canvas id="canvas" s
阅读全文
摘要：Object.defineProperty 应用 const data = {}; let name = 'hello'; Object.defineProperty(data, 'name', { get: function() { console.log('>>> get'); return n
阅读全文
摘要：JavaScript 是使用垃圾回收的语言，也就是说执行环境负责在代码执行时管理内存。 基本思路很简单：确定哪个变量不会再使用，然后释放它占用的内存。这个过程是周期性的，即垃圾回收程序每隔一定时间（或者说在代码执行过程中某个预定的收集时间）就会自动运行。 垃圾回收过程是一个近似且不完美的方案，因为某
阅读全文
摘要：加载过程 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 更新过程 父beforeUpdate -> 子beforeUpdat
阅读全文
摘要：一、安装Flask 1.安装Python环境 此处省略100字（http://www.runoob.com/python3/python3-install.html） 2.安装Flask 用pip从命令行安装Flask。 如果在Linux或Mac OS X上，可以在一个终端窗口中键入一下命令： $
阅读全文
摘要：径向渐变 backgroundStyle: { opacity: 0, color: { type: 'radial', // 径向渐变 x: 0.5, // 圆心坐标（中心） y: 0.5, r: 1, colorStops: [ { offset: 1, color: 'rgba(255, 25
阅读全文
摘要：1、什么是导航守卫 “导航”表示路由正在发生改变。 类似于 Vue 的生命周期钩子函数，在路由发生改变时触发。 2、导航守卫的类别 2.1 全局守卫 全局守卫，在每一次路由改变时都触发。因为是写在 router文件 当中所以没有办法获得 vue 实例。 全局前置守卫: 当一个导航触发时，全局前置守卫
阅读全文
摘要：计算属性 用法 <div>姓名： {{ fullName }}， 年龄： {{ age }}</div> // 组件中 data() { return { lastName: 'zhang', firstName: 'san', age: 28 } } }, computed: { // 计算属性的
阅读全文
摘要：图片来源：自己画的 ↑ 上图展示了，元素从显示到隐藏，从隐藏再到显示，各关键时间节点，class的添加和移除状态。 ↓ 下图展示了，实现淡入淡出效果的 class 设置。 // 淡入 v-leave-active { transition: opacity 3s; } v-leave-to { op
阅读全文
摘要：背景 今天在看开源框架 vue-element-admin 发现了一个有意思的使用方法——给 keep-alive 组件绑定了 key。对于这个的作用不是很理解，查阅了相关的资料，记录总结一下。 <template> <transition name="fade-transform" mode="o
阅读全文
摘要：问题： Vue项目中，不能直接使用动态的图片资源路径。 <!-- OK 编译前设置 ↓ --> <img src="../assets/images/banner_1.png" /> <!-- NG 编译后设置 ↓ --> <img :src="url" /> 解决方法： 方法一： 将图片放到pub
阅读全文
摘要：<div class="wrap"> <img class="img" src="" /> </div> .wrap { overflow: hidden; width: 100%; height: 0; padding-bottom: 50%; } .img { width: 100%; }
阅读全文
