- 博客(14)
- 收藏
- 关注
原创 对keep-alive的理解是什么?
1.Keep-alive 是什么?keep-alive 是 vue 中的内置组件,能在组件切换过程中将状态保留在内存中,防⽌重复渲染 DOM keep-alive 包裹动态组件时,会缓存不活动的组件实例,⽽不是销毁它们 keep-alive 可以设置以下 props 属性: include - 字符串或正则表达式。只有名称匹配的组件会被缓存 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存 max - 数字。最多可以缓存多少组件实例 <template&g
2021-10-26 19:13:48
419
原创 vue3快速上手
Vue CLI从 v4.5.0 开始,vue-cli现在提供了内置选项,可在创建新项目时选择 Vue 3。现在可以升级vue-cli并运行vue create来创建 Vue 3 项目。Vue RouterVue Router 4.0 提供了 Vue 3 支持,并有许多非兼容的变更,详情见迁移指南。VuexVuex 4.0 提供了 Vue 3 支持,其 API 与 3.x 基本相同。唯一的非兼容变更是插件的安装方式创建项目在创建项目目录位置打开终端,输入:vue ...
2021-10-13 21:22:53
186
2
原创 项目优化策略
一.使用Vue ui可视化面板第一步:使用Windows+R快捷键,输入cmd,打开小黑窗,然后输入vue ui命令,运行成功之后会自动打开可视化面板,如下图:第二步:导入或创建一个vue项目开始使用二.生产打包报告第一步:在package.json页找到vue-cli-service build后加--report第二步:打包后就可以在dist文件中找到report.html三.去除console打印第一步:先安装插件npm i babel...
2021-09-27 20:11:10
142
原创 JSON.stringify()和JSON.parse()的区别和用处
1.JSON.stringify()和JSON.parse()的区别JSON.stringify()的作用是将JavaScript 对象转换为 JSON 字符串; JSON.parse()可以将JSON字符串转为一个对象。简单点说,它们的作用是相对的,我用JSON.stringify()将对象a变成了字符串c,那么我就可以用JSON.parse()将字符串c还原成对象a。let arr = [1,2,3];JSON.stringify(arr);//'[1,2,3]'typeof JSO.
2021-09-18 11:19:39
131
原创 将时间戳转化日期格式并补0(可直接复制使用)
1.将时间戳转化日期格式并补0代码如下:timeFormat(timestamp) { var time = new Date(timestamp); var year = time.getFullYear(); var month = (time.getMonth() + 1 + "").padStart(2, 0); var date = (time.getDate() + "").padStart(2, 0); var hours = (time.getHours() + "").
2021-09-17 17:19:01
603
原创 多环境变量配置(可直接引用)
在学习vue的时候,一直纳闷一件事:组件的data数据为什么必须要以函数返回的形式,为什么不是简单的对象形式呢?遂带着问题去翻官方文档,文档中自然也写明了这么做的原因,本篇博文以官方文档给出的原因为基础,并加上具体的例子,来阐述这么设计的原因。...
2021-09-16 16:44:45
188
原创 如何实现元素⽔平垂直居中?
居中是⼀个⾮常基础但⼜是⾮常重要的应⽤场景,实现居中的⽅法存在很多,可以将这些⽅法分成 两个⼤类:居中元素(⼦元素)的宽⾼已知 居中元素宽⾼未知实现⽅式:1.利⽤定位+margin:auto<style> .father{ width:500px; height:300px; border:1px solid #0a3b98; position: relative; } .son{ width:100px; height:40px; background:
2021-09-08 21:20:44
208
原创 BFC理解
1.什么是BFC?BFC(Block Formatting Context),即块级格式化上下⽂,它是⻚⾯中的⼀块渲染区域,并且有⼀套属于⾃⼰的渲染规则: - 内部的盒⼦会在垂直⽅向上⼀个接⼀个的放置 - 对于同⼀个BFC的俩个相邻的盒⼦的margin会发⽣重叠,与⽅向⽆关。 - 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此 - BFC的区域不会与float的元素区域重叠 - 计算BFC的⾼度时,浮动⼦元素也参与计算 - BFC就是⻚⾯上的⼀个隔离的独⽴容器,容
2021-09-08 20:56:52
67
原创 盒模型理解
1.什么是盒模型:盒模型其实就是浏览器把⼀个个标签都看⼀个矩形盒⼦,那每个盒⼦(即标签)都会有内容 (content),边框(border),以及内容和边框中间的缝隙(即内间距padding),还有盒⼦与盒 ⼦之间的外间距(即margin),⽤图表示为:2.盒模型有俩种:IE盒模型和W3C标准盒模型IE盒模型总宽度=border+padding+内容宽度+margin标准盒模型总宽度=border+padding+width+margin3.box-sizing的使...
2021-09-08 19:45:56
432
原创 在vue中路由传参
vue-router传递参数分为两大类编程式的导航 router.push 声明式的导航 <router-link>一.编程式导航传参方法: 1.query方式:必须定义path属性来控制跳转的路由,通过query来传参,用this.$route.query在接收参数页面接收参数。特点:参数会暴露在url地址中;刷新页面数据不会丢失 只能传字符串,如果不是字符串,会自动转换为字符串,在进行传递传递参数页面代码<template> <d.
2021-09-02 13:55:09
401
原创 axios封装和接口管理
1.为什么封装axios ?答:axios 的 API 很友好,你完全可以很轻松地在项⽬中直接使⽤。 不过随着项⽬规模增⼤,如果每发起⼀次 HTTP 请求,就要把这些⽐如设置超时时间、设置请求头、根据项⽬环境判断使⽤哪个请求地址、错误处理等等操作,都需要写⼀遍 这种重复劳动不仅浪费时间,⽽且让代码变得冗余不堪,难以维护。为了提⾼我们的代码质量,我们应该在项⽬中⼆次封装⼀下 axios 再使⽤2.如何封装 ?封装的同时,你需要和 后端协商好⼀些约定,请求头,状态码,请求超时时间......设置
2021-08-31 08:31:54
176
原创 rem 适配方案
remrem是一个相对单位 类似于emem是相对父元素的字体大小来说的rem的基准是相对于html元素的字体大小根字体:<html>字体的大小px;rem的优点:就是可以通过修改html里面的字体大小来改变页面中元素的大小 整体控制 Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具: postcss-pxtorem是一款postcss插件,用于将单位转化为rem lib-flexible用于设置rem基准值,由淘宝手...
2021-08-27 20:06:02
311
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人