CranberryPancake-CSDN博客

原创 2021-07-22

VUE 3.0组合式APIsetupWARNING 执行setup时未创建组件实例，setup选项中没有this，无法访问props之外，组件声明的任何属性。（本地状态、计算属性或方法）setup函数可以接收props参数，并返回函数和变量供其他组件访问。但此时变量并不是响应式的，因此：import {ref} form 'vue'const counter = ref([])通过ref对值创建了一个响应式引用setup函数中注册生命周期（watch、onMounted

2021-07-22 16:18:56 160

原创【Vue】父子组件传值

这次不借助webpack实现。其实都是比较基础的东西，但是也蛮有意思的。子传父1. 通过$emit使得父组件可以通过v-on监听子组件中绑定的方法点击Button后传参子组件代码：let ChildComponent = { data() { return { childValue: '' } }, methods: { passValueToFather() {

2021-07-14 18:14:23 534

原创【Vue】与生命周期有关的子组件监听失败问题

【Vue】与生命周期有关的子组件首次监听失败问题今天也遇到了一个很有意思的问题。项目用到了echarts，我把echarts初始化的部分放到了mounted钩子函数中。接口请求需要一个异步获得的参数，这个地方处理的不是很好，暂时的解决方案是把这个参数存到了localStorage中，首次登录成功请求这个参数，读取localStorage的时候就用了EventListener监听，否则首次无法获得变量（异步请求没结束）。除了首次登录之外，其余时刻都只需要通过localStorage.getItem()访问

2021-07-13 13:14:07 352

原创从Object.defineProperty到Vue的数据劫持

1. 数据劫持 Vue2.x Object.defineProperty Vue3.x ProxyObject.defineProperty()Object.defineProperty(对象名, 属性名, 描述符)基本用法let person = {};Object.defineProperty(person, 'name', { value: 'Ayasen',});console.log(person.name); // Ayasen此时writable enumer

2021-07-06 16:06:40 167

原创【Vue】单选框、复选框的实现

说是Vue其实和原生并没有太大的区别。单选框研究原生html的单选框实现用name属性来划分单选框小组总结一下就是四个属性type （单选框：radio，复选框：checkbox）idvaluename/v-model(Vue)点击label联动单选框实现效果label中的for属性要和input中的id匹配<input type="radio" id="g" value="坂田银时" name="favourite-character"><label

2021-07-02 18:30:36 4781

原创前端实现接口数据导出Excel文件

今天实现了一个导出Excel的需求，一开始有点懵，不过遇到了很多有意思的内容。欢迎批评指正。总体思路用a标签的download属性实现下载。从接口拿数据主要是注意一下Content-TypeJS中添加a标签实现下载getUserList({ is_export: 1,}).then(res => { const BOM = '\uFEFF'; // 强制excel打开文件时使用 UTF-8 const blob = new Blob([BOM + res])

2021-07-02 18:15:11 1800 1

原创 JavaScript 传参

的速度发生的

2021-05-03 20:30:04 357

原创 Promise 串行执行

Promise 串行执行❗注意点：直接写在Promise中的代码会直接同步执行。例如：const p = new Promise((resolve,reject)=>{ console.log('hello world!');});//hello world!但声明一个变量，再将一个返回值为new的promise对象的函数赋值给这个变量，promise中的内容就不会运行。then方法中的第一个参数为resolve的回调函数，其返回值为一个新的promise实例。pro

2021-04-14 23:33:28 634

原创【HTML/CSS】flex布局绘制骰子

参考博文CSS flex 弹性盒父级元素 display:flex ——子元素默认变成block，float失效flex-direction 主轴方向 row(默认)/row-reverse/column/column-reversejustify-content（沿着主轴方向）: center/flex-start/flex-endalign-items（垂直主轴方向）：center/flex-start/flex-end????也就是说，更改flex-direction会使后两项值也发

2021-03-23 16:54:45 1380

原创【数据结构】二叉树

二叉树1. 二叉树 Binary Tree2. 二叉查找树 Binary Search Tree3. 平衡二叉树 Balance Tree4. B树 B-tree5. B+树数据结构动画演示网站1. 二叉树 Binary Tree每个结点最多只能有两棵子树。2. 二叉查找树 Binary Search Tree左子树的值均小于根节点的值，右子树的值均大于根节点的值。删除节点删除叶子结点：直接删除删除的结点有一个子结点：该子结点取代被删除结点删除的结点有两个子结点：被删除结点左

2021-03-22 17:15:46 206 1

原创【JS】JavaScript中new对象的过程

使用new操作符创建实例的过程：1. 在内存中创建一个新对象2. 这个新对象内部的Prototype特性被赋值为构造函数的prototype属性3. 构造函数内部的this被赋值为这个新对象4. 执行构造函数内部代码（给新对象添加属性）5. 如果构造函数返回非空对象，则返回该对象；否则返回刚创建的对象。...

2021-03-19 20:39:06 161

原创【JS】javascript 集合引用类型ⅠArray 数组

Array 数组1. 数组的声明与初始化2. Array.from()3. Array.of()4. length5. 迭代器方法6. 复制和填充方法6.1 copyWithin()6.2 fill()7. 栈方法和队列方法pop()shift()8. 排序方法sort()9. concat()9.1 Symbol.isConcatSpreadable 数组打平10. slice()11. splice()12. 断言函数find()，findIndex()1. 数组的声明与初始化1.1 使用Array

2021-03-19 17:36:18 405

qq_43515448的博客