- 博客(45)
- 收藏
- 关注
RSS订阅原创 class类中private，public，static，protected
都是受保护的属性和方法，可以在当前类及其子类中访问，但是无法在其他地方访问。这种访问控制用于实现类的继承关系，允许子类访问父类的受保护状态，但是不允许外部代码访问或修改。属性或方法只能在类的内部访问，其他地方都无法访问，包括子类也不能直接访问。属性或方法是类的静态成员，它们与类本身而不是实例相关联，可以在类的内部和外部直接使用，不需要实例化对象。是默认的访问修饰符，表示公有的属性或方法可以在类的内部和外部使用。同时，受保护的属性和方法也可以被子类覆盖，实现多态的效果。子类也可以继承访问，但是无法重写。
2023-04-22 22:24:12
1454
原创 webpack打包ES6+语法及?.等可选链式操作符的问题
问题背景：在开发时往往会追求最新语法，但是在使用webpack打包时，可能存在无法检测到这种语法并转换为es5语法这类问题，从而导致部署之后项目报错等问题。这些依赖项将启用 babel 转换器，并配置 babel 转换器以将可选链式操作符转换为 ES5 代码。1.首先需要保证babel-loader依赖项已更新到最新版本，以便在编译过程中将其转换为 ES5 代码。预设，该预设将将您的 ES6+ 代码转换为 ES5 代码，并启用。插件以将可选链式操作符转换为 ES5 代码。
2023-04-15 23:07:43
2611
2
原创 vue3组件刷新问题(父组件参数变化导致子组件setup中方法重新执行)
方法也会重新执行，这使得子组件能够根据父组件传递的新参数重新计算状态，从而实现数据的动态更新。等，监听数据的变化，并根据数据变化来更新组件的状态。当父组件中的参数变化时，子组件的。方法中，可以使用 Vue 提供的响应式 API，如。发生变化，也会触发子组件的重新渲染和。需要注意的是，如果子组件的。
2023-04-04 11:46:59
2614
原创 webpack5下打包配置，包含css,less,sass,图片,js,其他文件
webpack.config.jsconst { resolve } = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-pl.
2022-02-20 11:49:41
1080
原创 借助sass-resources-loader实现less，scss变量全局注册
sass与less是两个css预编译器，借助scss-loader和less-loader将.scss文件和.less文件编译为浏览器认识的css;两者的使用类似，scss声明变量使用$,less声明变量使用@，两者的编译环境不一样，scss是在服务端编译，也就是不用浏览器花时间去编译，less就是前端（浏览器），但个人感觉这并没有为scss带来多大优势；网上也常用人说都什么年代了，还用less，个人就觉得less与scss都差不多，用什么只看个人习惯了，不必跟风！下面就来说一下注册全局变量之后怎么才能在.
2022-02-11 12:31:34
762
原创 npm i, npm install, npm i -S, npm i -D的异同
这四个命令都是npm包管理器中对依赖进行下载的命令npm i 在这之前很多朋友都说它是npm install的缩写，但是查阅相关资料之后发现这两者压根就是不同的两个命令，通过npm i下载的包不能通过npm uninstall卸载，必须使用npm unistall i 才能够卸载；npm i会帮助检测与当前node最匹配的npm 版本号，并匹配出相应npm包应该升级的版本号；npm i 安装的一些包，在当前node版本下是无法使用的，必须使用建议版本才行；npm i 安装报错不会生成np.
2022-02-11 11:01:49
6885
原创 forEach for 循环跳出问题
之所以写这篇文章是在实际使用中有一些困惑；那么在for循环中使用什么来跳出循环呢，在forEach中又是使用什么来结束循环呢？先看下代码function test(arr){ for (let i = 0; i < arr.length; i++) { console.log('1',arr[i]) if (i === 2){ break } } arr.forEach((item,index)
2022-01-20 17:32:34
1230
原创 图片底部出现空白区域问题解决
当使用div包裹图片时你会发现图片底部和盒子底部有一定的间距，这段间距就是空白区域，原因是行内块元素会和文字的基线对齐；解决这个问题有两个方法：方法一：给图片添加 vertical-align: middle | top | bottom 等。这也是市面上常用的解决方法vertical-align: bottom方法二：将图片转换为块级元素，这样自然就不会存在这种问题了，但是这样会影响布局；display: block...
2022-01-20 11:15:54
683
原创 vue项目中定义全局变量并使用(无需在使用处二次引入)
先上代码//需要引入：const webpack = require('webpack')const path = require('path')chainWebpack: config => { const oneOfsMap = config.module.rule('less').oneOfs.store oneOfsMap.forEach(item => { item .use('sass-resources-loader')
2021-11-13 17:05:12
1113
原创 vue-cli3+electron构建项目打包踩坑记
构建项目的过程就不说了,网上一大堆,一搜一大把,主要是讲一下在当前环境下使用electron-builder打包的问题；package.json配置如下：如图,electron/electron-builder/webpack等都是最新盘本,electron打包是有一个默认安装路径的,并且在不加任何配置的情况下,是直接安装在默认路径下的;目前项目需求打包之后让用户能够自己选择安装路径的;解决过程如下：1.查看electron官方说明：如下大概的意思是我们需要配置nsis这一关键项,a
2021-09-01 16:06:07
624
转载 js下载文件的几种方式
一、此方法火狐有些版本是不支持的window.location.href = 'https://*****.oss-cn-**.aliyuncs.com/*********';二、为了解决火狐有些版本不支持,可以改成这种方式window.location='https://*****.oss-cn-**.aliyuncs.com/*********';三、该方法IE和火狐都可以,url表示要下载的文件路径:function(url){ try { var elemIF.
2021-08-30 21:34:31
2998
原创 node学习之http模块及url模块
node不是一门语言,是基于js的一个服务开发平台,支持高并发,采用非阻塞I/O的模型,以及一个事件驱动；现在正式开启node学习之路.http模块:这是node创建web服务的基础模块,具体搭建过程如下,直接上代码:const http = require('http');http.createServer((req,res) => { // 获取地址传参 console.log(req.url) // 设置响应头 res.writeHead(2
2021-06-27 19:27:17
144
原创 vue-cli3配置多环境打包踩坑记
相较于vue-cli2来说,vue-cli3更便于开发人员使用,也减少了很多繁琐的配置,相信使用过webpack的朋友都深有体会!
2021-06-27 03:41:15
614
原创 vue项目中数据更新页面不刷新问题
这种情况可以分为很多种.但是究其原因就是vue3.0以下版本无法监听对象（包括数组以及对象）的变化，当数据发生变化的时候vue的刷新机制是监听不到数据变化的，所以需要我们在实际应用过程中通过各种处理来达到页面刷新的目的。1.这是一种简单粗暴的解决方案吧,那就是在数据更新完成之后对页面进行重排和重绘操纵,但是这种方式对页面的消耗会急剧上升,不到万不得已还是不要使用的好，具体实现方法如下:在data中定义一个阈值,比如show，初始为true;代码实现：this.show = false;s
2021-06-24 17:46:03
24292
2
原创 HTM5简介
目录1.HTML5简介2.HTML5标签语义化的含义3.HTML5头部声明4.HTML5改进5.多媒体标签6.HTML5应用7.图形8.可以联合CSS使用9.表单10.删除旧版本的元素11.HTML5浏览器兼容性12.HTML5兼容性解决方案1.HTML5简介HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。即便如此，它..
2021-01-07 11:46:04
531
原创 HTML5兼容性最优解决方案
1.HTML5兼容性解决方案对于IE9及以下版本,可以使用html5shiv包进行兼容<!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->包资源载入之后,还需要初始化css样式article,aside,dialog,footer,header,s...
2021-01-07 11:45:14
135
原创 node连接并操作数据库
1.首先安装引入mysql模块npm install mysql -sconst mysql = require('mysql')2.创建连接const connetion = mysql.creatConnection({ host: '主机(locallhost或其他)'， user: '数据库登陆用户名(一般为root)', password})...
2021-01-05 17:25:54
184
原创 node创建http服务并监听端口
1.引入node内置http模块const http = require("http")2. 创建服务const server = http.creatServer( (req, res) => { 其中req就是查询参数(前端传过来的查询数据),res是后台的相应数据})3.监听端口server.listen(8080)到这一步，http请求服务基本已经创建成功了,但是后台接受的数据是怎么处理的呢?...
2021-01-04 16:48:58
3551
原创 Flex布局
1.Flex布局基础概念Flex布局是什么?Flex布局是一种新的布局方案,它可以完整,简便,响应式的实现各种页面布局,虽然它相对于传统的盒模型来说更方便,对于一些特殊的样式(垂直水平居中,两遍固定中间自适应布局等)实现起来也比较方便,但是有一个很大的问题就是兼容性,对于IE浏览器来说仅能支持IE10以上的版本,现在移动端也已经支持Flex布局.Flex布局主要分为两个方面,一个是容器属性,一个就是项目属性<ul class="box"> <l...
2020-12-29 10:28:06
3242
原创 webpack打包配置流程记录
1.首先进入项目文件中运行下面的命令npm init -y2.运行下面命令进行全局安装npm i webpack webpack-cli -D这里有个注意点当带上 webpack-cli的时候可能会报错,可直接运行npm i webpack -D命令3.新建webpack.config.js配置文件(根目录下) ,加上下面的配置module.exports = { mode:“development” //这是定义打包格式}4.在package.j...
2020-09-17 01:11:26
305
原创 移动端开发之rem布局
1.rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小,比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。案例```/* 根html 为 12px */html {font-size: 12...
2020-05-05 23:56:14
134
原创 移动web开发——Flex布局详解极其便利之处
1.0传统布局和flex布局对比1.1传统布局 +兼容性好 +布局繁琐 +局限性，不能再移动端很好的布局 1.2 flex布局+操作方便，布局极其简单，移动端使用比较广泛 +pc端浏览器支持情况比较差 +IE11或更低版本不支持flex或仅支持部分1.3 建议+如果是pc端页面布局，还是采用传统方式 +如果是移动端或者是不考虑兼...
2020-05-04 12:48:38
291
原创 什么是移动web开发流式布局,具体实现方法是怎样的
1.0 移动端基础1.1浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，...
2020-05-04 11:41:26
205
原创 3D转换详解
1.3D转换简述及坐标轴解析`3D`的特点近大远小 物体和面遮挡不可见三维坐标系x 轴：水平向右--**注意：x 轴右边是正值，左边是负值** y 轴：垂直向下--**注意：y 轴下面是正值，上面是负值** z 轴：垂直屏幕--**注意：往外边的是正值，往里面的是负值**2.3D转换`3D`转换知识要点`3D`位移：`translate3d(x...
2020-05-03 11:06:17
717
原创 `2D` 转换及动画详解
1.`2D`转换`2D`转换是改变标签在二维平面上的位置和形状,主要分为:移动：`translate` 旋转：`rotate` 缩放：`scale`2.`translate`语法x 就是 x 轴上水平移动,y 就是 y 轴上水平移动语法格式:transform: translate(x, y)transform: translateX(...
2020-05-02 16:28:42
365
原创 h5+css3相关新增属性及标签
1.语义化标签`header`---头部标签 `nav`---导航标签 `article`---内容标签 `section`---块级标签 `aside`---侧边栏标签 `footer`---尾部标签语义化标签使用注意事项语义化标签主要针对搜索引擎 新标签可以使用一次或者多次 在`IE9`浏览...
2020-04-24 00:35:15
187
原创 CSS高级开发技巧
1.显示与隐藏目的:让一个元素在页面中小时或者显示出来 场景:类似广告,说明之类的,当我们点击取消之后会消失,但是重新刷新页面它又会重新显示出来 实现方法:实现元素的显示和隐藏的方法有三种display属性 visibility属性 overflow属性display属性介绍该属性有两个值,一个是none(不显示元素)，一个是block(显示元素),在实际开发过程中应用最多...
2020-04-07 00:09:50
100
原创 CSS布局机制
网页布局的核心:就是用CSS来摆放盒子CSS提供了三种机制来摆放和定位盒子，分别为普通流(标准流)，浮动和定位1.标准流（普通流）块级元素会独占一行,从上向下排列 常用块级元素:div, hr, p, h1-h6, ul, ol, dl, form, table行内元素会按顺序从左到右排列,直至碰到父级元素的边缘才换行常用的行内元素:span, a, ...
2020-04-04 23:42:14
344
原创 CSS第七篇(盒子模型)
1.盒子组成部分padding：外边框,盒子与盒子间的距离 border:盒子外边框,可设置大小,颜色等属性 margin:盒子内容与盒子内边框的距离 content:盒子内容,即盒子中所放的内容2.边框(border)简写语法border:border-width border-color border-style; 这三个属性值没有顺序...
2020-04-04 16:35:56
324
原创 CSS三大特性解析
1.层叠性概念:多种CSS样式的叠加 如果将同一属性通过两个相同的选择器设置到同一元素上,后面设置的就会将前面设置的属性层叠掉 解决冲突的原则:遵循就近原则,哪个离着结构近就选哪个 样式不冲突的不会层叠2.继承性概念:子元素会继承父元素的某些样式 作用:恰当应用继承性可以简化css代码,降低复杂性注意:可以继承的样式包括:text-开头的，font-开头的，line-开头的...
2020-04-01 22:55:49
140
原创 CSS第六篇(背景)
1.背景颜色语法background-color:颜色值; 颜色值默认是transparent 透明的2.背景图片语法background-image:none / url(图片地址)注意事项:背景图片默认是平铺的,后面必须要加url,但是括号中的地址尽量不要用引号3.背景平铺(repeat 默认值)语法bac...
2020-03-31 22:22:20
101
原创 CSS第五篇(显示模式)
1.块级元素常用块级元素:<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>,表单标签,表格标签,地址标签等,其中以div最为典型块级元素的特点: 独占一行 高度,宽度,外边距,内边距都可以控制 默认宽度是容器(父级元素宽度)的100% 是一个容器或...
2020-03-30 21:03:09
86
原创 CSS第四篇(复合选择器)
1.后代选择器概念:后代选择器又称为包含选择器 作用:用于选择元素或元素的子孙后代,一个标签之后的所有标签都会选择 写法:把外层标签写在前面,内层标签写在后面,中间用空格隔开父级 子级{属性:属性值; 属性:属性值}语法 <!-- css部分 --> <style> /* 后代选择器 */ .disorderly li{ ...
2020-03-29 10:53:30
130
原创 CSS第三篇(font)
font属性介绍:font-size :字号大小,常用单位是px font-family:字体,分微软雅黑,黑体,宋体,也会使用unicode码代替字体 font-weight:字体粗细,加粗是700,不加粗是normoal,或者400 font-style：字体样式,倾斜是italic,不倾斜是normalfont综合性写法选择器{font:font-style font-we...
2020-03-28 11:13:25
129
原创 CSS第二篇(选择器篇)
标签选择器作用:可以选出所有相同的标签 缺点:不能进行差异化选择 语法:p{ color: brown; }类选择器可以选出一个或多个标签，可精简css代码 可以根据需求选择 语法:<!-- css部分 --> <style> /* p{ color: brown; } */...
2020-03-23 21:54:31
107
原创 CSS第一篇(引入CSS样式的方法,及CSS的作用介绍)
CSS的作用(目的) 之前学习的HTML仅限于页面结构呈现,虽然它可以进行页面布局和样式设置,但是较为麻烦,而CSS就是应用于页面布局和样式调整,所以又叫层叠样式表. 引入CSS样式的几种方法 第一种:内联样式(将样式通过一个style属性添加至HTML标签中) 语法如下 <body> <h1 style="color: red; ...
2020-03-22 20:46:20
215
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人