- 博客(153)
- 收藏
- 关注
RSS订阅原创 前端架构之脚手架原理分析及开发流程（二）
上一节说到 脚手架的本质是操作系统的终端 因为当我们执行的时候 最终执行的是vue.js 然后由node进行解析并当成可执行程序 所以脚手架本质是客户端因为node的本质就是客户端那脚手架执行的过程又是如何呢 一张图来剖析...
2022-03-09 12:33:47
845
原创 前端架构之脚手架原理分析（一）
脚手架是什么呢 脚手架的本质就是一个操作系统的客户端 它通过命令行执行当我们开发的时候 现在很多人几乎都是依赖于框架 只需要敲敲命令就会把基础的体系给搭建出来了 但是 你们有没有想过 当我们敲命令的时候 为什么就会走一系列的流程呢 我们就以vue为例vue create demo当我们输入的时候 为什么就会被执行呢 先思考一下 在往下面看上面的命令是由3个部分组成的主命令 : vuecommand: createcommand的param :demo首先先...
2022-03-04 18:44:37
2880
原创 vue3.0清理定时器无效问题
今天朋友问我一个问题 说路由离开后 怎么清除定时器 我理解的就是页面离开了 清掉定时器 然后就给他说 在beforeDestroy生命周期里面清掉就行了 然后他说不行 我郁闷死了 怎么可能呢 然后让他给我截图 他是直接写的一个定时器 没有指定名字 然后我也就无奈了期间 我自己也动手试了试 奇怪的是 我也清理不掉 不管怎么清理 都是不行 这就让我一头雾水了 开始我最先想到的是我vue版本的问题 我当时用的是vue3.0 所以 我又去扒api 发现vue3.0的beforeDestroy生命周期有所改动..
2021-12-15 18:30:10
5482
原创 vue3.0组件通讯及方法互调
先吹吹牛逼吧 3.0 顾名思义 一顿操作猛如虎 一看bug一脸懵逼 既然使用了vue3.0 肯定是和2.0一样 首先把基础的组件通讯给搞明白了 所以 今天就带着大家来看看 vue3.0是怎么进行组件通讯的以及组件之间的方法相互操作先写两个组件吧parent.vue<template> <children ref="childrenFn" :value="msg" @children="getChildren"></children> <di..
2021-12-13 17:12:46
1358
1
原创 vue3.0创建项目及配置
vue2的版本大家估计都玩的差不多了vue3出来也一年了 很多人可能都没有上手过 因为vue3的话 项目兼容性不是很完美 所以很多公司都还没有尝试 但是 我相信 在不久 可能半年 一年后 就开始慢慢普及用了 我用vue3开发的第一个项目是在6月份的时候 做的一个自助机项目 很可惜 还没有完全完成 项目就被暂停了 其实开发的时候 是很难受的 因为时间太仓促了 语法及中间遇到很多坑 不过最终还算是完成差不多了 想看的去github下载一下看看吧=>链接不过 一晃 大半年过去了 也忘记的差不多了 ...
2021-12-02 12:06:01
1061
原创 vuex实现原理
用过vue开发的同学 肯定避免不了接触vuex 当我们使用vuex的时候 有没有想过 他内部的实现过程呢首先他和我们的vue-router差不多 都是一个插件 所以 可以联想到 上次说的 有着公共代码其次 也有不同点 使用的时候newVuex.Store({}) 所以 暴露出来的应该是store和install方法下面以一个demo为例吧<template> <div> <h1>测试啊</h1> <div&...
2021-11-30 14:15:56
298
原创 vue-router实现原理
每当我们用vue开发的时候 肯定会涉及到路由 那么大家有没有思考过 vue-router 到底是怎么实现的呢首先 vue-router作为vue的一个插件 其次 里面有两个组件 router-view 和router-link 所以 思路就出来了接下来 我们自己实现一个插件 先看下代码 let Vueclass VueRouter { constructor(options){ this.$options = options let initial = wi...
2021-11-26 11:46:53
544
原创 vue前端工程自动化
这几天再忙着 几天没有更新了 今天给大家总结一下前端工程自动化吧首先 先理解一下什么是自动化 我自己理解的就是 好比一个机器 你设定好程序 无论你怎么操作 都不影响流程和结果 就按照你设定好的程序走先思考一下 为什么要用自动化 肯定是方便 减少操作的复杂度比如 我们封装了很多的方法.js 对应很多js文件 然后在页面里面使用的时候 是不是要全部都一个一个的引入 很多人认为 方法都放在一个js文件里面 不需要很多 其实 正常来说 是根据功能来划分的 比如 权限 导入导出 校验 。。。 在或...
2021-11-22 11:37:34
1165
原创 vue动态菜单及tag切换
刚刚接触项目的小伙伴 几乎都接触不到这一块的 因为入职 公司要么有骨干 要么是现有项目维护 所以 对于动态菜单 很好奇 今天带着小伙伴们一起来看看吧 可能有些人接触过 只是看看别人写的代码 觉得都没有问题没有实际动手去做过 这就应对了那句 “看花容易绣花难” 其实我开始的时候 也是这种心理 直到我自己动手的时候 发现里面有很多坑 如果不涉及到tag的切换 估计看看element官网就知道了 关键就是带有tag切换 导致很多小伙伴无从下手 现在很多公司的项目都是基...
2021-11-12 17:33:45
6022
3
原创 小程序订阅消息流程及案例
没有接触的过小程序订阅的 估计和我一样 刚刚开始的时候 一脸懵逼 不知道从哪里下手 下面就一起来看下吧 小编刚开始做的是一个模板 都来因为需求变更 就多加了一个模板 下面是两个授权模板 这个要是看明白了 一个的就更简单了先看下官网的介绍吧小程序订阅消息然后看下订阅的截图代码： 第一次接触的 建议你多点击 打点断点 好好看看每一步是做什么的 这样的话 一遍就很清晰了 才能更好的吸收和理解appointmentChange() { let self ...
2021-11-04 16:59:35
396
1
原创 JS中call()、apply()、bind()的区别及应用场景
<button>点击</button> <script> // call,apply,bind都可以改变this //call方法 fn.call(thisArg,arg1,arg2...) //1:可以调用函数 //2:实现继承 //3:判断数据类型 let persion={ name:'迪丽热巴' } function fn(){ console.log(this,1...
2021-11-03 16:46:28
289
原创 JS构造函数、实例和原型对象
构造函数<script> function Persion(name,age){ this.name = name this.age = age this.mover = function(){ console.log("三生三世十里桃花") } } let dlrb = new Persion("迪丽热巴",24) console.log(dlrb)</script>构造函数
2021-11-03 11:48:36
409
原创 JS面向对象和面向过程
面向过程（POP）分析出解决问题所需要的步骤 然后用函数把这些步骤一步一步的实现 使用的时候在一个一个的依次调用 == 按照我们分析的步骤 然后按照步骤去解决 侧重于步骤优点 ：性能优于面向对象 适合跟硬件联系紧密的东西缺点：没有面向对象易维护、复用和扩展面向对象(OOP)把事物分解成一个个对象 然后由对象之间分工合作 == 先找出对象 然后写对象对应的功能 以对象功能划分侧重于功能优点：灵活性、复用性、扩展性、易维护和开发缺点：没有面向过程的性能高特性...
2021-11-02 15:44:03
433
原创 微信小程序模拟支付界面
有些时候 遇到一些类似于银行卡输入密码或者微信支付输入密码的类似需求 刚刚开始的时候 我第一反应就是放几个input 但是呢 每次输入的时候 都会重新调用软键盘 用户体验极其不好 下面先看下类似的原型代码 以小程序为例html<view catchtap='showInputLayer' class="btn_pay">立即支付</view><!-- 密码输入框 --><view wx:if='{{showPayPwdInput}}'&g...
2021-10-12 15:36:49
6532
2
原创 canvas画矩形带圆角并填充不同的背景色
用canvas画矩形很容易 但是如果让你画带有圆角的就有点头疼了 更变态的就是根据不的条件 分别给出不同的背景 背景就算了吧 还要填充渐变色下面先看看效果图吧我就没有拿项目里面来说 因为里面太复杂了 就单独抽出一个小demo这是在微信小程序里面用的注意事项：一定要加上 不然的话 会颜色覆盖 反正我就踩到这个坑里一个多小时 ctx.beginPath();onLoad: function (options) { let ctx = wx.create...
2021-09-24 18:47:53
3079
原创 小程序组件传值通讯
学习vue或者react的同学都知道 组件之间是可以进行传值通讯的 对于刚刚接触小程序的同学而言 可能不知道 和vue传递方式几乎是一样的 会vue的同学应该很 容易理解下面就带着同学们一起来看下吧假设有一个parent和一个child首先看下parent里面的代码吧//parent.wxml<tabs tabs="{{tabs}}" bindchangeTab="changeTab"> <block> <view wx:if="{{tabs[..
2021-09-08 19:45:33
222
原创 vue双向绑定原理及代码解析
<!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>D.
2021-09-03 13:46:32
109
原创 手写日历组件
现在的各种各样的ui框架里面都有 但是呢 有些不是我们想要的 此时就要自己手动去写一个了 这里是基于周来的 先看下原型效果 里面可以展示年月日或者月日 代码里面有<template> <div class="weekList"> <div v-for="item in arrWeek" :key="item.date" class="dateInfo decItem"> <span class="week">{{ item..
2021-07-06 13:37:09
182
原创 前端获取本地ip地址
在某些场合的情况下 后台可能需要前端电脑的ip 因为每台电脑的ip不一样 所有需要动态获取 翻翻网上写的很多 里面其实是很坑的 因为都是在调用闭包函数 所以执行起来是没有任何问题的 但是 你页面想拿的时候 你是没法拿到的下面就一vue 为例子 来获取一下 思路就是传入函数的回调获取参数1. 在utils下面建立一个getIp.jsfunction getUserIP(func:any){ if(typeofwindow!='undefined'){ v...
2021-04-29 21:49:36
17298
8
原创 vue浏览器快捷键自定义操作
做项目的时候 可能会用到一些快捷键 但是呢 有的可能又和系统自带的快捷键相互冲突 要把系统内的给阻止 然后自定义自己的如果你用过ts 下面看着是没有任何问题的 如果没有用过 就正常使用就行了private readKey(e:any){ if (e.keyCode == 122) { // 建档 e.preventDefault() //自定义自己的方法 this.readCard('1') } }mounted() ..
2021-04-13 18:17:37
689
原创 react基本配置
官网：react全局安装npm i -g create-react-app创建项目npx create-react-app my-appdom事件控制路由跳转npm i create-router-dom --save-devsass安装配置npm i sass-loader node-sass --save-devsass全局变量 预加载npm i sass-resources-loader -D打开配置项（如果报错 ）先执行git add .
2021-01-25 16:53:57
566
2
原创 uni-app之请求封装（三）
开始进行交互了 我们在做vue或者react 进行前后端的交互时 都会进行亲求的封装 那么 uni-app也是一样的 如果我们不封装 频繁的写 那太麻烦了 话不多说 开始撸第一步先建立两个文件夹api和utils先看下request.js 里面放一个promiseexport default function $http(options){ const { url, data } = options return new Promise((resove,reject)=>..
2020-11-20 11:27:32
519
原创 uni-app之动态组件(navbar)封装（二）
下面以一个navbar为例 封装一个动态获取数据先看下目录navbar里面的内容<template> <view class="navbar" :style="{height:statusBarHeight+navBareight+'px',background:'black'}"> <!-- 如若不写 高度始终为44 没有找到原因 --> <view class="narbar-flexd"> <view :style="
2020-11-19 11:34:21
2522
原创 uni-app之uniCloud（一）
uni-app (https://uniapp.dcloud.io/README) 是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 自己可以去官网上去看看 至于创建 我也不多啰嗦了 写的非常清楚uniCloud (https://uniapp.dcloud.io/uniCloud/quickstart...
2020-11-18 18:56:22
3982
2
原创 vue全局loading配置
请求的时候 需要一个全局loading来拦截 若是页面单独引用的话 就有点繁琐了 所以需要再全局封装一个 此时就要明白 再哪里封装了 先考虑一下 为什么要用 一方面是为了防止重复操作 另一方面是为了一个加载的效果能够更明显 所以 再请求的时候加 就能联想到axios拦截器的位置处理了 话不多说 开始撸代码 全程copy就行了1.再src/componennts/Spinner下面建立一个index.vue<template> <div class="loading-pa...
2020-11-06 16:04:02
1041
原创 vue-seamless-scroll无法自动播放
如果说是正常使用的话 肯定是没有任何问题的 但是结合表格时候 进行封装 最终遍历的肯定是一个对象 这时候对象里面的key就不能有冗杂的 后台给你返回数据的时候 你肯定是要处理的 问题就是出现再这里了 如果你不处理 直接拿到一个数据 是没有任何问题的 但是你处理的时候 就要定义一个变量接收 不能直接push 这样就解决了getSupplierProducts({areaCode:areaCode}).then(res=>{ if(res.code==0){ ...
2020-10-14 16:25:14
509
原创 VUE中插槽slot用法及使用场景（结合element table封装介绍）
slot：为了解决引入子组件标签内不能直接写入内容 相当于是个占位符 让你能够直接写入内容分为3种匿名插槽：具名插槽：指定插槽 显示内容作用域插槽：数据绑定，组件间通讯下面结合element表格封装进行详解先封装一个表格<template> <div> <el-table :data="data.tableList" style="width: 100%"> <el-table-column type="sel.
2020-09-29 22:26:33
5161
原创 深入理解promise
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。它最早由社区提出并实现，ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。特点： 1.对象的状态不受外界影响 （Pending（进行） Resolve(成功) Reject(失败)） 2.一旦状态改变就不会再变简单用法var promise = new Promise(function(resolve, reject){ if (/* 异步...
2020-09-27 22:59:53
145
原创 vue放大缩小拖拽功能
点击放大至全屏 再次点击缩小至原始 这个弹框是基于element dialog的基础上写的1.再utils文件夹下面新建一个directives.js (封装好了 直接拿去用）import Vue from 'vue';import bigPic from '../assets/images/bigChange.png';// v-dialogDrag: 弹窗拖拽属性Vue.directive('dialogDrag', { bind(el, binding, vnode,...
2020-09-24 21:54:41
3473
2
原创 前端实现pdf,word，doc等Office文档格式在线预览
在做一些后台管理或者h5页面的时候 通常会遇到Office文档格式的在线预览功能。虽然看似简单，里面却隐藏着很大的坑。简单是因为现在有各种插件可以下载实现，坑是因为涉及到一些兼容性和安全性等各种千奇百怪的问题。推荐大家使用更快捷,更全面,更高效的永中云转换（https://api.yozocloud.cn/）进行word,pdf等Office文档格式的在线预览。 可以参考一下官网https://api.yozocloud.cn/index.html首先看看它的模式...
2020-06-18 10:11:01
3117
原创 vue全局使用svg图片配置
1.安装依赖npm i svg-sprite-loader -s2.在vue.config.js里面配置chainWebpack(config) { // 设置svg const svgRule = config.module.rule('svg') svgRule.uses.clear() svgRule .use('svg-sprite-...
2020-04-26 10:22:27
869
原创 vue 高级密码设置（以字母开头 由数字 字母及特殊字符组成）
// 是否包含一位数字 const regNumber = /(?=.*[\d])/ // 是否包含一位字母 const regLetter = /(?=.*[a-zA-Z])/ // 是否包含一位特殊字符 const regCharacter = /(?=.*[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·...
2020-04-24 16:54:15
2816
空空如也
在View视图 选中文字弹出来的功能项如何追加自定义功能按钮
2024-05-17
TA创建的收藏夹 TA关注的收藏夹
TA关注的人