- 博客(76)
- 收藏
- 关注
RSS订阅
1原创 Vue3组合式API
为什么需要用一个导入一个： 是为了让我们的项目尽可能的轻量化，在tree-shaking 摇树，打包的时候，尽可能的去掉没有使用的代码。(1) 优点:易于学习和使用, 每个代码有着明确的位置 (例如: 数据放 data 中, 方法放 methods中)reactive 处理的数据, 必须是复杂类型, 如果是简单类型无法处理成响应式, 所以有 ref 函数!(2) 即使项目大了, 功能多了, 也能快速定位功能相关的 api。(2) 缺点: 相似的逻辑, 不容易复用, 在大项目中尤为明显。
2023-01-30 19:50:31
726
原创 移动web媒体查询
它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。栅格系统(gridsystems),也叫“网格系统，它就是通过一系列的行（row）与列（column）的组合创建页面布局。一个盒子里面可以再嵌套其他的盒子，但是站在这个盒子的角度来看，他又分为了12份。，简单理解，需要用到啥，我们复制那个文件，没有必要都放入，提高性能。如果实现不同屏幕下，不同的显示个数，可以通过使用不同类名。还是这4个盒子，如果在中等屏幕下放3个怎么做。
2023-01-29 15:39:11
539
原创 移动web适配和Less
媒体查询写起来超级麻烦，而且检测不够精确，因此我们使用 flexible.js 这个 js文件，通过js 实时检测屏幕窗口的变化实现检测视口宽度。是 ， 而是 px 单位 ，但是我们开发的时候，要使用 rem 才能适配。通过媒体查询，检测不同的视口宽度，设定不同的html文字大小，元素设置rem单位后，可以达到元素适配效果。使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 ，就完成了适配。后面我们学习vue开发的时候，所有的单位我们写 px。我们在写伪类和伪元素的时候，经常使用 & 来代替父元素。
2023-01-27 19:57:11
309
原创 移动web主轴设置和flex总结
设置主轴方向弹性盒子换行设置侧轴对齐方式flex 总结梳理主轴排列方式侧轴对齐方式-单行对齐侧轴对齐方式-多行弹性盒子换行设置主轴方向伸缩比flex 它是一种布局方式。主要目的是通过父盒子控制子盒子如何排列。
2023-01-26 21:21:55
764
原创 移动端特点和flex布局
比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1；其实实际开发中还有三倍图甚至四倍图等，多倍图，但是现在市场还是二倍图偏多，我们称为二倍图。一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索。简单理解，二倍图存在就是为了让页面中图片更加清晰，遵循即可。所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。flex布局极大的提高了我们布局的效率，更简单、灵活。有了视口标签，可以达到我们想要的理想视口。把父盒子分为若干份数，每个子盒子各占几份。
2023-01-26 15:15:15
841
原创 移动web 空间转换 3D
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向。透视的作用： 空间转换时，为元素添加近大远小、近实远虚的视觉效果。一定要搞清楚X轴和Y轴如何旋转的，旋转的度数是正值还是负值。透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。/* 1.1 添加定位 让2个盒子叠加在一起 */有了透视的加持，我们3d旋转效果会比较明显。注意：默认的旋转中心在盒子的中心位置。/* x y z之间用逗号隔开 *//* 3d位移的写法 *//* 3d呈现 */
2023-01-24 23:04:33
1832
原创 移动web变形,旋转,缩放,渐变
* 如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。/* 正确写法语法 各个属性值之间 使用空格隔开 */移动的时候可以写百分比，如果使用的百分比，移动的是盒子。如果需要移动，也需要旋转，则一定先写移动，后写旋转,/* 旋转会改变网页元素的坐标轴方向 *//* 1.1 设置大盒子基本样式 *//* 1.3 设置多重转换效果 *//* 1.2 设置过渡效果 *//* 以中心点往四周缩放 */如果是正度数，则是顺时针旋转。旋转可以让盒子旋转角度。/* 旋转中心点 */
2023-01-24 14:27:31
829
原创 移动web字体图标
字体图标是前端工程师必须具备的知识点。开发中， 字体图标上传，选择，都是网页美工给我们准备好了。注意： 使用伪元素字体图标，一定要声明字体。因为阿里字体库比较稳定，很多情况下，我们无需下载相关文件到本地，直接引入在线地址即可。复制相关文件到网站根目录下，并引入css文件到html页面中。开发中最常用的是使用类名来调用，所以重点记住这个就可以了。如果是一个标签来使用字体文件，可以采取2个类名的形式。css 要指定当前标签的文字是字体图标，必须要声明。这样结构比较的清晰，省了很多的小盒子。
2023-01-20 15:26:32
1934
原创 小程序uni-app的api
uni-api 指的是uni-app 针对一些 微信小程序api所做的封装它解决了两个问题原生的小程序api不支持promise形式的调用（需要自己封装）原生的微信小程序api不支持跨平台创建组件引入组件注册组件使用组件easycom是uni-app提供的一种更加简单使用组件的规范uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
2023-01-19 13:53:52
4129
原创 小程序uni-app介绍
uni-app简介uni-app 是一个使用**Vue.js **开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台使用 Vue.js 语法开发支持编译成多端。
2023-01-18 20:02:22
1006
原创 小程序API
小程序开发中，会使用到很多内置的功能，这些功能都被封装到小程序的api中了。比如弹出提示框发送网络请求等上传文件、下载文件、拍摄照片。
2023-01-17 18:32:13
443
原创 小程序自定义组件
自定义组件-基本使用使用步骤自定义组件-父传子父传子步骤自定义组件-子传父子传父步骤自定义组件可理解为允许我们创造自己想要的某些效果的标签。 如image是小程序指定的图片标签， border-image 可以是我们自己创造的标签自定义组件还具有简化页面结构、封装复用代码的功能。组件化开发是目前前端开发项目的主流方式。父传子方式自定义属性子传父方式自定义事件。
2023-01-17 13:19:49
79
原创 小程序样式和组件基础
小程序样式分为全局样式和页面样式app.wxss页面.wxss小程序样式是自动导入的可通过@import 'xxx.wxss’导入外部样式。不支持通配符 *新增一个单位:rpxrpx组件是视图层的基本组成单元。一个组件通常包括开始标签和结束标签属性用来修饰这个组件，内容在两个标签之内。公共属性属性名类型描述注解idString组件的唯一标示保持整个页面唯一classString组件的样式类在对应的 WXSS 中定义的样式类style。
2023-01-16 20:38:48
945
原创 小程序事件基础
事件是视图层到逻辑层的通讯方式。负责将用户对于的页面的操作通知给js。用户在页面中所有的行为，如点击按钮，滑动页面，都需要靠事件传递给js进行处理格式：小程序中绑定事件，通过bind和capture关键字来实现。如 bindtap 和 capture-bind:tap，bind 是事件冒泡capture 是事件捕获。只能用冒号形式。如果想阻止事件冒泡或捕获可通过catch来绑定事件。如catchtap，capture-catch:tap。
2023-01-16 17:20:13
577
原创 小程序目录结构和全局配置
小程序配置文件是一种json格式的文件。作用：可以起到快速新建页面、设定小程序首页、设置导航栏和底部tabBar等作用。分类：全局 app.json页面 page.json页面配置的文件是page.json，是对单个页面的配置，样式相关的配置项不用额外写window。不用写window字段优先级比全局配置高。
2023-01-15 20:02:35
579
原创 小程序介绍和注册安装
微信小程序介绍小程序特点其它平台小程序注册微信小程序开发帐号获取appidappid简介微信开发者工具安装创建一个小程序项目核心步骤微信开发者工具构成简短定义：微信小程序是运行在微信APP中的一个程序。常见小程序行程码拼多多美团外卖携程旅游唯品会其他appid的作用：相当于小程序的身份证ID。是小程序开发时候的必备信息，也是我们在创建小程序项目时候的必填信息。特点： wx******。获取方式：小程序管理后台-开发-开发管理-开发设置。
2023-01-15 18:51:05
371
原创 CSS定位
1 解决盒子之间的层叠(叠加)问题,可以层叠到其它盒子上面2 页面滚动,盒子固定在页面某个位置不动.定的使用步骤:1 设置定位的方式2 设置偏移值。
2023-01-13 22:16:46
227
原创 CSS浮动
1 浮动的盒子搭配标准流的父元素一起使用.(标准流:垂直布局;浮动找浮动(同方向浮动) ，下一个浮动元素会在上一个浮动元素后面左右浮动。2 浮动的时候,当父元素装不下浮动的子元素,此时子元素会换行显示.1 浮动元素会脱离标准流(简称脱标),不占位置,被后面的标准流占有.5 浮动的元素有特殊效果(浮动元素具有行内块元素特性并且顶部对齐.)3 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.2 浮动的元素比标准流高半个级别,可以覆盖标准流的元素.
2023-01-13 14:18:16
411
原创 CSS选择器进阶
根据标签不同的特点，我们可以把标签分成不同的种类。主要分为： 块级元素、行内元素、行内块元素。后代选择器 子代选择器 并集选择器 交集选择器 伪类选择器。
2023-01-11 20:31:14
48
原创 HTML列表标签,表格标签
应用场景:网页的底部导航(网页尾部)< dl > < dt > 列表主题 < dd > 列表主题的每一项内容 < dd > 列表主题的每一项内容 .... dd前面会有默认的缩进效果 后续css处理dl标签里面只允许包含dt/dd标签dt/dd标签里面可以嵌套任意内容(标签)dt/dd是兄弟关系(千万不要写错了哟)
2023-01-10 20:08:35
116
原创 Ajax工作原理
3.2 请求头 ： 浏览器告诉服务器，我给的数据是什么格式 （content-type在请求头中） 第三次: 浏览器 -> 服务器 (嗯,我听到了. 检测浏览器: 接收)4.2 响应头 ： 浏览器告诉服务器，我给你的数据是什么格式 （浏览器会自动识别）3.1 请求行 ： 包含请求方法, URL, 协议版本。3.3 请求体 ： post请求参数在请求体中。//(4).发送请求 ： 参数格式 'key=value'//(3).设置请求头（post请求才需要设置）
2023-01-09 19:11:09
313
原创 axios拦截器使用和知识点补充
/onreadystatechange会触发多次，一般需要判断xhr.readState == 4 才获取响应数据。//c. onreadystatechange触发时机 ： xhr.readState状态变化。1. onload事件 ： 接收服务器响应的数（一次请求，只会执行一次）//(4).发送请求 ： 参数格式 'key=value'//(3).设置请求头（post请求才需要设置）// 把服务器响应的数据返回给axios的then方法。// 对请求错误做些什么 , 下面这句话，固定语法;
2023-01-09 15:35:44
351
原创 axios框架使用
then(()=>{}):完成回调， 表示请求完成，无论成功失败都会执行。//get方法第二个参数是对象类型 { params:{get参数对象} }catch(err=>{}):失败回调， 一般可以省略不写。axios 官网 : http://www.axios-js.com///post方法第二个参数是对象类型 { post参数对象 }url:'请求路径',//请求失败 : (1)网址写错了 (2)网络出问题了。//post方法第一个参数是url。//get方法第一个参数是url。
2023-01-08 15:59:14
760
原创 Ajax接口和get与post请求
1.接口：Web服务器提供的，让ajax请求的网络地址称之为接口，简称API2.接口文档 ：为了方便开发人员使用，我们的后台小伙伴会提供一种专门的文档，称之为接口文档接口文档，又称为API文档，可以理解为接口的使用说明书接口文档的本质 ：其实就是后台开发（如php）他们写的函数注释。后台在处理请求的时候一般都会写一些函数3.一个标准的接口文档至少要包含以下三种信息（只能多，不能少a.请求的地址 （url）b.请求的方法 （get或者post）c.请求的参数。
2023-01-07 19:48:13
515
原创 Ajax初识和工作流程
1.服务器就是提供某种服务的电脑(机器)2.如何让电脑提供某种服务呢？安装软件想让你的电脑提供听歌服务，需要装什么软件呢？网易云、qq音乐想让你的电脑提供视频服务，需要装什么软件呢？爱奇艺，优酷想让你的电脑提供聊天服务，需要装什么软件呢？qq，微信3.综上所述，服务器就是某些安装了特殊软件，可以提供某些服务的电脑。常见的服务器有以下几种数据库服务文件服务多媒体服务(音视频)邮件服务Web服务。
2023-01-07 14:31:51
622
原创 git远程仓库使用流程
1.什么是远程仓库？远程仓库其实就是远程的服务器，帮我们存储代码的本地git存储：一旦你电脑丢了或者硬盘损坏，直接扑街远程git存储：如果你电脑坏了换了一个新的，只需要从网上重新下载即可2.常见的远程仓库有哪些？（1）github：免费学习时候可以用，工作中有的小公司为了省钱也会用（2）gitlab（3）码云（4）你们公司自己机房的服务器（工作中遇到）以上远程仓库使用流程几乎一致3.什么是GitHub?1.是一个免费的远程代码托管仓库。
2023-01-06 21:24:50
1192
原创 git介绍及环境搭建
Git介绍Git安装流程配置用户信息git工作流程与常用命令问题点总结主要工作流程git工作流程与原理总结1.Git是什么？Git版本控制系统是一个分布式的系统,是用来保存工程源代码历史状态(游戏存档)的命令行工具GIT是一个命令行工具,用于版本控制2.Git作用是什么？版本管理工具：大白话就是可以记录你敲代码的每一个环节(类似于玩游戏存档)3.Git应用场景介绍1.多人开发代码管理 ： 目前我们多人代码的时候，想把代码合并一起是利用最原始的复制粘贴操作。有了git之后，可以一键搞定。
2023-01-06 13:23:49
913
原创 webpack-开发服务器和总结
什么是webpack静态模块资源打包工具, 打包我们编写的代码, 翻译, 整合, 分析, 压缩等功能yarn的作用?替代npm在nodejs环境的包管理器, 速度要比npm好// 拿到新项目, 缺少node_modules, 执行命令下包, 根据package.json记录的哪些包下载 yarn // 安装某个包 yarn add 包名webpack构建的流程是什么执行打包命令, 寻找配置文件, 找到入口, 建立依赖关系图, 用插件加载器翻译处理编写的文件, 打包输出到指定位置。
2023-01-05 20:48:05
294
原创 webpack中的加载器
错误解释: 你可能需要一个loader来支持这种类型文件, 解析css代码。webpack配合babel-loader 对js语法做处理。babel编译器=> 用于处理高版本 js语法 的兼容性。3.在main.js引入index.css。一定要引入到入口才会被webpack打包。原因: webpack默认只识别js文件。webpack.config.js 配置。webpack.config.js配置。执行打包命令, 观察打包后dist下。重新打包后观察dist下。4.执行打包命令观察效果。
2023-01-04 18:45:40
512
原创 webpack概念
什么是服务器, 本地如何搭建服务器, 服务器和浏览器关系, 什么是请求和响应。源码一定要和入口产生直接/间接引入关系, 才会被一起打包。src并列处, 生成dist目录和main.js文件。查看main.js文件, 是打包压缩后的代码。比如: request.js 就是间接引入。现代 javascript 应用程序的。默认入口: src/index.js。默认出口: dist/main.js。代码源文件和webpack之间关系图。除了合并代码, 还可以。
2023-01-04 14:13:04
142
原创 npm和包
npm和包npm-介绍npm是什么npm作用包是什么npm-包管理配置文件（初始化环境）包管理配置的概念package.json 配置文件的作用多人协作的问题如何记录项目中安装了哪些包快速创建 `package.json`npm-下载axios包npm-删除包npm-镜像地址npm-全局包-nodemonnpm-全局模块-nrmnpm-介绍npm是什么npm（node package manager）node 包 管理器。管理node包的工具。npm作用可以, 下载, 删除, 发布 包的一
2023-01-03 23:29:11
100
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人