07 2020 档案

vuex入门(2)-辅助函数mapState和mapMutations
摘要：在上一篇文章中，我们介绍了vuex的基本概念和使用方法 当需要共享的数据比较简单且都是同步操作时，组件可以跳过Action，直接用 commit 方法调用Mutations 同时我们也可以借助两个辅助函数简化我们的代码 mapState和mapMutations可以接收数组或者对象作为参数 将sto 阅读全文
posted @ 2020-07-23 15:29 BAEBAE996 阅读(170) 评论(0) 推荐(0)
vuex入门(1)-基础概念和使用
摘要：一、vuex的概念和作用 vuex是一种专门为vue应用程序开发的状态管理模式 核心是"store"（一个公共管理的仓库）即下图虚线框内的部分 上图呈现了vue组件对状态进行读写的完整事件流： 当组件需要获取状态时，可以直接从State中获取 当组件需要改变状态时： 1- 通过dispatch方法调 阅读全文
posted @ 2020-07-23 11:14 BAEBAE996 阅读(147) 评论(0) 推荐(0)
vue使用递归组件实现多级列表
摘要：一、背景需求 在页面上渲染一个多级列表的时候，数据往往也具有多个层级 例如：数组的每个元素都是一个对象，对象中的value可能是一个数组 { "ret": true, "data": { "sightName": "大连圣亚海洋世界(AAAA景区)", "bannerImg": "", "categ 阅读全文
posted @ 2020-07-22 15:48 BAEBAE996 阅读(1098) 评论(0) 推荐(0)
vue项目中的渐隐渐现效果
摘要：一、背景需求 在页面中，我们希望实现以下功能： 进入页面时，顶部左侧显示返回按钮 当页面向下滚动一定距离时，在可视区域顶部固定“Header”一栏 效果如下： 二、实现思路 1、静态布局 在页面加载完成后、开始滚动前： 将返回按钮所在的div 设置绝对定位，用标志位showAbs设置v-show / 阅读全文
posted @ 2020-07-22 09:36 BAEBAE996 阅读(1533) 评论(0) 推荐(0)
vue性能优化之keep-alive
摘要：一、简介 keep-alive是vue的内置组件 当我们使用keep-alive包裹动态组件时，会缓存不活动的组件实例 简而言之，就是将组件(页面)的相关数据和状态载入缓存，防止在页面切换的时候重复渲染DOM 更详细的介绍请参考vue的官方API文档 二、使用方法 在项目根组件中，如果我们用keep 阅读全文
posted @ 2020-07-21 17:01 BAEBAE996 阅读(292) 评论(0) 推荐(0)
vue性能优化之函数防抖
摘要：一、背景 在上一篇文章中，我们介绍了如何实现城市列表随导航条滚动的功能 当用户不断拖动导航条的时候，会频繁地触发功能函数 这样会造成资源的浪费、降低页面运行的速度 因此，我们需要通过函数防抖(debounce)来解决这个问题 二、函数防抖的概念 函数防抖，即限制一个函数在一定时间内只能执行1次 实现 阅读全文
posted @ 2020-07-21 16:09 BAEBAE996 阅读(325) 评论(0) 推荐(0)
在vue项目中使用BetterScroll插件(3)-拖动导航条定位
摘要：一、背景需求 在 上一篇文章中，我们实现了点击字母->定位到相应区域的功能 接下来，我们要实现城市列表随导航条滚动而滚动的功能 页面静态布局如下： 二、移动端 touch事件的基础知识 常见的触摸事件包括： touchstart、touchmove、touchend touch对象代表一个触点，每个 阅读全文
posted @ 2020-07-18 16:12 BAEBAE996 阅读(488) 评论(0) 推荐(0)
在vue项目中使用BetterScroll插件(2)-点击导航条定位
摘要：一、背景需求 在城市列表页面中，我们希望通过导航条完成以下2项功能： 1、 点击字母，定位到以该字母开头的城市区域 2、 在垂直方向拖动导航条，根据鼠标（手指）所在的字母 定位到相应区域 页面的静态布局如下图： 二、兄弟组件的数据传递 字母导航条所在的子组件为 Alphabet，城市列表所在的子组件 阅读全文
posted @ 2020-07-18 16:10 BAEBAE996 阅读(474) 评论(0) 推荐(0)
在vue项目中使用BetterScroll插件(1)-滚动列表
摘要：一、背景需求 BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件 它的核心灵感来自于 iscroll 的实现 它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化 在一个以长列表为主要内容的vue 阅读全文
posted @ 2020-07-18 16:09 BAEBAE996 阅读(356) 评论(0) 推荐(0)
在vue项目中使用代理转发机制实现本地数据测试
摘要：一、背景需求 在一个不涉及后端开发的vue项目中，我们需要本地数据对页面进行动态渲染 而对于本地服务器来说，它只能访问static目录下的数据 这意味着我们需要一个机制，帮助我们将 对api目录的请求 转发到static目录下 二、实现方式 旧版本 在3.x版本的vue-cli中，webpack-d 阅读全文
posted @ 2020-07-17 09:23 BAEBAE996 阅读(616) 评论(0) 推荐(0)
使用vue-awesome-swiper插件制作轮播图
摘要：在前端开发中，经常需要在首页实现轮播图 本文将以win平台为例，详细介绍在vue项目中引入并使用vue-awesome-swiper插件的一般流程 一、安装 vue-awesome-swiper 库 参照 vue-awesome-swiper 的官方文档 在vue项目的根目录下打开git bash 阅读全文
posted @ 2020-07-15 22:23 BAEBAE996 阅读(239) 评论(0) 推荐(0)
在vue项目中使用iconfont
摘要：在实际的项目开发中，我们经常会借助confont图标库来渲染一些图标 本文将以win平台为例，详细介绍在vue项目中使用iconfont的一般流程 一、选择图标并下载到本地 打开 iconfont官网 进入“图标管理”中“我的项目”，并新建项目 挑选图标放入购物车中，然后打开购物车侧边栏，“添加至项 阅读全文
posted @ 2020-07-14 22:55 BAEBAE996 阅读(412) 评论(0) 推荐(0)
使用JS配合表单上传图片并预览
摘要：一、背景和需求 在商家上架新商品时，需要从本地上传商品图片并预览 将图片连同其他商品信息放入表单，通过POST请求发送给后端 二、HTML代码 <div class="box"> <div class="box-left"> <div class="title"><h1>上传商品图片</h1></d 阅读全文
posted @ 2020-07-05 15:22 BAEBAE996 阅读(817) 评论(0) 推荐(1)
JS购物车(3)-Ajax发送POST请求提交订单
摘要：一、背景和需求 在购物车页面中，当用户点击“提交订单”按钮时 需要收集商品ID、商品数量等订单数据，并向后端发送POST请求 二、HTML代码 以SKU为单位的商品数据的层级结构如下： <div class="item" id="007"> <div class="p-checkbox"> <inp 阅读全文
posted @ 2020-07-04 10:02 BAEBAE996 阅读(850) 评论(0) 推荐(0)
JS购物车(2)-全选/全不选的勾选框
摘要：一、背景和需求 在购物车页面中，需要为用户提供商品全选/全不选的功能 每件商品的勾选框是一个 [type=checkbox] 的input 在商品列表的顶部栏还需设置一个“全选”勾选框 当用户点击结算时，显示已勾选商品的总价 二、HTML代码 全选框 <div class="t-checkbox"> 阅读全文
posted @ 2020-07-04 10:00 BAEBAE996 阅读(1165) 评论(0) 推荐(0)
JS购物车(1)-数量增减框
摘要：一、背景和需求 在购物车页面中，需要为用户提供调整商品数量的功能 数量增减框由2个button和1个[type=text]的input组成 点击 + 按钮时，数量加一；点击 - 按钮时，数量减一 并更新此商品对应的“小计” 二、HTML代码 <div class="p-quantity"> <inp 阅读全文
posted @ 2020-07-04 09:58 BAEBAE996 阅读(6488) 评论(1) 推荐(0)