2021-07-22 VUE 3.0组合式APIsetupWARNING 执行setup时未创建组件实例,setup选项中没有this,无法访问props之外,组件声明的任何属性。(本地状态、计算属性或方法)setup函数可以接收props参数,并返回函数和变量供其他组件访问。但此时变量并不是响应式的,因此:import {ref} form 'vue'const counter = ref([])通过ref对值创建了一个响应式引用setup函数中注册生命周期(watch、onMounted
【Vue】父子组件传值 这次不借助webpack实现。其实都是比较基础的东西,但是也蛮有意思的。子传父1. 通过$emit使得父组件可以通过v-on监听子组件中绑定的方法点击Button后传参子组件代码:let ChildComponent = { data() { return { childValue: '' } }, methods: { passValueToFather() {
【Vue】与生命周期有关的子组件监听失败问题 【Vue】与生命周期有关的子组件首次监听失败问题今天也遇到了一个很有意思的问题。项目用到了echarts,我把echarts初始化的部分放到了mounted钩子函数中。接口请求需要一个异步获得的参数,这个地方处理的不是很好,暂时的解决方案是把这个参数存到了localStorage中,首次登录成功请求这个参数,读取localStorage的时候就用了EventListener监听,否则首次无法获得变量(异步请求没结束)。除了首次登录之外,其余时刻都只需要通过localStorage.getItem()访问
从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
【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
前端实现接口数据导出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])
Promise 串行执行 Promise 串行执行❗注意点:直接写在Promise中的代码会直接同步执行。例如:const p = new Promise((resolve,reject)=>{ console.log('hello world!');});//hello world!但声明一个变量,再将一个返回值为new的promise对象的函数赋值给这个变量,promise中的内容就不会运行。then方法中的第一个参数为resolve的回调函数,其返回值为一个新的promise实例。pro
【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会使后两项值也发
【数据结构】二叉树 二叉树1. 二叉树 Binary Tree2. 二叉查找树 Binary Search Tree3. 平衡二叉树 Balance Tree4. B树 B-tree5. B+树数据结构动画演示网站1. 二叉树 Binary Tree每个结点最多只能有两棵子树。2. 二叉查找树 Binary Search Tree左子树的值均小于根节点的值,右子树的值均大于根节点的值。删除节点删除叶子结点: 直接删除删除的结点有一个子结点:该子结点取代被删除结点删除的结点有两个子结点 :被删除结点 左
【JS】JavaScript中new对象的过程 使用new操作符创建实例的过程:1. 在内存中创建一个新对象2. 这个新对象内部的Prototype特性被赋值为构造函数的prototype属性3. 构造函数内部的this被赋值为这个新对象4. 执行构造函数内部代码(给新对象添加属性)5. 如果构造函数返回非空对象,则返回该对象;否则返回刚创建的对象。...
【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
Javascript笔记 Javascript学习笔记1. DOM1.1 什么是DOM?1.2 为什么DOM是必须的?2. 关键字2.1 var关键字与let、const关键字的区别3. 数据类型typeof操作符参考《Javascript高级程序设计》1. DOM1.1 什么是DOM? Document Object Model 文档对象模型,是一个应用编程接口(API)。 便于删除、添加、替换、修改节点,更改网页的结构和内容。1.2 为什么DOM是必须的? 无需刷新页面即可更改页面的外观和内容。2. 关键字
反转链表 剑指offer 24 双向链表定义一个函数,输入一个链表的头节点,反转该链表并输出反转后链表的头节点。示例:输入: 1->2->3->4->5->NULL输出: 5->4->3->2->1->NULL来源:力扣(LeetCode)著作权归领扣网络所有。商业转载请联系官方授权,非商业转载请注明出处。1. 双指针Ⅰ每两位交换位置。pre指针用来存储下一个节点。cur | | prenull → 1 → 2 → 3 → 4
常用算法 常用算法一、洗牌算法Fisher-Yates ShuffleKnuth-Durstenfeld ShuffleInside-Out蓄水池算法二、 台阶问题一、洗牌算法重新打乱一个数组内元素的数据,要保证1/n随机性。Fisher-Yates Shuffle1. 在0~arr.size间取一个随机数p2. 把arr[p]从数组中移除3. 重复步骤1、2Knuth-Durstenfeld Shuffle将每次随机数得到的元素移到数组尾部。Inside-Out两个数组。For循环i递增