- 博客(67)
- 收藏
- 关注
RSS订阅原创 什么是BFC？BFC的形成条件？BFC的应用场景
BFC 是块级格式化上下文，是在盒模型下对块级元素进行布局的独立渲染区域，该渲染区域内的元素和区域外的元素是相互隔离的。不同BFC内部的元素互不影响。
2022-09-15 09:18:23
2284
1
原创 inline-block与line-height问题
inline-block与line-height问题、inline-height与height
2022-09-14 15:24:13
551
原创 Node.js-使用Express写接口
1. 创建基本的服务器// 1.导入expressconst express = require('express')// 2.创建web服务器const app = express()...// 3.启动web服务器app.listen(80, () => { console.log('server run at http://127.0.0.1');})2. 创建API路由模块apiRouter.jsconst express = require('ex
2022-05-18 14:39:21
749
原创 Node.js-Express
1. Expressexpress：npm上的一个第三方包，提供了快速创建web服务器的便捷方法。前端开发当中最常见的两种服务器：Web网站服务器：专门对外提供Web网页资源的服务器 API接口服务器：专门对外提供API接口的服务器使用Express，可以方便、快捷的创建Web网站的服务器或API接口的服务器。2. Express的使用1）安装：在项目所处的目录中，运行终端命令npm install express @4.17.12）创建基本的Web服务器// 1..
2022-05-17 02:32:35
377
原创 Node.js-创建基本的web服务器
目录1.创建web服务器的基本步骤2. req请求对象3. res响应对象4. 解决中文乱码问题1.创建web服务器的基本步骤导入http模块 创建web服务器实例 为服务器实例绑定request事件，监听客户端的请求 启动服务器// 1.导入http模块const http = require('http')// 2.创建web服务器实例const server = http.createServer()// 3.为服务器实例绑定request事件，...
2022-05-12 21:49:41
791
原创 fixed脱离文档流 不占位置
position：absolute/fixed 元素开启绝对定位和固定定位之后才会脱离文档流。相对定位无法脱离文档流。解决方案：给设置了fixed的元素外面包一层div，再给这个div设置高度即可，这样，这个div就撑起了元素所站的位置，从而不影响其他元素的显示。 .container { width: 200px; height: 100%; .el-menu { position: fixed; height: 100%; border:
2022-05-06 16:06:47
2460
原创 element-ui height:100%不生效解决方案
在使用element-ui组件时，想要侧边栏的高度占满屏幕的左侧边栏，单纯在样式中设置了height:100%，然而并不生效。.el-menu { height: 100%; border: none; h3 { color: #fff; text-align: center; line-height: 48px; } }解决方案：当想要元素铺满整个屏幕的时候，采用绝对定位或者固定定位定位+width：100%
2022-05-06 14:30:20
3685
原创 [Vue warn]: Invalid prop: type check failed for prop “index“. Expected String, got Undefined
在使用vue 和element UI做循环遍历的时候遇到了如下问题：<el-menu-item-group v-for="(subItem, index) in item.children" :key="subItem.path" :index="subItem.path"> <el-menu-item :index="index" >{{ subItem.label }}</el-menu-item></el-menu-item-group
2022-05-06 13:58:24
1229
原创 vue3.0-axios拦截器、proxy跨域代理
1. vue-cli1）vue-clivue-cli（vue脚手架）是vue官方提供的、快速生成vue工程化项目的工具。官方首页：Vue CLI特点：开箱即用 基于webpack 功能丰富且易于扩展 支持创建vue2和vue3的项目2）安装vue-clivue-cli是基于Node.js开发出来的工具，因此需要使用npm将它安装为全局可用的工具：①解决Windows PowerShell不识别vue命令的问题3）创建项目4）基于vue ui创...
2022-04-27 21:39:28
7775
1
原创 vue3.0-路由
1. 前端路由的概念与原理1）什么是路由路由（router）就是对应关系。路由分为两大类：后端路由 前端路由2）后端路由后端路由指的是：请求方式、请求地址与function处理函数之间的对应关系。在node.js中，express路由的基本用法如下：3）SPA与前端路由SPA指的是一个web网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。即在SPA项目中，不同功能之间的切换，要依...
2022-04-26 20:24:10
2423
原创 vue3.0-插槽、自定义指令
目录1. ref引用1）ref引用2）使用ref引用DOM元素3）使用ref引用组件实例4）控制文本框和按钮的按需切换5）让文本框自动获得焦点6）this.$nextTick(cb)方法2. 动态组件1）动态组件2）实现动态组件渲染3）使用keep-alive保持状态3. 插槽1）插槽2）插槽的基础用法①没有预留插槽的内容会被丢弃②后备内容③具名插槽④为具名插槽提供内容⑤具名插槽的简写形式3）作用域插槽①解构作...
2022-04-24 20:06:30
2756
1
原创 vue中v-model双向绑定input输入框
<!-- 输入框 --> <input type="number" class="form-control form-control-sm ipt-num" v-model.number.lazy="number" />v-model双向绑定数据number，用户在输入框中内容之后，判断用户输入的内容，然后判断内容是否为正整数，不是的话要进行转换。先把输入的值转换为整数 如果输入的值是字符串或者是 <1 的数字，则将输入框内容赋值为1 如果输入的值是带小..
2022-04-24 12:52:37
4897
原创 vue3.0-watch侦听器
目录1. watch侦听器1）watch侦听器2）watch侦听器的基本语法3）immediate选项4）deep选项5）监听对象单个属性的变化6）计算属性vs侦听器2. 组件的生命周期1）组件运行的过程2）如何监听组件的不同时刻3）如何监听组件的更新4）组件中主要的生命周期函数5）组件中全部的生命周期函数3. 组件之间的数据共享1）组件之间的关系2）父子组件之间的数据共享①父->子共享数据②子->父共享数据③父&...
2022-04-22 20:42:17
1935
1
原创 vue3.0-props、computed、自定义事件
目录1. props验证1）props验证2）对象类型的props节点3）props验证①基础的类型检查②多个可能的类型③必填项校验④属性默认值⑤自定义验证函数2. 计算属性1）计算属性2）声明计算属性3）计算属性的使用注意点4）计算属性和方法3. 自定义事件1）自定义事件2）自定义事件的3个使用步骤①声明自定义事件②触发自定义事件③监听自定义事件3）自定义事件传参4. 组件上的v-model1）在组件上使用v-
2022-04-21 20:40:16
3678
原创 ES6模块化与异步编程高级用法
1. ES6模块化1）前端模块化规范的分类在ES6模块化规范诞生之前，JavaScript社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范。但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性，并不是浏览器与服务端通用的模块化标准，例如：AMD和CMD适用于浏览器端的JavaScipt模块化 CommonJS适用于服务器端的JavaScript模块化太多的模块化规范给开发者增加了学习的难度与开发的成本，因此大一统的ES6模块化规范就诞生了。2）ES6模块...
2022-04-18 21:14:18
2097
1
原创 vue2.0-路由
1. 前端路由的概念与原理1）SPA与前端路由路由（router）就是对应关系。SPA指的是一个web网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成，此时，不同组件之间的切换需要通过前端路由来实现。在SPA项目中，不同功能之间的切换，要依赖于前端路由来完成。前端路由：Hash地址与组件之间的对应关系。2）前端路由的工作方式用户点击了页面上的路由链接 导致了URL地址栏中的Hash值发生了变化 前端路由监听到了Hash地址的变化 前端路...
2022-04-14 22:54:46
3993
原创 vue2.0-动态组件、插槽、自定义指令
1.动态组件动态组件指的是动态切换组件的显示与隐藏。1）实现动态组件渲染vue提供了一个内置的<component>组件，专门用来实现组件的渲染。<template> <div class="app-container"> <h1>App 根组件</h1> <hr /> <button @click="comName = 'Left'">展示Left组件</bu...
2022-04-12 12:45:20
905
原创 vue2.0- vue-cli、vue组件
1. 侦听器1）watch侦听器watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。<body> <div id="app"> <input type="text" v-model="username"> </div> <script src="lib/vue-2.6.12.js"></script> <script> ...
2022-04-08 17:25:01
1410
原创 Vue2.0-vue基础
目录1. vue简介1）vue的特性1⃣️数据驱动视图2⃣️双向数据绑定2）MVVM3）MVVM的工作原理2. vue的基本使用1）基本使用步骤2）基本代码与MVVM的对应关系3. vue的调试工具4. vue的指令1）指令的概念2）内容渲染指令3）属性绑定指令使用JavaScript表达式4）事件绑定指令1⃣️事件对象$event2⃣️事件修饰符3⃣️按键修饰符5）双向绑定指令1⃣️v-model指令的修饰符..
2022-04-06 21:04:52
1673
1
原创 Vue2.0-webpack
目录1. webpack的基本使用1）创建列表隔行变色项目2）在项目中安装webpack3）在项目中配置webpack2. webpack相关问题1）mode可选值的应用场景2）webpack.config.js文件的作用3）webpack中的默认约定4）自定义打包的入口与出口3. webpack中的插件1）webpack-dev-server插件2）html-webpack-plugin插件3）devServer节点4. webpack中的lo.
2022-04-05 22:08:57
1669
原创 数据可视化
目录1. 数据可视化1）数据可视化的场景2）常见的数据可视化库2. ECharts1）使用五步曲2）选择不同类型图表3）相关配置1. 数据可视化目的：借助于图形化手段，清晰有效的表达与沟通信息。1）数据可视化的场景2）常见的数据可视化库D3.js：目前Web端评价最高的JavaScript可视化工具库（入手难） ECharts.js：百度出品的一个开源JavaScript数据可视化库 Highcharts.js：国外的前端数据可视化库，非商用免
2022-04-01 22:41:23
813
原创 jQuery其他方法
1. jQuery拷贝对象如果想要把某个对象拷贝（合并）给另一个对象使用，此时可以使用$.extend()方法语法：deep：如果设为true为深拷贝，默认为false为浅拷贝 target：要拷贝的目标对象 object1：待拷贝到第一个对象的对象 objectN：待拷贝到第N个对象的对象 浅拷贝：把拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象 深拷贝：前面加true，完全克隆（拷贝对象，而不是地址），修改目标对象不会影响被拷贝对象 ...
2022-04-01 19:49:07
946
原创 jQuery事件
1. jQuery事件注册单个事件注册其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。2.jQuery事件处理1）事件处理 on() 绑定事件on()方法在匹配元素上绑定一个或多个事件的事件处理函数events：一个或多个用空格分隔的事件类型，如click或keydown selector：元素的子元素选择器 fn：回调函数，即绑定在元素身上的...
2022-03-31 12:53:09
805
原创 jQuery常用API-下
1. jQuery属性操作1）设置或获取元素固有属性值prop()元素固有属性：元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type。1. 获取属性语法2. 设置属性语法2）设置或获取元素自定义属性值attr()自定义属性：用户自己给元素添加的属性，比如div添加index = "1"。1. 获取属性语法2. 设置属性语法该方法也可以获取H5自定义属性3）数据缓存data()...
2022-03-30 20:55:46
108
原创 jQuery常用API-上
目录jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm1. jQuery选择器1）jQuery基础选择器2）jQuery层级选择器3）隐式迭代4）jQuery筛选选择器5） jQuery筛选方法6） jQuery里面的排他思想7）链式编程2. jQuery样式操作1）操作css方法2）设置类样式方法3）类操作与className区别3. jQuer..
2022-03-29 20:51:21
1205
原创 jQuery概述
目录1. jQuery概述1）JavaScript库2）jQuery概念2. jQuery的基本使用1）jQuery的入口函数2）jQuery顶级对象$3）jQuery对象和DOM对象1. jQuery概述1）JavaScript库JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理
2022-03-29 12:25:21
285
原创 JavaScript- 本地存储
目录1. 本地存储特性2. window.sessionStorage存储数据：获取数据：删除数据：删除所有数据：3. window.localStorage存储数据：获取数据：删除数据：删除所有数据：1. 本地存储特性数据存储在用户浏览器中 设置、读取方便、甚至页面刷新不丢失数据 容量较大，sessionStorage约5M、localStorage约20M 智能存储字符串，可以将对象JSON.stringify()编码后存储2..
2022-03-28 22:59:58
150
原创 JavaScript - 移动端网页特效
1. 触屏事件触屏事件touch也称为触摸事件。touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触摸笔）对屏幕或者触控板操作。1）常见的触屏事件 <style> div { width: 100px; height: 100px; background-color: pink; } </styl...
2022-03-28 20:35:33
906
原创 JavaScript - PC端网页特效
1. 元素偏移量offset系列使用offset系列相关属性可以动态的得到该元素的位置（偏移量）、大小等。获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位1）offset系列属性 <style> * { padding: 0; margin: 0; } .father { /* positi...
2022-03-27 15:52:02
623
原创 JavaScript-BOM浏览器对象模型
1. BOM概述BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象时window。BOM有一些列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM缺乏标准，JavaScript语法的标准化组知识ECMA，DOM的标准化组知识W3C，BOM最初是NetSpace浏览器标准的一部分。BOM的构成window对象是浏览器的顶级对象，它具有双重角色。它是JS访问浏览器窗口的一个接口 它是...
2022-03-26 19:51:34
238
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人