![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 68
编程叫兽
多年开发经验,分享最新编程技术
展开
-
如何用Vue技术完美记住滚动条和实现下拉加载呢?本文详细教你
滚动条常见于移动端 App 在滚动点击进入的时候问题描述当我们在开发 web app 的时候,经常会遇到一个问题,就是当从一个可滚动的列表页进入到下一个详情页面,然后返回列表页面的时候,很难去还原滚动条的状态,无法记住进来时候的位置。以前我尝试过很多方法:有 vue-router 自带的 scrollBehavior,需要记住 scrollTop,然后还原,但是管理这个 scrollTop 显得很麻烦,有的时候还不容易取值 还有使用纯 CSS 的方式,在列表页面放置一个 route原创 2020-07-22 10:26:53 · 758 阅读 · 0 评论 -
2020年JavaScript开发必须知道的41个技巧,你会几个?
前言JS是前端的核心,但有些使用技巧你还不一定知道;本文梳理了JS的41个技巧,帮助大家提高JS的使用技巧;文章有点长,可以clone下源码,直接撸,源码地址请戳全部源码,原创不易,欢迎star;序列文章:Vue 开发必须知道的 36 个技巧React 开发必须知道的 34 个技巧Array1.数组交集普通数组const arr1 = [1, 2, 3, 4, 5 , 8 ,9],arr2 = [5, 6, 7, 8, 9];const intersection = ar原创 2020-07-21 14:02:59 · 245 阅读 · 0 评论 -
30张脑图带你从0开始学好Vue.js,超详细
本篇还是给大家分享一下思维导图,如果您刚好能收获一二,那是小芝麻荣幸???? 能帮到您查缺补漏;本篇内容适用于:初学前端;及工作时间不久想回顾基础的各位伙伴;这次先上图片链接地址:gitee.com/jinsexiaozh…-------------------------------接下来开始正文--------------------------0、模块化进化史::光理论是不够的。技术也在不断更新。在此赠送2020最新企业级别Vue3.0/Js/ES6/TS/React/node等实战视频原创 2020-06-21 10:42:17 · 874 阅读 · 0 评论 -
如何用Node中的Express应用框架的技术选型?本文详解
前言现在的 Node 对于前端而言可以涵盖各个方面,包括命令行接口、插件、依赖库、脚手架以及 Web 服务等。本文是一篇对于 Node 使用的浅谈文章,会简单讲解一些个人使用 Node 的经验,分享的内容主要可分为三个方面:工具篇 插件篇 服务篇工具篇会讲解使用 NPM 发布命令行接口的简单教程。插件篇主要讲述如何开发一个有趣的 Webpack 插件(Vue CLI / Babel 插件同理)。服务篇会讲解一些基于 Express 应用框架的技术选型方案,这类技术往往对于做一些前端工具平台非常有原创 2020-06-18 14:09:39 · 345 阅读 · 0 评论 -
如何用vue-cli4.0构建多页面模板脚手架!?本文实战教你
multipageGithub地址github.com/qinouz/mult…基于 vue-cli4.0 构建 多页面 模板脚手架!启动项目git clone https://github.com/qinouz/multipage.gitcd multipagenpm installnpm run dev复制代码目录√ Vue-cli4 √ 根据目录结构生成多页面配置 √ 配置多环境变量 √ rem 适配方案 √ Vuex 状态管理 √ Vue-rout.原创 2020-06-18 10:52:11 · 622 阅读 · 0 评论 -
Vue组件通信的六种方式,你会几个?
在平时的开发过程中,父子 / 兄弟组件间的通信是肯定会遇到的啦,所以这里总结了 6 种 Vue 组件的通信props / $e$emit / Vuex$attrs / $listeners $parent / $children 与 ref provide / inject 前言如上图所示,A/B,B/C,B/D 组件是父子关系,C/D 是兄弟关系。那如何根据不同的使用场景,选择不同的通信方式呢?所以前提就是我们要了解不同的通信方式的作用和区别。一. props ..原创 2020-06-16 11:25:25 · 267 阅读 · 0 评论 -
Vue源码阅读,如何渲染代码块生成? 本文详解
1. 构造compiler个人觉得 本章 可以大概看看我写的内容 最有效的方法是查看测试用例 很详细 覆盖很全面 这一段比较绕,主要是包装compile,最终暴露出compile本身以及包装后的compileToFunctions1.1 compiler和compileToFunctions的基础baseCompile它是对src/compiler包下暴露出的核心parse进行初步包装,我们知道parse传入template,返回的是ast语法树,此时生成的render,staticRen原创 2020-06-15 21:27:09 · 767 阅读 · 0 评论 -
这15道Vue常见面试题,你会几道??
1.vue优点?答: 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb; 简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习; 双向数据绑定:保留了angular的特点,在数据操作方面更为简单; 组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势; 视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作; 虚...原创 2020-06-15 21:07:42 · 218 阅读 · 0 评论 -
TypeScript在Model中是如何操作运用的?本文详解
在MVC、MVVC等前端经典常用开发模式中,V、C往往是重头戏,可能是前端业务主要集中这两块。结合实际业务,笔者更喜欢路由模式、插件式设计,这种在迭代和维护上更能让开发者收益(不过你需要找PM协调这事,毕竟他们理解的简化用户体验,多半是怎么让用户操作简单)。但我们今天来看看Model,看看M有什么扩展的可能。如果读者熟悉iOS开发,应该听过VIPER开发模式,下面推荐iOS开发 使用viper架构构建复杂页面 使用 VIPER 构建 iOS 应用 积木法搭建 iOS 应用—— VIPER原创 2020-06-12 21:29:26 · 993 阅读 · 0 评论 -
Webpack 5模块联邦会不会引发微前端的革命呢? 本文详解
Webpack 5的模块联邦提供加载部分编译好的代码能力,这个似乎会成为微前端架构的标准实现。Webpack只是我分享的一小点,我是08年出道的高级前端架构师,有问题或者交流经验可以来我的扣扣裙 519293536 我都会尽力帮大家哦引言在当前的微前端实现中,我们需要通过一系列的技巧去实现。正如上图所示,微前端的公共依赖加载目前并没有非常好的实现方案。然后,Webpack 5中的模块联邦将会改变这一现状。模块联邦可以去依赖一个远程模块,这个依赖会在运行时生效,并不影...原创 2020-06-12 17:57:43 · 753 阅读 · 0 评论 -
如何用Vue+TypeScript项目配置实战?本文教你
❝最近想学习一下TypeScript语法,但是只是看官方文档又有些乏味,还是通过项目在实践中学习比较有趣,所以在这里记录一下我的学习历程,与Vue项目结合开发。(官方文档 请戳>>)❞项目搭建通过脚手架搭建1. 通过Vue CLI 3 创建vue项目vue create vue-typescript// 在此选择typescript支持? Check the features needed for your project: () Babel () Ty...原创 2020-06-12 11:07:47 · 637 阅读 · 0 评论 -
如何手 Vue的手势组件呢?本文教你
前言最近需要使用手指捏合扩大的手势操作,找了几个组件,要么对 Vue 适配不好,要么量级太大,决定自己手写手势操作。项目与效果预览思路直接在 DOM 上绑定touchstart、touchmove、touchend不仅要绑定这几个事件,而且用在其他项目还不好复用。所以用 Vue 自定义指令比较合适,指令还可以封装成插件,再使用npm托管,这样随时随地都可以使用了。Vue 自定义指令Vue 官网就有自定义指令的教程,摘取我们需要的关键代码。Vue.dire...原创 2020-06-12 10:17:49 · 383 阅读 · 0 评论 -
Vue组件为什么data必须是一个函数呢?本文案例详解
前言我们需要先复习下原型链的知识,其实这个问题取决于 js ,而并非是 vue 。function Component(){ this.data = this.data}Component.prototype.data = { name:'jack', age:22,}复制代码首先我们达成一个共识(没有这个共识,请补充下 js 原型链部分的知识):实例它们构造函数内的this内容是不一样的。 Component.prototype ,这类底下的方法或者值,都是原创 2020-06-12 10:01:51 · 266 阅读 · 0 评论 -
如何用vue-Element-ui实现左侧无限级菜单?本文详细教你
#最近项目中,要用到element-ui的无限级分类菜单,根据角色生成不同的递归数据,查阅了网上很多资料,发现很多都不太完整并且没有很多的延伸性。###梳理递归数据我们一般拿到后台的数据是:1.扁平化数据格式2.递归式数据格式复制代码let arr = [{ name:小七, id:1},{ name:小八, id:2},{ name: 小九, id:3}]我们从后台拿到的是这种扁平化处理数据,那我们实现递归菜单的话需要什原创 2020-06-11 21:43:56 · 2133 阅读 · 1 评论 -
如何实现vue3.0的响应式呢?本文实战教你
之前写了两篇vue2.0的响应式原理,链接在此,对响应式原理不清楚的请先看下面两篇和尤雨溪一起进阶vue和尤雨溪一起进阶vue(二)现在来写一个简单的3.0的版本吧大家都知道,2.0的响应式用的是Object.defineProperty,结合发布订阅模式实现的,3.0已经用Proxy改写了Proxy是es6提供的新语法,Proxy 对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)。语法:const p = new Proxy(target, handler原创 2020-06-11 21:25:26 · 260 阅读 · 0 评论 -
Vue首屏加载速度如何优化提升80%?本文详解
在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。可以看个例子: 差点忘记介绍了:我是一名08年出道的高级前端老鸟,大家如果想跟我交流学习经验,可以进我的扣扣裙 519293536 有问题我都会尽力帮大家。主要是中高级问题,小白勿进哦这是优化前的页面加载状态:执行npm run build打包项目,出来的vendeor...原创 2020-06-11 11:18:59 · 2218 阅读 · 3 评论 -
用vue3.0.1如何搭建仿京东的电商H5项目呢?本文实战教你
前言就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下!????GitHub地址请访问????:github.com/GitHubGanKa…项目介绍vue-jd-h5是一个电商H5页面前端项目,基于Vue 3.0.0-beta.1+ Vant 实现,主要包括首页、分类页面、我的页面、购物车等。????本地线下代码vue2.6在分支demo中,使用mockjs数据进行开发,效果原创 2020-06-10 21:41:55 · 992 阅读 · 0 评论 -
Vue响应式系统如何操作运用?本文详解
前言之前学习 vue 的时候,一直没刨根问底过。在看到网上这类文章比较多,参差不齐的质量有时候看的一头雾水。当然也有不错的文章,但是终究是别人的理解。于是写一篇关于自己的理解记录下来,亲身实践才能收获更多!初阶:响应式原理在说明之前,我们先了解一个Object.defineProperty()。引用 MDN 上的权威介绍developer.mozilla.org/zh-CN/docs/…:Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改...原创 2020-06-10 21:24:59 · 190 阅读 · 0 评论 -
2020最新中级web前端面试题库(含详细答案,15k级别)你会几道呢?
前言1.本篇文章,献给我家女朋友,祝她在杭州找一个965的好公司!2.除了面试题。结合多年开发经验整理出2020最新企业级实战视频教程, 包括 Vue3.0/Js/ES6/TS/React/node等想学的可进裙 519293536 免费获取,小白勿进哦!题外话:关于中级 -> 高级的进阶,我也写了一篇文章,希望对你有帮助:写给初中级前端的高级进阶指南HTML篇HTML5语义化html5语义化标签百度ife的h5语义化文章,讲得很好,很多不错的公司都会问语义化的...原创 2020-06-10 12:09:09 · 2488 阅读 · 0 评论 -
如何用JavaScriptJ封装拖动验证滑块?本文教你
前言星期六闲着没事,就想着写写原生js玩玩,在网上看了几个效果后决定做这个效果,并且使用了prototype和eventEmitter封装成了库。最终效果分析1.看到这个效果我们首先应该想到和拖动有关的api: onmousedown, onmousemove, onmouseup其次要支持用户传入放置这个组件的dom元素和完成的回调事件。2.除了滑块验证,结合多年开发经验整理出2020最新企业级实战视频教程, 包括 Vue3.0/Js/ES6/TS/React/...原创 2020-06-10 11:42:59 · 415 阅读 · 0 评论 -
Vue学习总结之Vue的生命周期是怎么运用操作的?本文详解
写在前面1.每一篇文章都希望您有所收获,每一篇文章都希望您能静下心来浏览、阅读。每一篇文章都是作者精心打磨的作品。2.如果您觉得二郎神杨戬有点东西的话,作者希望你可以帮我点亮那个点赞的按钮,对于二郎神杨戬这个暖男来说,真的真的非常重要,这将是我持续写作的动力。您只需要小手轻轻一点,带来的却是温暖了这个作者,给予他前进的动力。3.除了本文案例,结合多年开发经验我还整理出2020最新企业级高级实战视频教程包括 Vue3.0/Js/ES6/TS/React/node等想学的可进裙 51929353...原创 2020-06-09 17:20:20 · 367 阅读 · 0 评论 -
Vue3 到底哪里好?和React Hook对比有啥有优势?本文详解
前言这几天 Vue 3.0 Beta 版本发布了,本以为是皆大欢喜的一件事情,但是论坛里还是看到了很多反对的声音。主流的反对论点大概有如下几点:意大利面代码结构吐槽:“太失望了。杂七杂八一堆丢在 setup 里,我还不如直接用 react”我的天,3.0 这么搞的话,代码结构不清晰,语义不明确,无异于把 vue 自身优点都扔了怎么感觉代码结构上没有 2.0 清晰了呢 ???? 这要是代码量上去了是不是不好维护啊抄袭 React 吐槽:抄来抄去没自己的个性有 re原创 2020-06-09 10:54:53 · 1388 阅读 · 1 评论 -
Vue中Axios如何封装管理?本文详解
Vue Axios 封装定义Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。特性 支持Promise API 拦截请求和响应 转换请求数据和响应数据 自动转换JSON数据 客户端支持 XRSF 回归正题在Vue 项目开发中,我们与接口打交道最多了,如何来优雅的使用Axios变得尤为重要了。 通常我们通过客户端向后端发送请求来接收接口数据,然后将这些接口数据完美的呈现到网页上。.原创 2020-06-09 10:22:55 · 578 阅读 · 1 评论 -
最新vue-router的hooks用法你会吗?本文详解
虽然Vue 3还没有正式发布,但是热爱新技术的我早已按捺不住自己的内心,开始尝试在小项目中使用它了。1.根据这篇《今日凌晨Vue3 beta版震撼发布,竟然公开支持脚手架项目!》我搭建了一个Vue 3的脚手架项目,用这种方式搭建的脚手架项目不仅仅只有vue是新版的,就连vue-router、vuex都是最新的。2.光理论是不够的。在此赠送2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程,想学的可进裙 519293536 免费获取,小白勿进哦!给大家截一下pack原创 2020-06-09 10:00:42 · 868 阅读 · 0 评论 -
Vue 3.x 如何高效学成?本文详解
前言本文所分享的是关于 vue 3.x 在用法上的改变,而不是在代码实现上的不同。虽然 vue2 到 vue3 的实现大改,但在用法上变化基本不大,比较明显的一个变化就是添加了 setup(){} 函数了,几乎所有的配置变成了以函数的方式进行定义。即使是这样,但小改动还是很多的。本文主要分享的是 vue 2.x 与 vue 3.x 之间一些常见用法的差异。虽然记录的不多,但也不算少。本文资料来源:github.com/vuejs/rfcs/…当然这里默认你已经熟练掌握了 vue 2.x 的...原创 2020-06-08 21:50:11 · 998 阅读 · 0 评论