![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 94
YinJie…
罗曼罗兰说:“这个世上只有一种真正的英雄主义。那就是,认清生活的真相,并且仍然热爱它。
展开
-
手写 vue-lazyload 源码,带你掌握高阶自定义指令的内部实现原理
在 bind 这个函数中我们首先去找滚动的父级元素,然后给这个父级元素绑定事件处理函数,再给每一张图片进行类实例包装,把有用的信息全都放在图片实例里,所有图片的信息组成了一个图片池。当第一次加载的时候手动执行 handleScroll 事件,当我们滚动页面的时候执行的也是 handleScroll ,那他都做了什么事呢?看每一张图片在不在我们可视化区域内,在的话就 load,前提是这张图片没有 load 过。在 imgRender 中做的是对图片渲染的过程,其实就是添加 src 属性。...原创 2022-08-27 09:30:11 · 1591 阅读 · 16 评论 -
使用BetterScroll封装页面滚动及轮播图组件(一文入门移动端页面滚动神器BetterScroll)
BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll (opens new window)的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。BetterScroll 是使用纯 JavaScript 实现的,这意味着它是无依赖的。本文就是针对初学者进行讲解如何封装基础的页面滚动组件.........原创 2022-08-15 17:08:23 · 1398 阅读 · 0 评论 -
前端通用后台登录解决方案(一站式解决封装axios模块、接口请求模块、登录请求动作、本地缓存处理、登录鉴权解决)
我们希望封装出来的axios模块,至少需要具备一种能力,那就是:根据当前模式的不同,设定不同的BaseUrl,因为通常情况下企业级项目在开发状态和生产状态下它的baseUrl是不同的。...原创 2022-07-20 14:40:13 · 1760 阅读 · 28 评论 -
vue3 自定义Form组件(抽象验证规则,支持v-model,支持默认属性)
刚刚我们完成了邮箱的验证逻辑,我们还得做密码框的验证逻辑,如果我们的表单还有很多功能不一样的输入框,那我们得挨个给他们添加验证功能,这样就有大量重复代码,要写非常多冗余的变量和函数,我们作为开发者最忌讳的就是复制粘贴做搬运工,所以我们就想把这部分的逻辑抽离出去作为一个可复用的组件。我们输入框的组件就是图片中的validate-input,如果我们只需要在父组件中输入要验证的规则和验证失败的信息,把逻辑交给validate-input来判断,那整体代码就非常清晰了。...原创 2022-07-15 19:23:38 · 4005 阅读 · 3 评论 -
Vue3 京东到家项目实战第二篇(商家详情页面及购物车完整逻辑开发) 进阶式掌握vue3完整知识体系
现在我们的附近店铺是写死的数据,我们把它通过接口请求过来。在 util 下的 request.js 中我们还需要写一个 get 请求来获取附近店铺的数据,那我们创建一个 axios 实例对象,在里面配置参数,这样就不需要在每个请求里都设置 baseURL 了。现在我们就要改成从后端接口来请求相关数据 ,删掉这些数据然后把刚刚定义的get方法引入进来,向接口发送get请求,这里请求的接口在接口文档里....原创 2022-07-13 12:13:26 · 3031 阅读 · 27 评论 -
Vue3 京东到家项目实战第一篇(首页及登录功能开发) 进阶式掌握vue3完整知识体系
在本文中我们会完成京东到家项目首页和登录注册页面的样式开发,其中会用到 element-plus 组件库,登录注册会使用 axios 发送 Mock 请求来实现,贴近真实项目开发。原创 2022-05-27 12:41:40 · 3719 阅读 · 61 评论 -
Vue3.0 实现支持搜索和筛选的用户列表(带动画过渡效果)
目录1. 常规风格的示例工程开发2. 使用组合式API重构用户列表页面3. 优化用户列表页面1. 常规风格的示例工程开发首先新建一个名为 normal.html 的测试文件,在HTML文件的head标签中引入Vue框架并设置常规的模板字段如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-U原创 2022-05-18 13:14:09 · 2519 阅读 · 7 评论 -
Vue3全家桶入门 (通过vue-cli脚手架搭建todolist项目环境,深入vue3.0核心知识)
todolist项目准备vue3.0环境搭建进入想要的目录路径:vue create todolist选择select features,点击回车上下键移动按空格选择,一定不要按回车,这样就进入下一步了我们按空格选择Router和vuex和下面的css预处理器,我们暂时先把Linter这个关闭掉我们选择3.x的版本,按回车路由是否选择history模式,写Y按回车这一步选择css预处理器,我就选择一个less配置项就选择它默认的配置项..原创 2022-05-15 00:07:20 · 2824 阅读 · 60 评论