- 博客(65)
- 收藏
- 关注
RSS订阅原创 vue移动组件vant官网打不开的解决方法
1.：在站长工具中检测vant的dns，站长工具的地址：站长工具DNS查询链接2. 复制紫色框中的ip，应该是复制其中的任一个都行3. 以管理员身份运行 打开hosts文件，一般hosts文件路径：C:\Windows\System32\drivers\etc\hosts添加箭头指的内容，保存后重新打开vant的官网即可...
2020-09-24 10:24:15
3985
1
转载 Vue PC端框架和Vue移动端UI框架
在学习Vue的过程之中，我发现不管是 BAT 大厂，还是创业公司，Vue 都有着广泛的应用，而且框架层出不穷，学习文档也越来越多，Vue也越来越受欢迎。下面是我整理的 Vue PC端和移动端的UI框架，建议收藏，方便以后学习的时候拿出来查看。Vue PC端框架1. Element中文文档：htt...
2020-09-12 15:00:11
522
原创 offset系列、scroll系列和client系列的用法、区别及兼容性代码
offset系列 获取元素真实的宽高与位置offsetWidth/offsetHeight 特点如下获取的是number数据类型的，不带单位只能用于获取，不能修改获取的是元素的真实宽高（width/height + padding + border）offsetParent获取的是最近的定位父级如果元素是非固定定位，且该元素所有的父元素都没有定位，则定位父级是body如果一个元素是固定定位，定位父级是nullbody的定位父级是nulloffsetLeft/offse
2020-09-06 18:54:24
237
原创 js打印等腰三角形
var str = '';for (var i = 0; i < 5; i++) { for (var j = 0; j < (4 - i); j++) { str += ' '; } for (var k = 0; k <= i; k++) { str += '☆'; } str += '<br>';}document.write(str);
2020-08-31 17:36:47
1482
原创 async await的使用方法
async & await是ES7中提出的新语法作用是将异步代码以同步的方式进行书写await的用法：用来修饰异步代码，让其以同步的方式进行书写async的用法：用来修饰await所在的函数//await用法：//传统代码：axios.get('/login').then(res=>{})//用await修饰let res = await axios.get('/login') //async用法async function login(){ l..
2020-08-08 11:12:12
304
原创 vant+vee-validate校验的基本使用
main.js//导入：import VeeValidate,{Validator} from 'vee-validate';//方言包import zh_CN from "vee-validate/dist/locale/zh_CN.js";Vue.use(VeeValidate,{ event:"blur"});//events为空//Vue.use(VeeValidate, {// events: "" // 禁用校验事件//});//使用方言包Validato.
2020-08-08 10:20:24
1805
原创 module.exports和exports的区别
exports对象是module对象的一个属性，在初始时exports和module.exports都是指向同一块内存区域，都指向空对象CommonJs规范中，我们用require()方法引入模块的时候，其实是引入了module.exports对象在不改变exports内存指向的情况下，修改exports的值可以改变module.exports的值导出时尽量使用module.exports//在这个例子中，外部没有办法访问hello，因为module.exports为空const hello .
2020-08-03 19:52:28
179
原创 js正则表达式笔记
/abc/：看字符串有没有一个叫abc的字符串，示例；console.log(/abc/.test('a1b1c1'));//false console.log(/abc/.test('abc1111'));//true /a|b|c/：有a或b或cconsole.log(/a|b|c/.test('abc1111'));//true console.log(/a|b|c/.test('a11255'));//true console.log(/a|b|c/.test('dd22.
2020-07-23 17:56:06
110
原创 阿里云服务器远程连接
登录阿里云服务器，选择实例，点击右边的远程连接输入密码登录，可直接修改远程连接密码登录成功后，需要输入登录名和密码，linux用户默认登录名是root，windows默认是administrator，密码是实例密码，忘记了可以直接在实例列表中重置输入登录名和密码后即连接成功项目部署说明登录服务器ssh root@ip如果连接不成功，绑定密钥对，通过ssh -i 密钥路径 root@ip访问进入服务器根目录cd /安装nginxyum install nginx查看ngin.
2020-07-13 21:15:27
537
原创 实现路由懒加载的两种方式import,resolve
//方式一：使用import{ path:'/home', name:'home', component:() => import('./views/home.vue')}//方式二：{ path:'/home', name:'home', component:resolve => require(['./views/home.vue'],resolve)}
2020-07-12 22:17:17
1251
原创 vue.config.js的常用配置
配置参考链接vue.config.js配置//vue.config.jsmodule.exports = { devServer:{ host:'localhost', //主机 port:8080, //端口 proxy:{ //代理,在开发环境下将 API 请求代理到 API 服务器 '/api':{ target:'http://localhost:3000', //比如请求/api/users，代理到http://localhost:3000/api/us.
2020-07-12 22:06:21
280
原创 less混合函数
less的混合函数与sass的混合函数语法不太一样/*定义变量，给定默认值*/.flex(@hov:space-between,@col:center) { display: flex; justify-content: @hov; align-items: @col;}/*调用*/.container { height:112px; .flex;}/*输出：*/.container { height:112px; display:flex; justify-cont
2020-07-11 23:38:50
264
原创 element-ui中的upload上传的基本使用
action：图片上传的地址注意：我们一般设置的基地址是axios的基地址，要通过axios发请求才会添加上基地址，这里上传用的不是axios，所以路径不能简写headers：请求头，因为一般是在axios请求拦截里添加了请求头，加了token，所以这里上传需要手动加tokenname：上传的参数名，默认是file，要跟接口要求的一致<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicod.
2020-06-26 11:30:00
773
原创 json-bigint处理大数字问题
js里面的整数有安全范围，即最大能显示的范围，超过了这个范围可能会精度丢失Number.MAX_SAFE_INTEGER //值为9007199254740991json-bigint：可以像JSON.parse一样方便转换用法：//导入import JSONbig from 'json-bigint'//可以通过axios的transformResponse方法，这个方法的作用是在传递给then/catch前，允许修改响应数据//axios在这里默认把响应体从json字符串转.
2020-06-09 12:15:19
6110
1
原创 axios请求拦截、响应拦截，router导航守卫
axios请求拦截：可以在请求头统一添加token等axios.interceptors.request.use( function (config) { //从vuex中获取用户信息 let user = store.state.userForm; if (user) config.headers.Authorization = `Bearer ${user.token}`; return config; }, function (error) { ret
2020-06-08 18:07:37
598
原创 vue 过滤器filters
对文本进行处理：使用过滤器//局部过滤器 <template> <div class="son"> <input type="text" v-model="msg"> {{ msg | formatName }} </div> </template> <script> export default { data() { return { msg:'' } }, filters
2020-06-08 16:57:48
266
1
原创 es6中的导入导出
默认导入导出：导出：export default 数据导入：import 名字 from 路径导入时的名字可以随便写导入的是默认暴露的那个值按名字导入导出导出：export const 名字 = 数据导入：import { 名字 } from 路径导入的时候加了大括号一定是按名字，没有大括号一定是默认...
2020-06-08 16:37:52
312
原创 sticky footer 实现页脚块位置根据页面内容长度变化
sticky footer，指的是当页面内容不够长的时候，页脚的位置粘贴在视窗底部；当页面内容足够长时，页脚块会被内容向下推送，位置显示在内容下方，不会遮挡内容sticky footer比较常用的布局方式如下：<div class="detail"> <!--外层的这个wrapper与底部区域同级--> <div class="detail-wrapper clearfix"> <div class="detail-main"> <!-
2020-05-16 15:05:41
194
原创 图片背景模糊效果filter的实现
给一个div添加背景图片（img标签），并且有模糊效果，部分代码如下：html结构为：<div class="header"> <div class="bg"> <img src="./bg.png" alt="" width="100%" height="100%"> </div></div>样式如下，特别注意需要设置z-index为-1.header { position:relative; overflo
2020-05-15 17:36:17
922
原创 在less中使用background-image时，url的设置问题
本来尝试了一下es6的模板字符串，然后也没成功.bg-image(@url) { background-image: ~"url(@{url}@2x.png)"; @media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){ background-image:~"url(@{url}@3x.png)"; }}在less中，符号 ~ 后面的双引号的内容会被less编译时忽略less的符号 @ 和 {}
2020-05-15 15:35:25
3848
1
原创 伪类+缩放 实现1像素的下边框（使用less）
如果直接给一个1像素的border，在pc端浏览是真的1像素，如果在手机端浏览，就不是1像素，因为手机端的物理像素是设备像素的两倍，所以在375像素下的手机显示的是2像素的border（设计稿一般是750）这里把伪类和缩放的样式放在两个不同的less文件中伪类：主要是给父元素添加after伪类，伪类绝对定位来实现/*mixin.less 样式根据自己的需求来写*/.border-1px(@color) { position:relative; &::after { conte
2020-05-15 09:55:54
548
原创 使用router-link时，设置链接激活时使用的类名，默认是router-link-active
1. 设置链接激活时默认类名 router-link-active 的样式，详细例子如下：<template> <div class = "tab"> <div class = "tab-item"> <router-link to="/home">首页</router-link> </div> <div class = "tab-item"> <router-link to="/detai
2020-05-14 22:43:33
1681
原创 vue项目中使用less时报错TypeError: loaderContext.getResolve is not a function
vue项目中，使用 npm install less less-loader --save-dev 安装好less写上lang=“less”<style lang="less"></style>启动项目npm run dev后报如下错误：原因：less-loader版本过高，在package.json中看到我安装的less-loader的版本是6.x，所以安装低版本的less-loader即可 npm install less-loader@4.1...
2020-05-14 12:52:24
1022
原创 vue报错 Do not use built-in or reserved HTML elements as component id:header
在vue项目中使用组件时，组件名不能和html标签重复，header是h5中的新标签，所以组件名不能是header
2020-05-14 12:28:16
399
原创 webpack配置：devServer中的before方法的作用
新版本的vue中已将dev-server.js与webpack.dev.conf.js合并，所以在dev-server.js的配置可以写在webpack.dev.conf.js/*webpack.dev.conf.js*/const devWebpackConfig = merge(baseWebpackConfig,{ devServer: { //before方法：能够在其他所以的中间件之前执行自定义的中间件 before(app) { app.get('/api/goods', fu
2020-05-14 09:49:25
12612
原创 将svg图片转为字体图标
icomoon链接 通过icomoon将svg图片转为字体图标的步骤如下：点击icomoon app按钮点击import icons按钮，导入svg图选中导入的svg图，点击右下角的generate font在这个页面中，点击preferences可以修改字体图标名，前缀等等，点击get code可以查看字体图标的使用方法点击download下载字体图标下载并解压缩后根据demo.html查看使用方法，最后将文件拷贝到项目中使用...
2020-05-14 08:39:46
1782
1
原创 pc端判断是32位还是64位系统
var agent = navigator.userAgent.toLowerCase();if(agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0 ) { console.log('64位');}else { console.log('32位');}
2020-04-27 15:59:04
272
原创 vuex：组件中操作state,mutations,actions的方式（vuex的使用方法）
vuex是一个数据管理仓库官网的图如下：在组件中操作state，mutations，actions的方式示例如下：+ store文件的部分代码为：export default new Vuex.Store({ state:{ num:0, name:'aa' }, //同步 mutations:{ setNum(state){ state.num++; } ...
2020-04-15 20:39:11
1681
原创 面试题：前端性能优化
目的：让页面加载速度更快，提高用户体验减少http请求，使用缓存图片懒加载压缩、合并文件，避免空src，因为空src会重新加载页面，影响速度外部脚本置底css文件置顶...
2020-04-15 16:17:46
155
原创 面试题：在浏览器输入一个url经历哪些过程
发送http请求前进行域名解析(DNS解析)，获取相应的ip地址浏览器向服务器发起连接，建立tcp三次握手浏览器向服务器发送请求，请求数据包服务器收到请求，返回数据浏览器收到http响应，解析html源码生成DOM，解析css,js...
2020-04-15 16:05:54
820
原创 面试题：this的指向问题
非严格模式下this指向默认是window，严格模式下默认是undefined普通函数调用this指向全局对象window对象函数调用谁调用this就指向谁构造函数调用this指向实例对象箭头函数箭头函数的this是在定义函数的时候绑定的，不是在执行过程中绑定可以解决匿名函数和定时器的this指向问题，不用用变量that储存this示例：v...
2020-04-15 16:02:34
2645
原创 面试题：MVVM和MVC区别
MVVMMVVM：Model-View-ViewModel（模型-视图-视图模型），双向数据绑定，即数据驱动视图，当数据改变时，视图更新，当视图的数据改变时，model也会改变，只要关注业务逻辑，不用手动操作DOMVue2.0双向数据绑定实现原理：Object.definePropertyVue3.0双向数据绑定实现原理：new ProxyMVCMVC：Model-View-Con...
2020-04-15 13:42:18
1364
原创 面试题：从输入url到展示的过程
发送到dns，获取域名对应的web服务器对应的ip地址浏览器与服务器建立tcp连接（三次握手）浏览器发生http请求服务器接收请求，返回响应数据浏览器接收、下载数据，解析html源文件生成DOM,解析css、js文件，渲染页面...
2020-04-15 13:19:39
155
原创 typescript环境安装、运行及vscode自动编译设置
typescript 环境安装安装 typescript 前要安装node.js和npm通过npm安装，全局安装：npm install -g typescript检验是否安装成功：tsc -Vtsc 作用是将ts代码转为浏览器能识别的js代码typescript的运行在.ts文件中写typescript代码用tsc将typescript代码编译为js代码执行js代码...
2020-03-17 22:02:19
258
原创 TCP传输的三次握手和四次挥手
三次握手第一次：客户端向服务器发起连接请求，表示客户端想要和服务端进行连接第二次：服务端收到请求后发出确认报文，询问浏览器是否准备好第三次：客户端收到确认报文后再给服务端发出确认信息，表示已经准备好连接四次挥手客户端发送关闭连接的请求服务端收到请求后返回确认，目前是处于半关闭的情况，这个时候服务端向客户端发送数据的话客户端仍然要接收服务端将最后的数据发送完后向客户端发送连接...
2020-03-14 13:02:42
125
原创 vue组件传值的方式及示例
父组件给子组件传值父组件在子组件的标签里写行内属性<son :msg="myMsg" test="hello"></son> <!--不加冒号传的是该字符串，加冒号是表达式-->子组件通过 props 接收，有几个值代表父组件传几个参数props:['msg','test']子组件给父组件传值子组件用$emit传this.$...
2020-03-10 20:57:40
221
原创 使用axios发送get、post请求
get请求方式一axios.get('/login?userId=111') .then(res=>{ console.log(res);}).catch(error=>{ console.log(error);})方式二，通过params传axios.get('/login',{ params:{ userId: 111 }}) .th...
2020-03-10 10:17:44
928
原创 javascript处理大数字的问题
JS里面的整数有安全范围，即最大能显示的范围，超过了这个范围可能精度会丢失使用 json-bigint 可以进行转换npm i json-bigint//示例：`transformResponse` 在传递给 then/catch 前，允许修改响应数据axios.defaults.transformResponse = [function (data) { //JSONbig.par...
2020-03-09 23:21:11
1613
1
原创 vue-cli 3.0在创建项目时无法选择配置的问题
使用vue create创建项目上下箭头无法切换选择Manually select features解决：通过winpty vue.cmd create wap这个命令创建项目使用powershell
2020-03-08 12:13:38
2154
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人