- 博客(49)
- 收藏
- 关注
RSS订阅
原创 前端面试题收集整理
返回值如果是obj就return这个返回值 否则就返回这个对象。解析url (协议，域名IP端口，地址路径，hash值，参数)apply改变函数的this指向这个空对象（得到新的返回值）空对象的_proto_指向函数的prototype。DNS对域名进行解析（先去本地host查看）；发送HTTP请求（携带请求体，请求头等信息）；建立TCP连接（三次握手）；关闭TCP连接（四次挥手）；浏览器解析HTML；
2024-04-12 16:53:23
227
原创 微信小程序一键登录
首次登录成功以后，小程序与登录的微信号进行绑定。绑定以后，以后再进入小程序不需要重复登录。1、登录成功以后绑定，自己提供的接口做。2、后续再次进入小程序直接登录。
2024-04-10 13:22:05
359
原创 浏览器渲染原理
渲染主线程依次解析html代码 遇到css会启动预解析线程来处理css,预解析线程解析完会生成cssom树，交给主线程也就是渲染线程，所以css的解析不会阻塞html的解析，因为他们是不同的线程。渲染主线程遇到js代码时 会暂停一切行为 执行完js以后 才会继续解析html 因为js可能会改变html的dom结构和css样式 所以js会阻塞html的解析。
2023-07-25 10:10:03
148
原创 package-lock.json 文件
该文件指定发布时的依赖版本，如果提交代码时若没有提交该文件，发布时会默认安装最新版本的依赖，如果使用了私有库，没有及时拉取新版本的依赖包，可能会导致发布报错。所以一般都会提交该文件，该文件会在执行npm install时自动生成 可在.gitignore文件中配置提交该文件
2023-03-16 16:43:04
156
原创 vue npm插件开发
npm login 若此命令报错，可能是因为引用了cnpm 我们用 nrm来解决。package.json文件里 private 为false。npm pack 本地会生成tgz的文件。然后再登录发布 邮件会通知你是否发布成功。成功之后可在npm上查询你的插件。npm publish 发布。npm run lib 打包。vue.config内容。index.js如图。
2022-12-15 15:39:06
333
原创 js数据类型
js数据类型基本数据类型数据存放在栈内存中，可直接修改读取新增，不存在深拷贝浅拷贝，每定义一个都是独立的，互不影响String，Number，Boolean，Null，Undefined，symbollet a = 1let b = ab = 2console.log(a)//1console.log(b)//2引用数据类型Function，Array，Object引用类型数据，值存在堆内存中，栈内存中只存储了堆内存的地址，所以存在深拷贝浅拷贝的情况，所谓浅拷贝，就是栈内存中的
2022-01-26 18:08:10
1007
原创 js 原型 原型链
function test(name,age){ this.name = name this.age = age}var a = new test('张三',18)什么是原型对象？什么是实例对象结合图与代码，test为构造函数， new test()对构造函数进行实例化操作，所以a就是这个构造函数的实例对象。test.prototype 就是指向这个构造函数的原型对象原型对象的__proto__会指向它的上级的原型对象，__proto__像链子一样连接原型对象，所以__proto__.
2022-01-26 17:28:48
754
原创 vue的计算属性（computed）与监听属性（watch）
计算属性 computed计算属性，顾名思义，有计算的操作，可能是一个属性的操作（字符串切割，数组排序等）也可能是多个属性操作（拼接字符串，合并数组等），既然是计算的操作，肯定是希望拿到计算之后的数据，所以一定要有返回值（要有return ），只有计算所依赖的属性发生变化才会重新计算，所以会有缓存。我们在methods里面也同样能达到计算属性的效果，但是因为methods里面不会缓存，不会缓存就会重复执行。data(){ return { val: 1 }},computed: { com
2022-01-26 15:28:07
1157
原创 uniapp 小程序上传图片
本文使用了u-view框架<u-upload :fileList="fileList1" accept='image' width='60' height="60" :capture='capture' @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>data() { return { capture:['album', 'c
2022-01-20 14:51:43
1863
原创 css 伪类做箭头指向
下.box{ width: 200px; height: 40px; background-color:red; margin: 0 auto;}.box:after{ position: relative; top: 48px; content: ''; border-top: 10px solid red; border-left: 10px solid transparent; border-right: 10px solid transparent;}
2022-01-20 14:29:07
639
原创 uniapp微信小程序获取用户信息
uni.getUserProfile({ desc:"用于完善用户信息", //必填，声明获取用户个人信息后的用途，不超过30个字符 success: (res) => { uni.setStorageSync('userInfo', res.userInfo) uni.$u.route({ url: 'pages/userLogin/userLogin', }) }, fail: (err) => { uni.showToast({ icon:"none"
2022-01-15 16:44:34
1427
原创 vue canvas 根据dom生成图片 合并多张图片
npm install html2canvas --save需要的页面引入import html2canvas from 'html2canvas';<el-button @click="downBtn">下载</el-button><div id="test"> <img v-for="i in 5" :key="i" width="100%" src="https://gimg2.baidu.com/image_search/src=http
2021-12-17 14:55:46
482
原创 flex布局 左边固定右边自适应宽度，上边固定下边自适应高度
两块内容 <div class="box"> <div class="left"></div> <div class="right"></div> </div>1、左边宽度固定，右边宽度自适应铺满 .box { display:flex; height:100%; width:100%; } .left { height:100%;
2021-12-09 17:05:45
9048
原创 element Dialog 对话框 拖拽指令
Vue.directive('dragModal', (el, bindings, vnode) => { Vue.nextTick(() => { let { visible, destroyOnClose } = vnode.componentInstance console.log(vnode); // 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁，指令被重复调用 if (!visible) return let modal
2021-09-04 10:11:23
155
原创 vue中如何解决同时出现多个message提示
问题：拦截器里面判断有没有权限，如果没有跳转登录页，并给出提示，但是会出现多个，原因是当前页面有多个接口请求，多次触发拦截器里面的判断解决：我们在拦截器里面判断有没有message提示，如果有就不给提示，如果没有就给出提示具体类名根据框架修改，本文已antd为例，本文仅提供思路，具体操作根据实际情况修改...
2021-08-11 17:52:00
1417
原创 列表圆角样式
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210630110700646.png<ul> <li v-for="(item,index) in 10" :key="index" @click="liCLick(index)" :class="num == index?'act':num == index+1?'actPre':num == index-1?'actNet':''".
2021-06-30 11:10:57
159
原创 for循环，forEach,for...in,for...of的区别
都可以遍历数组，只有for…in 可以遍历对象遍历数组let arr = [12,33,55]for(var i = 0;i<arr.length;i++){ console.log(i);}console.log('in---------------------arr');for(var i in arr){ console.log(i);}console.log('of---------------------arr');for(var i of arr){ cons
2021-03-16 13:40:31
154
原创 vue element table表格 自定义排序规则
项目需求：前端做排序，后台返回的数据有合计一项，排序时，合计始终在最后一行使用@sort-change='sortChange' <el-table-column prop="revPar" align='center' sortable="custom" label="RevPAR" width="110"> </el-table-column>sortChange(column){
2021-01-22 10:33:29
4891
原创 vue element 树形穿梭框 ----- 插件el-tree-transfer
npm install el-tree-transfer --save<template><div> <tree-transfer :title="title" class="str" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" @add-btn='add' @remove-btn.
2020-12-25 20:56:50
1903
1
原创 vue项目中如何使用mock
mock只是在还没有接口的时候，起到模拟数据的作用安装npm install mockjs在你需要用到的页面引入const Mock = require('mockjs');在methods里面写一个方法 getList() { return new Promise(resolve => { setTimeout(() => { resolve( Mock.mock({ [`
2020-12-13 15:20:44
516
原创 vue element ui Upload 上传组件的使用
已经上传成功的未上传的 <el-upload ref="upload" action accept="image/*" :file-list='filelist' list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :http-request='upload..
2020-12-11 10:48:12
411
原创 vue element ui 日期时间段选择 开始日期不能选择结束日期之后，结束日期不能选开始日期之前，开始日期结束日期不能选同一天
<el-date-picker v-model="sta" type="date" value-format='yyyy-MM-dd' :picker-options="options" placeholder="开始日期"> </el-date-picker> <el-date-picker v-model="end" type="date" value-for..
2020-12-10 16:53:28
2491
原创 vue element ui表格行编辑功能 新增和修改
<el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期"> <template slot-scope="scope"> <el-date-picker v-model="scope.row.date" v-if=
2020-12-09 15:41:58
5187
5
原创 利用css border画图案
.demo{ border-top: 100px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent; width: 0px; height: 0px; } .demo{ border-top: 100px solid red; border-right: 50px solid blue; border-left..
2020-12-03 17:05:45
226
原创 echarts图表生成base64
1. 首先我们先生成我们的图表 具体配置不详细写了2.我们在点击的时候去获取我们的图表并转成base64格式 itemClick(){ console.log(document.getElementById('mydome').getElementsByTagName('canvas')[0]) let baseCanvas = document.getElementById('mydome').getElementsByTagName('canvas')[0]
2020-11-30 17:16:18
2017
原创 vue中根据文件地址生成blob文件
//地址转文件changeBlob(){returnnewPromise(resolve=>{constxhr=newXMLHttpRequest();xhr.open('GET','文件地址',true);xhr.responseType='blob';xhr.onload=()=>{if(xhr.status===200){resolve(xhr.response);...
2020-11-30 10:31:44
3593
原创 vue 非父子组件兄弟组件之间的通信 $bus 中央事件总线 this.$bus.$off this.$bus.$on this.$bus.$emit
非父子通信不同于父子通信，首先我们要需要创建一个做中央事件总线在main.js里Vue.prototype.$bus = new Vue();然后我们就可以通过this.$bus.$emit 和this.$bus.$on 来完成非父子之间的通讯jump(){ this.$bus.$emit('updata','参数') this.$router.push({ path:'/aaa' })}, mounted(){ this...
2020-09-12 22:50:12
2218
原创 vue 生成二维码-----插件qrcode
首先安装插件qrcodenpm install --save qrcode //安装import QRCode from 'qrcode'//需要的页面引入使用<template> <div> <img :src="url" alt=""> </div></template>js QRCode.toDataURL('生成二维码') .then(url => { this...
2020-09-06 13:49:22
219
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人