02 2020 档案
摘要：开发中向服务器请求到的数据是特别复杂的，需要从中抽离出需要展示的数据进行展示个和交互。 思路： 先将请求到的复杂数据传递到一个类A中，从类A里抽离出需要的数据。需要展示数据的地方，面向类A开发，类A关心数据抽离问题，不关心如何展示，只管提供所需要的数据。 页面关心展示数据问题，不关心数据问题，只管和
阅读全文
摘要：一、什么是函数防抖 概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。 举个栗子，坐电梯的时候，如果电梯检测到有人进来（触发事件），就会多等待 10 秒，此时如果又有人进来（10秒之内重复触发事件）
阅读全文
摘要：需求：滚动到一定位置，固定，不再滚动，实现吸顶效果。 思路一： 使用原生滚动，给需要吸顶的组件添加样式 .tab-control{ position: sticky; /* 从顶部向下滚动44px，固定，不在向下滚动。向上y小于44px恢复滚动*/ top: 44px } 思路二： hack的方法(
阅读全文
摘要：<template> <div class="tab-control"> <div v-for="(item , index) in title" class="tab-control-item" :class="{active: index currentIndex}" @click='itemC
阅读全文
摘要：前言： 对第三方库进行二次封装和抽离到统一模块，项目面对自己的模块进行开发。如果有一天更换库，只需要修改自己模块中的代码，无需对整个项目进行重构。 将axios网络请求库封装到network文件下的request.js中，项目中所有网络请求相关，全部面对request.js开发。 一、vue目录结构
阅读全文
摘要：一、Promise()的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // 1. 使用setTimeout // set
阅读全文
摘要：github：https://github.com/zwnsyw/TabBar 一、实现简单思路 1.在页面底部有一个单独的TabBar组件1.1自定义TabBar组件，在APP中使用1.2让TabBar出于底部，并设置相关的样式 2.TabBar中显示的内容由外界决定 2.1定义插槽 2.2fle
阅读全文
摘要：一、目录结构 二、配置方法 提示：和package.json同级新建vue.config.js文件(可选文件，默认没有创建)。 const path = require('path');//引入path模块 function resolve(dir){ return path.join(__dirn
阅读全文
摘要：替换新版vue-cli创建项目的public>index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
阅读全文
摘要：关键字：路由懒加载，全局导航守卫，组件导航守卫，redirect重定向，keep-alive，params，query 一、目录结构 二、index.js 1 // 配置路由相关的信息 2 import VueRouter from 'vue-router' 3 import Vue from 'v
阅读全文
摘要：Vue路由vue-router 前面的话 在Web开发中，路由是指根据URL分配到对应的处理程序。对于大多数单页面应用，都推荐使用官方支持的vue-router。Vue-router通过管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换。本文将详细介绍Vue路由vue-router
阅读全文
摘要：Vue前端路由 1. npm install vue-router --save 2.脚手架安装 一、目录结构 二、index.js // 0.导入vue和路由插件 import Vue from 'vue' import VueRouter from 'vue-router' import Hom
阅读全文
摘要：1.箭头函数的基本使用 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script> 10 // 箭头函数的写
阅读全文
摘要：1 // 高阶函数 filter/map/reduce 2 3 // filter中的回调函数有一个要求：必须返回一个boolean值， 4 // 当返回true时，函数内部会自动将这次回调的 n 加入到新的数组中 5 // 当返回false时，函数内部会自动过滤掉这次的 n 6 const num
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div id="app"> 10 <ul> 11 <li v-f
阅读全文
摘要：博客园美化需要添加该特效可将代码复制到页脚 代码 1 <script> 2 ! 3 function() { 4 function n(n, e, t) { 5 return n.getAttribute(e) || t 6 } 7 function e(n) { 8 return document
阅读全文
摘要：darkgreentrip 1 #home { 2 margin: 0 auto; 3 width: 80%;/*原始65*/ 4 min-width: 980px;/*页面顶部的宽度*/ 5 background-color: rgba(245, 245, 245, 0.7); 6 padding
阅读全文
摘要：模版主题： Custom 首页定制css代码 1 :root{--sk-size:60px;--sk-color:#ffb3cc} 2 #home{display:none} 3 #loading{position:fixed;top:0;left:0;right:0;height:100vh;di
阅读全文
