- 博客(37)
- 收藏
- 关注
RSS订阅原创 项目笔记（3.22）
创建项目创建项目创建配置vue create presspro选择vue的版本选择是否使用历史模式（ n）选择css的编译语法选择语法检查的规范，三选一即可，（prettier）何时触发语法检查（save） 定义配置文件（独立配置） 回车项目创建完成 项目初始配置eslintrc的配置打开.eslintrc配置文件，参考eslint官网修改配置在rules配置项中，对相关规则进行配置配置语法格式化工具prettierrc配置，在项目根目录创建.prettierrc
2022-04-12 15:56:05
2303
1原创 uni-app开发中遇到的技巧
1.搜索的防抖处理这里是一个搜索框，ui组件库内定义了每次搜索框的值发生变化都会触发input事件函数 <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>在js代码中进行防抖处理input(e){ // console.log(e.value) // 定义一个延时器,规定500毫秒以后执行，并赋给this.timer
2022-03-23 18:37:37
1447
原创 在uni-app中封装请求
上代码//使用修改域名，默认是get，需要post则要改动一部分const BASE_URL="https://api-hmugo-web.itheima.net/"; //在主文件入口main.js中引入，然后绑定到全局对象上，例如 uni.$myRequest=myRequest，使用的时候直接uni.$myRequest()export const myRequest=(options)=>{ //传入的options是一个json对象 // 让这个方法返回一个promise对
2022-03-22 16:55:55
353
原创 vue-router相关知识笔记(包括三个生命周期钩子)
目录路由vue-router1.简单介绍2.使用路由3.嵌套路由（多级路由）4.命名路由5.路由传参6.props配置项7.编程式路由导航8.缓存路由9.路由重定向10.路由元信息11.路由守卫（重点）备注：遗留问题，props中params无法二次渲染（已解决）路由vue-router1.简单介绍Vue Router 是Vue.js的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：...
2022-03-15 18:01:49
1716
原创 UI组件库-Vue
一、pc端组件库1.element ui 组件库2.ant design of vue二、移动端组件库1.Vant组件库2.cube 组件库3.mint组件库4.nut ui组件库三、简单介绍使用1.引入element UI在官网文档中查看安装方式在项目命令行工具中执行命令（-s在高版本npm中不需添加）npm i element-ui -S安装完成引入2.全局引入（文件较大）在项目...
2022-03-15 17:39:11
1245
原创 vuex知识点以及相关笔记
一、vuex简介vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex可以作为一种插件，可以将数据，同步异步的方法统一管理，vuex这个整体是一个仓库，用store来指定，这个仓库包含了数据和方法，仓库内部分为了三个区域actions是存放异步方法并且调用的地方mutations是存放同步调用方法的地方并且将数据传给statestate，状态，是存放数据处二、
2022-03-13 13:45:51
1747
原创 axios具体配置及源码解析
一、axios基本使用1.axios介绍axios是很热门的发送Ajax请求的方式，是基于promise的，可以在nodejs中运行，支持promise的api，可以预处理，对响应提前作出准备等2.二、axios源码解析1.记录遇到的自己曾经迷惑的一个问题有两个构造函数，实例化Axios后，实例对象上，就有了interceptors属性，而interceptor上有request属性，而将一个构造函数的实例对象赋值给request属性此时request属性就有了WebMa
2022-03-08 21:57:01
259
原创 AJAX、axios、async、跨域相关笔记
一、前置知识1.浏览器的调试面板中额network（网络）选项记录发送的请求2.headers单击其中任意一个请求右侧header中的response header是响应头，request header是请求头，记录请求的信息3.querty string parameters对URL中的参数进行解析和格式化4.其他的选项preview 响应预览response响应initiator 请求链timing 请求时长cookie 浏览后...
2022-03-04 12:39:17
1477
原创 字符串上的部分方法（笔记）持续更新
1.删除字符串两端的空格String.prototype.trim()const greeting = ' Hello world! ';console.log(greeting);// expected output: " Hello world! ";console.log(greeting.trim());// expected output: "Hello world!";
2022-02-26 14:17:55
123
原创 对象上的部分方法（笔记）持续更新
1.判断一个对象上是否具有该属性，返回一个布尔值Object.prototype.hasOwnProperty()
2022-02-26 11:39:16
197
原创 webpack版本及less等版本的查看方式（持续添加）
1.查看webpack的版本npm view webpack versions得到如下2.查看less-loader版本npm view less-loader versions得到如下
2022-02-23 16:59:13
985
原创 【数组方法】（笔记）
1.删除或者替换数组元素，改变原数组Array.prototype.splice()示例2.在数组的后面新增一个或者多个元素，并返回该数组的新长度Array.prototype.push() 会改变原数组<script> const animals = ['pigs', 'goats', 'sheep']; const count = animals.push('cows'); console.log(count); ..
2022-01-25 14:18:06
564
原创 为数组的每一项执行一次方法（笔记）
Array.prototype.forEach()详解arr.forEach(callback(currentValue [, index [, array]])[, thisArg])参数callback 为数组中每个元素执行的函数，该函数接收一至三个参数：currentValue，数组中正在处理的当前元素。index 可选，数组中正在处理的当前元素的索引。array 可 选，，forEach() 方法正在操作的数组。thisArg 可选，可选参数。当执行回调函数 ..
2022-01-20 11:08:03
424
原创 获取一个对象上所有属性名，组成一个数组（笔记）
Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。<script> const vu = { name: "jake", age: 18, sex: "男", }; const vx = Object.keys(vu); console.log(vx); </script>.
2022-01-20 10:53:12
387
原创 学习vue笔记（1）
一、初识1.开发版本体积较大，未被压缩；生产版本，已被压缩的文件2.解决两个提示第一个提示是推荐安装devtools调试工具第二个是“目前使用的是开发者的vue，生产版本不要这样做”解决第一个提示： 安装调试工具到谷歌浏览器的扩展解决第二个提示：config对象包含vue的所有配置Vue.config修改值为false成功3.图标请求的问题按住shift点击刷新，进行强制刷新，可以在network中看到一个请求...
2021-11-04 15:34:09
101
原创 记录我配置Vue的过程
1.安装node ，下载后直接根据提示安装2.打开dos窗口，验证是否安装成功3.修改默认的下载路径，使用淘宝镜像的方式第一种方式npm config set registry https://registry.npm.taobao.org 配置后可以根据npm config get registry或npm config list命令查看npm下载源是否配置成功或者换一种第二种方式更改npm install -g cnpm --registry=...
2021-11-03 22:11:06
129
原创 VScode插件（自用）
一、Material Icon Theme 图标插件它采用了 Google Material Design 风格，文件图标以及文件夹图标覆盖非常的全面。二、 颜色主题插件Themes（代码颜色）中的 Monokai Dimmed三、css peek使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代..
2021-09-03 13:00:13
5336
原创 前端基础CSS3-（3D动画）
一、透视属性；定义虚拟眼睛，perspective: ； 1.透视写到被观察元素的父盒子上面 2.当透视值小于z值的时候，是什么都看不见的， 3. z值就是物体到屏幕的距离， 4. 而透视，就是虚拟眼睛到屏幕的距离 body { perspective: 500px; } 二、3D移动 transform: translateX(100p...
2021-09-02 13:11:34
521
原创 前端基础CSS3-（动画）
一、动画属性animationanimation:name(动画名称-必选) duration（持续时间-必选） timing-function（运动曲线-可选） delay （何时开始可选） iteration-count（播放次数-可选） direction（是否反方向-可） fill-mode; （动画位置起始或者结束;-可选）二、定义动画除了0和100%，还可以用from和to来表示序列动画序列1.可以做多个状态...
2021-09-02 11:30:07
163
原创 前端笔记CSS3-（2D移动、旋转、缩放）
三种效果都可以配合过渡属性使用一、2D移动transform:translateX();括号内可以是数值，也可以是百分比，代表两种不同的意义；如果是数值，则代表相对于父元素偏移的距离；如果是百分比则是，里面元素的偏移距离就是元素自身的高或宽乘以百分比的值；transform:translateY(50%);transform:translateX(50%);也可以合在一起书写：transform:translate(-50%,-50%);二、旋转transfo...
2021-09-01 17:56:28
380
原创 前端笔记css3-（过渡属性transition）
过渡属性transitiontransition:要过渡的属性 花费时间单位秒 运动曲线默认ease 何时开始；后面两个可以省略；谁需要过渡就给谁添加过渡，而不是在hover和动画中,可以写多个属性，写的同时可以用逗号分割，也可直接用all .box1 { width: 200px; height: 100px; background-color: skyblue; /* transition: heig...
2021-09-01 17:32:47
156
原创 前端笔记基础-（去掉图片底部的空白缝隙，添加文字尾部的省略号）
一、去掉底部白色空隙1.使用vertical-align:middle;属性可以去掉底部空隙2.也可以使用转为块级元素也可完成，不推荐二、添加文字尾部的省略号代码及注释如下/* 单行文字省略号 */ .box2 { /*表示文字自动换行*/ /* white-space: normal; */ /*表示文字无法自动换行，强制显示在一行溢出*/ white-space: nowrap; /* ..
2021-09-01 17:10:48
367
原创 自学前端-（鼠标样式、文本域拉大禁用、行内元素垂直对齐、取消表单轮廓）
一、鼠标样式cursor属性值的作用：default白色箭头；pointer白色小手；move移动十字；text文本；not-allowed禁止二、行内元素垂直对齐vertical-align: ;属性可以使行内元素以及行内块元素垂直对齐；属性值有baseline基线对齐；top顶线对齐；middle中线对齐；bottom底线对齐textarea { /* 即可取消拖拽功能 */ resize: none; v...
2021-09-01 16:58:36
132
原创 自学前端-（css三角制作和箭头制作）
一、三角制作原理：定义一个盒子，将盒子的宽高为0，将盒子的表框线条变粗，然后将所有的边框设置为透明，而后设置其中一条边为一种颜色，即可完成border: 10px solid transparent; border-bottom-color: tomato;高级三角：原理：定义一个盒子，将盒子的宽高为0，通过修改四个边框的大小，来调整三角形box1 { width: 0; height: 0; /* 将
2021-09-01 16:48:41
459
原创 自学前端-（字体图标的操作方法）
一，字体图标的下载icomoon字体库点击Add Icons From.....可以看到=更多的图标点击Gener Font 打包选好的字体图标然后弹出的界面点击右下角的Download的选框下载后可以获得一个压缩包，解压后获得一个名为icomoon的文件夹，打开这个文件夹，再打开fonts文件夹，可以看到四个字体文件，四个字体文件是由于兼容不同浏览器的原因。复制fonts的文件夹，粘贴到网页页面文件的根目录下而后复制icomoon文件夹下的st...
2021-09-01 15:43:01
891
原创 自学前端-（定位相关）
1.绝对定位会脱标，不占有原来的位置2.无父级元素的定位情况，将会以document为准3.只要父元素有定位，就会一最近一级的父元素定位为准4.子绝父相，子盒子需要在父盒子内排列多个布局，不能占有位置，而父盒子相对页面进行排版，则需要占有位置，所以父元素使用相对定位会更合适5.定位叠放z-index：；使用这个属性值越大，层次越高，越处于上层6.盒子上下居中算法：使用top值50%，再使用盒子自身高度的-50%，即可达到相对父元素上下居中的效果7.脱标的元素不会触发元素外边距塌陷
2021-09-01 14:47:24
65
原创 自学前端-HTML/css-（隐藏和显示元素，el精灵图）
1.dispay显示隐藏元素，但是不保留位置visibility显示隐藏元素但是保留原来位置overflow溢出显示隐藏，但是只对于溢出的部分处理2.精灵图el.elf-1 { width: 100px; height: 230px; margin: 100px auto; /* 定义一个盒子，借助 background-position: ;来实现， 一般情况下为负值，即x y；x往右是正值，往左是负值，y.
2021-09-01 14:30:55
95
原创 自学前端-盒子相关属性（嵌套块级元素塌陷、设置阴影、清除浮动）
1.面对嵌套块级元素塌陷的问题，例如div1在里面有一个div2，给div2设置一个外边距100px，使父盒子不动。而子盒子往下移动100像素；而实际效果却是，子盒子还是贴在父盒子边缘，大盒子整体往下移动了100px，这就是元素塌陷（子盒子添加margin属性会出现的问题），可以给父元素添加一个透明边框，或者父元素定义内边距，可以使用第三种，给父元素添加overflow：hidden（推荐）2.清除内外边距，使用通配符清除内外边距。*{}3.添加盒子阴影box-shadow,依次代表：水平参数...
2021-09-01 14:17:50
218
原创 自学前端总结5-css背景，css链接
background属性的复合写法；以及超链接文字上下居中和文字首行缩进.div1 { width: 500px; height: 500px; background-color: #000000; /* background-image: url("../HTML/demo04-1.jpg"); */ /* 设置背景图片是否平铺 */ background-repeat: no-repeat; /*控制背景图片在盒子中的显示位置，如果以数字，x在前，y在后；
2021-09-01 14:06:56
73
原创 【记录知识点】节流阀，逻辑中断
JS代码// 定义节流阀开关 let flag=true;arrow_l.addEventListener('click',function(){ if(flag){ //开始执行，把开关定义为false,等到点击事件完全结束，利用回调函数设置为false flag=false; //添加一个判断如果num=最后一张，就利用视觉差异替换到第一张图片，并把索引改为第一张的
2021-08-29 17:34:33
137
原创 【记录问题】自己在写代码中遇到的问题（this）
1、制作轮播图中遇到className属性不生效的问题（实则是this的问题）HTML代码段 <div class="focus "> <ol class="circle"> </ol> </div>css代码段.circle { position: absolute; bottom: 10px; left: 50
2021-08-27 21:42:20
169
原创 自学前端-css盒子相关属性（部分）
/* 这是css第一行固定代码，使用通配符清除内外边距 */* { margin: 0; padding: 0;}/* 行内元素尽量只设置左右内外边距，上下不设。一定要设置就转换为块级元素 */.box2 { height: 40px; background-color: #00ffff; border-top: 3px solid #ff7f00; border-bottom: 2px solid #ffbd4c; /* 外边距：垂直外边距合并，尽量只设置一个marg.
2021-08-24 22:09:36
176
原创 自学前端总结4-权重知识点
<!--选择器的权重，从大到小依次为：！important/行内式/ID选择器/类选择器/元素选择器/继承-*--> <!-- 权重叠加，ul和li一起的权重是0,0,0,2，单独的li的权重是0,0,0,1。重点提高权重可以使用权重叠加 --> <body> <div class="div2"> <div class="div1"> <a href="#">文字1</a> .
2021-08-24 22:06:26
452
原创 自学前端总结3（自用）-css选择器
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
2021-07-22 21:29:58
139
原创 自学前端总结2（自用）
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
2021-07-22 21:28:57
69
原创 自学前端（自用）-表单基础
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
2021-07-22 21:27:14
61
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人