- 博客(36)
- 问答 (1)
- 收藏
- 关注
原创 Webpack学习
一、webpack是什么核心概念webpack是一种前端资源构建工具,一个静态模块打包器。在webpack看来,前端所有资源文件(js/json/css/img/less)等都会作为模块处理他根据模块依赖关系进行静态分析,打包生成对应静态资源webpack 五个核心概念Entry入口指示,webpack以哪个文件为入口起点进行开始打包,分析构建依赖关系图Output输出指示,webpack打包后资源输出到哪里去,以及怎么命名Loader在module文件下,让webpack
2022-02-27 20:47:41
590
原创 为什么绝对定位会重叠在一起
今天工作遇见一个bug,卡了很久,特此总结一下业务需求,需要在图片上,添加div模式按钮点击,切换图片和页面,我思路使用定位子绝父相实现然后:只可以看到一个盒子,其实有4个盒子,重叠起来了再看代码: <div class="tab-show" v-for="(item,index) in tabsCutList" :key="index"> <div class="btn" @click="tabShow=index">{{index}}</div
2022-02-18 01:39:32
1742
原创 双向数据绑定响应式原理乞丐版
vue1.0数据双向绑定乞丐版Object.definePropertyObject.defineProperty是js独有api,vue主要依赖他实现的mvvm模式;mvvm模式:m代表模型,v视图,vm就是视图模型;Object.defineProperty(obj, prop,object )obj是需要定义得当前得对象prop是当前需要定义属性名object是属性描述符一般对象赋值也可以删除修改,但是Object.defineProperty可以更加精准得控制对象object
2022-02-16 23:14:40
305
原创 前端面试题
基础面试题DOM和BOMBOM是浏览器对象模型,用来获取或设置浏览器的属性、行为,例如:新建窗口、获取屏幕分辨率、浏览器版本号等。DOM是文档对象模型,操作文档HTML的JS处理方式虚拟dom遍历真实dom找到指定dom,消耗资源,所以vue建立一个与dom树对应的虚拟dom对象,以对象嵌套方式表示dom树,dom更改,就变成对js对象属性增删改查.这样查找对象属性,要比查找dom树开销小。dom操作会引起浏览器回流重绘使得性能开销巨大。当尺寸、布局、隐藏、等等,改变了,引起重新构建,称为
2022-02-15 22:29:22
397
原创 jQuery快速入门
一、 jQuery 对象和 DOM 对象转换// 1.DOM对象转换成jQuery对象,方法只有一种var box = document.getElementById('box'); // 获取DOM对象var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象// 2.jQuery 对象转换为 DOM 对象有两种方法:// 2.1 jQuery对象[索引值]var domObject1 = $('div')[0]// 2.2 jQuer
2022-02-13 13:02:40
278
原创 正则表达式其实很简单
基础知识创建正则字面量创建使用//包裹的字面量创建方式是推荐的作法,但它不能在其中使用变量let hd = "houdunren.com";console.log(/u/.test(hd));//true使用 eval 转换为js语法来实现将变量解析到正则中let hd = "houdunren.com";let a = "u";console.log(eval(`/${a}/`).test(hd)); //true对象创建当正则需要动态创建时使用对象方式le
2022-02-12 23:43:56
910
原创 小程序笔记
‘一、跟普通开发不同点运行环境不同:网页浏览器,小程序微信环境API:运行环境不同,所以无法调用DOM和BOM得API,但是小程序可以调用微信环境API,如地理位置,扫码,支付开发模式不同:网页:浏览器和代码编辑器小程序:申请小程序账号,安装小程序开发者工具,创建配置小程序项目后台:https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=1444414227二、小程序代码构成目录结构小程序页面在pa
2022-02-07 17:39:07
482
原创 js对象学习
对象添加删除检测let Object ={}//添加Object.name=8Object['age']=3//删除delete Object.name//检测本身console.log(Object.hasOwnProperty('name')); //布尔值//数组对象检测本身加原型console.log('constructor' in Object); //布尔值计算属性给对象定义键名const lessons = [ { title:'任1务',
2022-01-30 18:23:14
943
原创 栅格系统布局
声明容器选项说明display: grid;块级容器display: inline-grid;行级容器划分行列栅格有点类似表格,也 行 和 列。使用 grid-template-columns 规则可划分列数,使用 grid-template-rows 划分行数。重复设置使用 repeat 统一设置值,第一个参数为重复数量,第二个参数是重复值[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i8Nxk6BA-1643395097830
2022-01-29 02:38:55
652
原创 CSS3定位布局
定位类型利用position设置定位类型选项说明static默认形为,参考文档流relative相对定位,参照之前自己位置,当元素发生位置偏移时,原位置留白。absolute绝对定位,参照第一个有定位属性父元素,否词参照页面,不占用原先位置fixed固定定位,把元素固定到页面一个位置,不受滚动条影响sticky粘性定位,当滚动条元素到达一个位置会固定住,后面定位权重高位置偏移选项说明top距离顶边bottom
2022-01-29 02:37:44
1133
原创 CSS3浮动
浮动可以使用float进行定义选项说明left向左浮动right向右浮动none不浮动清除浮动CSS提供了 clear 规则用于清除元素浮动影响。选项说明left左边远离浮动元素right右连远离浮动元素both左右都远离浮动元素使用 ::after 伪类为父元素添加后标签,实现清除浮动影响。.clearfix::after { content: ""; display: block
2022-01-28 02:22:05
165
原创 CSS3文本
字母转换小号大写字母span { /* 小号大写 */ font-variant: small-caps; /* 首字母大写 */ text-transform: capitalize; /* 全部大号大写 */ text-transform: uppercase; /* 全部小写 */ text-transform: lowercase; }...<span>houdunren.com</span>文字阴影
2022-01-28 02:21:35
270
原创 CSS3权重
元素权重相同权重的规则应用最后出现的可以使用 !important 强制提升某个规则的权限权重计算规则粒度ID0100class,类属性值0010标签,伪元素0001*0000行内样式1000
2022-01-28 02:20:29
279
原创 CSS 3选择器
结构选择器h1>h2 //h1的儿子h2h1+h2 //h1的兄弟h2,离他最近下面第一个兄弟 ,平级h1~h2 //h1的兄弟h2,下面所有兄弟,平级属性选择器h1[title]{ h1[title="hodunren"]{ color: yellow; === color: yellow; }
2022-01-28 02:19:58
188
原创 ES6语义化标签
常用语义化标签标签说明标签说明header头部footer尾部nav导航article内容区域section相似组合块aside挂件,小部件,跟主内容无关附加的main主标签,出现一次time时间标签small声明标签,如限购一个sup上标2²sub下标H₄delins现价progress 进度条标签strong强调语义...
2022-01-28 02:19:27
1266
原创 弹性布局学习
一、弹性盒子容器盒子里面包含着容器元素,使用 display:flex 或 display:inline-flex 声明为弹性盒子。元素排列方向值描述flex-direction:row;从左到右水平排列元素(默认值)flex-direction:row-reverse;从右向左排列元素flex-direction:column;从上到下垂直排列元素flex-direction:column-reverse;从下到上垂直排列元素自适应换行
2022-01-27 01:38:10
240
原创 css基础
1.常用属性line-height 设置行高为容器高度,可以让文本垂直居中 text-align:center; 文本水平居中 !important 权重display:inline 行盒 display:block 块盒 border-style:solid 盒子实线边框padding:bottom 盒子到内容底部距离 margin:bottom 盒子到盒子距离box-sizing:border-box 盒子宽高固定,设置内边距边框盒子不会变大overflow:hidden;腻出隐藏
2021-10-25 23:26:12
68
原创 计算机与网络
1、计算机简介计算机诞生目的取代人力。就是人类奴隶。程序员是就是计算机硬件灵魂,硬件以外是软件。软件可以分为两大类::操作系统:就是协调、管理、控制计算机硬件资源与高级应用软件资源得一个控制程序应用软件:app、网页操作流程图:2、项目开发流程PM(产品经理伪需求)——UE (页面交互)——UI(画页面)——FE前端(展示页面)——RD后端(数据)——QA(测试人员)——OP(运维人员系统架构)3、计算机分类个人 PC :台式机笔记本:断电有电池续命
2021-10-23 20:51:52
132
原创 VUE中v-for更新检测
口诀:数组变更方法,就会导致 v-for 更新,页面更新数组非变更方法:返回新数组,就不会导致 v-for 更新,更新值检测不到可采用覆盖或者 this.$set()数组变更方法如下:1. arr.push()从后面添加元素 arr.push(5)2. arr.pop()从后面删除元素,只能是一个 arr.pop()3. arr.shift()从前面删除元素,只能删除一个 arr.shift()4. arr.unshift()从前面添加元素,返回值时添加完后数组长度 arr.
2021-10-21 21:09:09
293
原创 数组遍历方法
reduce 求数组和语法: arr.reduce(function(prev,cur,index,arr){ ... }, init);回调里面有4个参数:prev 表示上一次调用回调时的返回值,或者初始值 init;cur 表示当前正在处理的数组元素;index 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;arr 表示原数组;init 表示初始值。传入初始值不传初始值jquery 遍历数组只能运用于jq
2021-10-20 21:52:46
58
原创 vue基本指令与脚手架基本配置
脚手架(@vue/cli)创建项目启动服务1、创建项目 vue create 项目名字2、启动项目进入项目根目录,运行以下命令 yarn serve3、脚手架目录代码分析 ├── node_modules # 项目依赖的第三方包 ├── public # 静态文件目录 ├── favicon.ico# 浏览器小图标 └── index.html # 单页面的html文件(网页浏览的是它) ├── src # 业务文件夹 ├── as
2021-10-20 19:56:03
113
原创 导入导出、回调地狱、同异微宏任务
默认导入导出默认导出: export default {xxx}默认导入: import 接收名称 from '模块地址每个模块只允许默认导出一次按需导入导出 按需导出:export 导出的成员(let a = 10) 按需导入: import {多个接收名称} from '模块地址'每个模块可以按需导出多次as 关键字可以改名字(import {a as b} from '模块地址')按需导入导出可以同时使用,导入方法不同import 默认导..
2021-10-17 20:00:30
72
原创 中间件笔记
1.中间件概念所谓中间件,特指业务流程中间处理环节2.全局生效中间件客户端发起的的任何请求,到达服务器之后,都会触发的的中间件通过调用 app.use(中间件函数),即可定一个全局中间件// 导入需要的模块 const express = require('express') const app = express() // // 定义一个简单中间件函数 // const kw = (req,res,next)=> { // console.lo
2021-10-12 16:14:36
90
原创 jsonp和cors解决跨域
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。1.什么是跨域要了解跨域,先说说同源策略。同源策略是 Netscape 公司提出的一个著名的安全策略,所有支持 JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当页面在执行一个脚本时会检查所访问的资源是否同源,如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常。拒绝访问。2.
2021-10-12 16:12:26
68
原创 MySQL数据库
一、数据库基本概念1.什么是数据库数据库是用来组织、存储和管理数据的仓库为了方便管理互联网世界中数据,就有了数据库管理系统的概念。用户可以对数据库进行新增、查询、更新、删除等操作。2.常见数据库及其分类常见数据库分类MySQL 数据库Oracle 数据库(收费)SQL Server 数据库(收费)Mongodb 数据库二、SQL 语句1、什么是SQLSQL 是结构化查询语言,专门用来访问和数据库的编程语言,能够以变成形式,操作数据库里面的数据。三个关键点:SQL
2021-10-12 16:11:00
64
原创 手把手教你写hexo博客
市面上现在有各种博客框架,本博客教大家的是Hexo博客框架,目前比较火。搭建博客中遇到各种各样问题,网上方案也比较成熟。一、搭建环境安装 git安装 node.js安装 Hexonpm install hexo-cli -g // 安装命令hexo -v // 查看安装成功与否二、创建gitHub仓库注册gitHub账号仓库名字特定:账号名接上.github.io三、生成 ssh 密钥创建一个空的文件夹,打开命令栏,切换到文件夹路径,然后生成 ssh :ssh-keyg
2021-10-12 16:07:54
151
原创 手把手教你在npm上发包
在做开发的时候我们都会从npm上下载别人开发好的包,来帮助我们提高工作效率。但你有没有想过自己将自己在工作遇见的一些问题封装成一个包,发布到npm让大家来使用。一. 首先把我们将准备发布的包准备好1. 初始化包的基础结构新建itheima-tools 文件夹,作为包的根目录 在itheima-tools 文件夹中,新建如下三个文件: package.json (包管理配置文件) index.js (包的入口文件) README.md (包的说明文档)2. 初...
2021-10-07 20:27:23
2534
1
原创 vue-基本使用(1)
@vue/cli 自定义配置项目中没有webpack.config.js文件,因为@vue/cli用的vue.config.js,在项目根目录手动创建module.exports = { devServer: { // 自定义服务配置 port: 3000, //端口号设置 open: true, // 自动打开浏览器 }, lintOnSave:false //关闭eslint,写代码出错,控制台不报错}插值表达式模板中使用
2021-07-08 21:39:47
145
1
原创 vue-脚手架安装与安装失败解决方法
安装装包yarn global add @vue/cli创建项目vue create 项目名根据向导配置项目推荐选择默认配置 「Default ([Vue 2] babel, eslint)」以下是手动配置的演示? Please pick a preset: Manually select features # 选择手动? Check the features needed for your project: Choose Vue version, Babel, C
2021-07-08 21:02:29
2200
原创 yarn的基本命令
yarn的安装下载node.js,使用npm安装npm i -g yarn查看版本:yarn -Vyarn的常用命令初始化项目yarn init 与 npm init 一样通过交互式会话创建一个 package.json yarn init # yarn npm init # npm # 跳过会话,直接通过默认值生成 package.json yarn init --yes # 简写 -y npm init -y安装包y
2021-07-07 20:26:54
30409
1
原创 VUE-webpack
webpack基础使用1.初始化包环境,自动下载package.json配置文件yarn init2.安装依赖包,vue包yarn add webpack webpack-cli -D3.在package.json里配置4.根目录创建src目录,在src目录创建入口函数main.js文件5.根目录创建配置入口出口webpack.config.js6.填入配置项const path = require("path")module.exports = {
2021-07-07 11:37:10
260
原创 ES模块化和异步编程高级
在node.js中体验es6模块化1.确保安装了node.js2.在package.json的跟节点中添加‘type’:"module"节点基本语法默认导入导出导出语法export default 关键字,每个模块只能使用一次export default 关键字import from 关键字 m1 是变量名 最后跟上路径当前文件模块为./m1.jslet a = 1let b = 2export default { a}------------------------
2021-07-05 21:59:32
251
原创 jQuery基础
jQuery优点对事件、样式、动画支持,大大简化了DOM操作。 jQuery基本使用jQuery的官网地址: https://jquery.com/,官网即可下载最新版本。 引入jQuery文件。 在文档最末尾插入 script 标签,书写体验代码。 jQuery入口函数// 第一种: 简单易用。$(function () { ... // 此处是页面 DOM 加载完成的入口}) ; // 第二种: 繁琐,但是也可以实现$(document).read
2021-07-04 22:06:17
142
3
原创 Web API介绍
获取元素var nav = document.getElementById('nav'); // 这个获得id 属性var lis = document.getElementsByTagName('li')//这个获得li 元素var nav = document.getElementByClassName('nav'); 这个获得class 属性H5新增获取属性方法var li = document.querySelector('li')获取一个li元素querySelecto...
2021-07-04 14:57:29
111
2
原创 js基础笔记
引入方式行内式:<input type="button" value="点我试试" onclick="alert('Hello World')" />内嵌式:<script> alert('Hello World~!');</script>外部js文件:<script src="my.js"></script>变量声明var a;变量赋值:var a = 105种简单数据类型1.数字型
2021-07-04 14:11:49
101
1
空空如也
hexo博客next主题博客文章列表自动加无序列表问题
2021-10-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人