- 博客(93)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 初步了解Vue3（持续更新）
Composition APIsetup函数在旧的 beforeCreate 钩子函数之后和 created 的钩子函数之前立即调用 setup 方法。因此，我们不再需要这两个钩子，我们可以简单地将本应有的代码放在 setup() 方法中。setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。setup会在 beforeCreate前被调用，同时在vue3中setup代替了beforeCreate和created网上许多文章认为setup执行时间在befo
2021-12-02 16:47:37
1365
原创 Vue监听浏览器宽度
setPageH() { const h = document.body.clientWidth; if (h < 768) { this.isCollapse = true; }else{ this.isCollapse = false } }, mounted() { let _this = this; _this.setPageH(); window.onresize = .
2021-07-26 17:15:49
338
原创 js jq 日期多选插件air-datepicker使用
外部链接引入插件官网插件官网 http://t1m0n.name/air-datepicker/docs/使用中文插件 js引入<link href="https://cdn.bootcdn.net/ajax/libs/air-datepicker/2.2.3/css/datepicker.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/air-datepicker/2.2.3/js/date
2021-05-24 16:04:44
627
原创 Echarts 去掉保存图片设置
toolbox: { feature: { saveAsImage: { show: false } } },
2021-05-21 16:57:47
2489
原创 Jq 页面分页
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
2021-05-20 16:14:03
141
原创 Vue路由动画浅入浅出简单实现
Vue路由动画最近想自己开发一个博客网站，本来想用js jq 原生写，后来发现mvc的框架实在有点强差人意。索性就直接用了vue，然后我又发现一个页面的跳转效果也有点差人意，我就想到vue的路由动画，下面给大家实例一种简单的路由动画。路由重新给路由添加下标，在定义路由时添加meta属性，定义index，然后在页面监听路由，根据index的大小决定添加哪种动画。在route的index.js里面const routes = [ { path: '/', name: 'Home
2021-04-30 16:37:44
728
1
原创 Js 学习日记（持续更新）
Js的三元运算符 ${ 判断条件 == 0 ? ' true ' : ' false ' }Js如何在动态生成的table删除对应行或者列获取当前 行 列 的this指向(圈重点) var tr = i.parentNode.parentNode; //i 相当于 行 或者 列 的 this 指向 var tbody = tr.parentNode; tbody.removeChild(tr);...
2021-04-23 18:17:16
423
原创 前端框架开发指南（Vue入门篇）
前端开发指南前言一、Node.js是什么？1.Node.js安装及详细步骤二、使用步骤1.引入库2.读入数据总结前言刚刚接触前端，我们肯定从最基本的框架安装来进行的。我们需要配置什么， 我们需要安装什么。我们如何开发这种问题来围绕进行的。我们先来最基本的开发安装。一、Node.js是什么？前端的底层开发语言的是Node.js为什么是Node.js作为底层开发语言前端开发的主要面对的对象是浏览器等，各种各样的开发环境就好像我们写入html的js语言，需要一个解析器。而html的解析
2020-12-10 16:53:06
981
原创 前端开发如何理解微信支付 和 支付宝支付
1、微信支付以下是微信支付交互时序图，统一下单API、支付结果通知API和查询订单API等都涉及签名过程，调用都必须在商户服务器端完成。如图1所示商户系统和微信支付系统主要交互说明：步骤1：用户在商户APP中选择商品，提交订单，选择微信支付。步骤2：商户后台收到用户支付单，调用微信支付统一下单接口。步骤3：统一下单接口返回正常的prepay_id，再按签名规范重新生成签名后，将数据传输给APP。参与签名的字段名为appId，partnerId，prepayId，nonceStr，timeSta
2020-12-07 23:55:44
469
原创 js 单线程、宏任务与微任务的执行顺序
js 单线程众所周知js是单线程，但js是可以执行同步和异步任务的，同步的任务众人皆知是按照顺序去执行的；而异步任务的执行，是有一个优先级的顺序的，包括了 宏任务（macrotasks）和 微任务(microtasks)宏任务是指消息队列中的等待被主线程执行的事件，宏任务执行时都会重新创建栈，然后调用宏任务中的函数，栈也会随着变化，但宏任务执行结束时，栈也会随之销毁。包括 整体代码script，setTimeout，setInterval ，setImmediate，I/O，UI rende
2020-12-07 23:51:29
159
转载 开发时如何使用混合App开发？
混合APP开发(原生+H5)混合开发（HybridApp开发），是指在开发一款App产品的时候，为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。通俗点来说，这就是网页的模式，通常由“HTML5云网站+APP应用客户端”两部份构成。混合开发是一种取长补短的开发模式，原生代码部分利用WebView插件或者其它框架为H5提供容器，程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。比如京东、淘宝、今日头条等APP都是利用混合开发模式而成的。**优点：1、开发效率高，节
2020-12-07 23:47:41
433
原创 怎么根据甲方设计稿设置Rem比例？
一、什么是rem？rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们 前端常说的适配单位rem。因为rem的特性相对长度单位，常被用来做移动适配，pc端页面不推荐使用rem。二、rem的移动适配原理？设计稿宽度：600px移动设备：600px设置html的 font-size= 移动设备 / 设计稿宽度 * 100 = 100px，那么 1rem = 100px设置一个盒子的宽度: width=1rem（即100px），此时这个盒子屏占
2020-12-07 23:37:48
694
原创 小程序如何登录授权
如何登录授权登录的时候获取用户的token什么token？用户权限标识 前端鉴权的一种方式 （可认为是一把钥匙） 后端生成 有时效性token的传递顺序前端 > 后台 > 服务器 > 流程登陆的时候检测是否注册 没注册先注册（写入后台数据）参考文档：官方文档完整的登录注册代码(1)点击封装的登录模块中的按钮—执行processLogin方法processLogin代码如下：processLogin(e) {//如果没有用户userInfoif (!e
2020-11-29 19:02:55
707
原创 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: `react-scripts start` npm ERR!
在跟node_modules同级下添加一个**.env文件**在文件里面添加SKIP_PREFLIGHT_CHECK=true然后在 npm start 启动即可
2020-11-27 11:51:37
1151
原创 如何从Vue中快速入手小程序
什么是小程序？微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用微信小程序的使用流程1.注册地址https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN注册完登录小程序后台：开发->开发设置–AppID(小程序ID)2.下载地址https://developers.weixin.qq.com/miniprogram/dev/
2020-11-21 20:13:17
374
1
原创 Js中Var let const的区别
var,let,const的区别1.Var的理解var是ES5中声明变量的方式，无需声明数据类型。主要是根据所赋值的数据类型而改变自己的数据类型。好处：通过var声明的变量具有全局，方法的作用域。并且var关键字会提升，可以声明前调用。因为使用var声明变量的特殊性，所以我们编写代码时会出现变量污染或者重复声明这种错误。所以ES6就引入了let，const2.Let的理解let和var相比，多了局部作用域。变量声明也不会提升。更像java和c中的变量let有三个特点：1.没有预解析过程2
2020-11-18 17:07:10
187
1
原创 Webpack打包工具详解
什么是Webpack?webpack是一种前端资源构建工具 一个静态模块打包器在webpack看来 前端所有资源文件都会作为模块处理他将根据模块的依赖关系进行静态分析 打包生成对应的静态资源webpack 解决什么问题？Webpack 可以做到按需加载。像 Grunt、Gulp 这类构建工具，打包的思路是：遍历源文件→匹配规则→打包，这个过程中做不到按需加载，即对于打包起来的资源，到底页面用不用，打包过程中是不关心的。webpack的特点1、模块化；2、Tree shaking；3、代码懒加载
2020-11-17 21:40:20
360
原创 promise封装 原生ajax $ajax() 以及fetch？
使用Promise封装原生ajax Get 和 PostPromise是异步编程的一种解决方案。比传统的解决方案——————回调函数和事件，Promise更合理和更强大。在ES6规范中，Promise是提供的一个构造函数，可以new Promise（）对象Promise对象代表一个异步操作，Promise有三种状态：pending（进行中）fulfilled（已成功）rejected（已失败）Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它
2020-11-12 21:48:22
147
原创 http/https协议、常见状态码、get/post、http缓存机制 看这篇就够了
Http/Https协议在网站请求的时候 有两张请求方式一种是Http请求 一种是Https请求眨眼一看是不是觉得没什么区别仔细观察是不是觉得就多了一个字母s一丶Http请求Http超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。在后来这种传输协议是十分广泛的应用到各个网站，因为这是当时最安全的传输协议大概在20
2020-11-11 21:27:39
166
原创 Vue 前端基础面试
1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；虚拟DOM：dom 操作是非常耗费性能的， 不再使用原生的 do
2020-11-11 15:32:22
267
原创 Vue.js------扩展学习-- Es6 从入门到跑路
什么是Es6Es6是JavaScript的第六个版本是对比Es5升级后的版本 完善了 Es5的不足新增很多特性 也新增很多属性就比如下面这些语言语法 – 语法解析规则、关键字、语句、声明、运算符等。类型 number，string，null，undefined，bool（5种基本数据类型）原型和继承内建对象和函数的标准库 –JSON、Math、数组方法、对象自省方法等我们先看看这些新增的属性var let / const除了 var 以外，我们现在多了两个新的标识符来声明变量的
2020-11-10 20:02:32
191
原创 浅谈App开发那些事
前言这几天合伙开发了一个线上App每时每课虽然中间也是磕磕绊绊 但是总体还算是蛮顺利的这边总结梳理下遇到的问题和开发建议问题封装Api项目开发中 我们可能要在各种组件写请求地址如果在每一个组件中都写请求 会占用缓存所以为了开发便捷封装Api就是一个很好的思路可以有效的帮助我们处理好的Api请求这边也是整理了面试题 和 如何封装Api面试题封装Api的思路如何使用Api封装希望大家可以参考一下 如果有一些不对的地方也可以指出好了我们开始第二个问题关于Token的使用和设
2020-11-01 21:44:42
179
2
原创 NavigationDuplicated: Avoided redundant navigation to current location: “/“.
在写导航切换时点击会有以下报错这个报错是是路由中点击路径重复 ，也有可能是安装的vue-router还是之前出错的那个版本，在项目目录下运行 npm i [email protected] -S 即可。解决方法1：在 main.js里添加一段代码。代码如下：import Router from 'vue-router'const routerPush = Router.prototype.pushRouter.prototype.push = function push(location) {
2020-10-29 16:49:13
380
1
原创 Vue-router跳转界面后显示空白，要刷新之后才会显示新页面，地址栏也跳转了（已解决）
原来的错误的解决方案跳转的时候加上name属性因为vue 路由名称可以进行匹配这样绑定后 是唯一的跳转地址
2020-10-29 15:07:58
4652
原创 在Vue中如何理解插槽Slot
前几天因为在练习React 所以耽搁了博客的更新这几天又回顾了Vue的各种属性的用法 我发现一个跟父子传值差不多的属性 slot 插槽属性在vue的官方文档中solt是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参可以利用slot属性进行传递通俗的理解就是就是在组件模板中使用slot定义一个位置在通过slot的属性name进行匹配替换组件模板中的位置也就是在有name属性并且命名后来匹配我给大家举一个例子在App.vue 里面引入Slot.v
2020-10-07 20:00:00
204
原创 在 React 中使用 Swiper 封装组件 做轮播图
1. 安装 Swipernpm install --save swiper2. 编写 Swiper 组件首先引入 Swiper 以及样式import 'swiper/dist/css/swiper.min.css'import Swiper from 'swiper/dist/js/swiper.js'在组件挂载完毕的时候生成 Swiper 对象componentDidMount () { var mySwiper = new Swiper('.swiper-c
2020-09-29 19:11:29
799
原创 Vue前端面试题总结（三十八）Vue数组中的某个对象的属性发生变化，视图不更新如何解决 详解
Vue数组中的某个对象的属性发生变化，视图不更新产生原因 ：vue实现响应式渲染更新原理，在于监听data里的数据，但针对于对象、数组这类结构较深的数据无法完全监测第一种解决方式 Vue.set(val,object,val)例如：Vue.sett...
2020-09-21 08:17:08
598
原创 Vue前端面试题总结（三十七）什么是虚拟dom？什么是diff算法？详解
什么是虚拟dom？它是一个object对象模型 用来模拟真实的dom作用是高效的渲染页面 减少不必要的dom操作 提高渲染效率什么是diff算法？diff算法就是用JavaScript来表示一个dom树的结构然后用这个dom去构建一个真实的dom 插入到文档中当状态变更的时候 重新构造一个dom树 比较新旧dom树 记录两个dom树的差异 并且通知视图开始更新diff算法就 用来比较vdom结构的...
2020-09-18 18:52:39
1902
原创 Vue前端面试题总结（三十六）如何理解Object.defineProperty()方法有何作用 详解
作用：会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象参数Object.defineProperty( obj, prop, desc );obj 要在其上定义属性的对象。prop 要定义或修改的属性的名称。descriptor 将被定义或修改的属性描述符。返回值返回被操作的对象，即返回 obj 参数用途vue 通过 getter-setter 函数来实现双向绑定俗称属性挂载器专门监听对象数组变化的 Object.observe()(es7)也用到了该方法两
2020-09-18 08:38:58
406
原创 Vue前端面试题总结（三十五）Keep-alive的作用详解
Keep-alive的作用keep-alive 是用来缓存组件 避免多次加载相应的组件 增加性能消耗 如果频繁切换组件就需要keep-alive1.include 字符串或者正则表达式 只有名称匹配的组件会被缓存2.exclude 字符串或者正则表达式 任何名称匹配的组件都不会缓存3.max 设置最大缓存多少组件...
2020-09-18 08:13:33
1656
原创 Vue前端面试题总结（三十四）Vue 常用修饰符 详解
Vue提供了一些修饰符，这些修饰符在使用起来非常方便，比如阻止默认事件、冒泡等。.lazy：v-modeil不用多说，输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据：.trim：输入框过滤首尾的空格：.number：先输入数字就会限制输入只能是数字，先字符串就相当于没有加number，注意，不是输入框不能输入字符串，是这个数据是数字：.stop：阻止事件冒泡，相当于调用了event.stopPropagation()方法。这个应该不需要解释：<b
2020-09-18 08:13:16
478
2
原创 Vue前端面试题总结（三十三）Vue自定义指令如何使用？ 详解
什么自定义指令？指令的注册方式和过滤器，组件是一样的都是分为全局注册和局部注册1.全局注册Vue.directive('name',{})2.局部注册directive:{ name:''}然后在模块中直接使用即可Vue也提供了几种自定义指令的钩子函数bind：指令第一次绑定到元素时调用，只执行一次。inserted：被绑定的元素，插入到父节点的 DOM 中时调用。update：组件更新时调用。componentUpdated：组件与子组件更新时调用。unbind：指令与元
2020-09-18 08:13:02
3531
原创 Vue前端面试题总结（三十二 ）Vue Key的作用 详解
Key值的作用key 值:用于管理可复用的元素。因为 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了 vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法当页面的数据发生变化时，Diff算法只会比较同一层级的节点：如果节点类型不同，直接干
2020-09-18 08:12:43
811
原创 Vue前端面试题总结（三十） 路由导航有几种 如何实现 详解
路由导航有几种路由分别有三种全局路由守卫组件路由守卫路由独享守卫什么是全局路由守卫全局路由守卫有两个第一个是全局前置守卫第二个是全局后置守卫router.beforeEach((to,from,next)=>{ to// 到那个页面 from //从那个页面俩 next（） // 一个回调函数 )什么是组件路由守卫组件路由守卫是写在每个单独的 vue 文件里面的路由守卫什么是路由独享守卫路由独享守卫是在路由配置页面单独给路由配置的一个守卫...
2020-09-18 08:12:13
396
原创 Vue前端面试总结（二十九）Vue路由传参如何实现 详解
Vue路由传参路由传参分为两种query 和 params 来实现query如何实现传参通过在router-link 或者 this.$router.push() 传递
2020-09-18 08:11:58
519
原创 Vue前端面试题总结（二十八）Vue生命周期 详解
Vue生命周期在vue中每一个组件都是独立的 每一个组件都有自己的生命周期从创建 到数据初始化 挂载 更新 销毁 这就是一个组件的生命周期初始化- beforecreate（创建前）在组件或者实例中通过 new vue（）创建出来之后会有初始化事件跟生命周期 然后执行beforeCreate钩子函数 这个时候只有一些默认的生命周期钩子和默认事件 无法访问 数据 跟 Dom- created(创建后)dom和methods已经初始化完成 这个时候已经可以使用 可以修改数据 在这个阶段一般做一
2020-09-18 08:11:44
512
原创 Vue前端面试题总结（二十七） 如何理解vue里的父传子 子传父 和兄弟组件传值 详解
如何父传子父组件通过import引入子组件 并且注册 在子组件标签上挂载需要传递的值 子组件通过props验证 接收接收有两种第一种是通过数组的方式 [‘要接受的属性’]第二种是通过对象的方式传递设置数据类型和值而数组只是简单的接收如何子传父子传父是通过绑定的事件触发函数 在其中的设置的this.$emit传递自定义的事件和要传递的值$emit中有两个参数 一个是要派发的自定义事件 一个是要传递的值如何兄弟组件传值创建一个空的Vue实例并且暴露出去 这个作为公共的Bus 作为兄弟组件
2020-09-18 08:11:32
674
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人