- 博客(43)
- 收藏
- 关注
RSS订阅原创 综合案例（窗口拖动，css3线性运动动画，轮播图，跑马灯，闪动的红点）
案例一盒子拖拽案例<style> * {padding:0px;margin:0px} .login { width: 300px; height:300px; background: pink; position: absolute; } .login .header {cursor:move;width:100%;height:100px;background: black;} <
2023-02-27 15:45:16
532
原创 四十七、一排按钮，点击哪个按钮就改变哪个按钮样式的功能实现
说明一排按钮，点击哪个按钮就改变哪个按钮的样式。如下图就这个小功能，项目中经常会遇到，每次都脑子what了，一时竟不知道这个逻辑该怎么实现。有时写出来了，过一段时间碰到了又不会了，这次特地记录一下。上代码：html模版 <div class="nav"> <div class="twoBtn"> <div class="Dashboard" @click="$router.push('/reportFormRouter'
2022-04-25 14:23:46
678
原创 四十六、vue项目导出功能实现
导出说明前端在项目开发中经常会有需要导出表格的需求，如下图所示。那么导出功能如何实现呢？上代码，下面就是导出按钮绑定点击事件方法：<!--indisabled 禁用开关--> <el-button class="ann-content-button2" @click="exportDerived" :disabled="indisabled" >导出核销记录</el-button> async export
2022-04-25 13:35:15
2178
原创 四十五、vue中计算属性computed的使用
这里写自定义目录标题computed的使用项目中computed可用于tab列表数据做筛选功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入computed的使用computed可定义一些函数，这些函数叫做【计算属性】只要dat
2021-11-03 14:27:22
1115
1
原创 四十四、解决vue项目拉取后安装依赖报python问题
解决vue项目拉取后安装依赖报python问题给项目安装依赖时报python问题，如下Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-83_binding.nodeCannot download "https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-83_binding.nod
2021-08-11 23:35:10
1675
原创 四十三、解决项目中图片显示不出来和元素样式丢失问题
解决项目中图片显示不出来和元素样式丢失问题问题1：图片路径没问题，不显示解决方法：url后面路径用require（）包起来问题2：注销登陆后自动返回登陆页面时，登陆页图标样式丢失注销登陆自动返回登陆页时，图标样式丢失解决方法：在使用组件时，因为修改样式，选择的类不对，选择的是组件自动生成的类，应该选择这两个图标共同的类名，没有可以自己创一个，然后修改样式，问题就解决了。...
2021-08-11 23:28:51
424
原创 四十二、vue中用一个boolean类型的变量showFlag控制多个元素
一个boolean类型的变量showFlag控制多个元素（以ts举例）点击一个按钮切换按钮背景或颜色，可以这样写还可以用这个showFlag控制其他元素显示或隐藏还可以用这个showFlag控制其他元素的宽度或高度也随着布尔值的改变而改变...
2021-08-11 23:08:08
1233
原创 四十一、vue项目打印功能
四十一、vue项目做打印功能方法一：下载print.jshttps://github.com/zxc19890923/print/blob/master/print.js在src目录下面创建plugins/print/Print.js文件保存插件内容，其他位置也可以，或者放在src\utils工具目录中修改print.js，使其能够多个页面同时打印，下面代码片段中加了注释得就是要添加得代码// 搜索getStyle方法，添加：str += "<style>html,body
2021-08-11 16:40:32
236
原创 四十、vue
概念简单概括：Vue是当下很火的一个JS库&框架（国人尤雨溪）库： 一堆属性方法的集合，按需求调用 （举例JQ库框架：针对业务提供的一套解决方案（N个库的集合） 并且制定了统一的开发规范小总结为什么要学习Vue：1 减轻后端压力，用来解决前后端分离问题2 vue相对jq的好处 1提升性能 减少DOM操作、2 组件化 封装提取代码 便于多人协作开发什么是vue：就是用js写的一个库、框架（vue全家桶渐进式：1 可以用一个库也可以用全家桶 慢慢学，2 越来越难初体验明
2021-08-11 14:55:49
85
原创 三十九、node（客户端，服务端数据渲染，设计模式mvc）
前端代理解决跨域!!!1.安装http-proxy-middleware模块安装命令:npm i http-proxy-middleware -D2.使用 在app.js 文件中配置(引入 使用)注意: 导入模块 会因版本问题 报错, 新语法 百度解决项目中每次调试代码都要重启服务器问题安装nodemon模块，手动重启修改为自动重启1、安装nodemon模块nodemon模块安装命令cnpm i nodemon -g或yarn global add nodemon
2020-08-08 14:34:52
232
原创 三十七、node（express模块，构建express脚手架）
Express简介初体验：通过express创建web服务器步骤：1-创建expressDemo目录2-进入expressDemo目录，初始化package.json3-下载express模块，然后创建app.js练习 搞web服务器注意：在做任何项目开发禁止模块名和目录名一样小总结什么是express：基于node http模块开发的框架express框架好处：加快项目开发，便于协作基础//1. 导入express模块，语法：const express = requ
2020-08-05 12:00:00
316
原创 三十八、MongoDB数据库（增删改查）
MongoDB简介就是一个数据库，将数据存储在磁盘文件中MongoDB下载：https://www.mongodb.com/download-center/community数据库种类：关系型：MySQL、SQL Server 、Oracle等非关系型（Not Only SQL）：MongoDB（文档）、Redis/Memcache（内存）关系型数据库和非关系型数据库（NoSQL）区别：相同点：都是数据库不同点：关系型：1.遵循SQL标准，换句话说增删改查语法大同小异、2.有库和表约束
2020-08-04 19:04:18
245
原创 三十六、nodeJs
Node简介**概念：**就是js运行环境，用来解析js代码以前：在html文件中写js，通过浏览器来解析现在：在js文件中写js，通过node来解析作用：用来解析JS代码用途：1、写接口2、写网站3、写聊天室4、写桌面应用安装Node步骤1：下载步骤2：双击安装（ps. 除了安装目录外其他统一傻瓜式下一步）步骤3：安装完毕测试node初使用1、通过node解析js代码2、通过node解析js文件以前浏览器解析JS代码：主要表单验证、网页特效（轮播图、手风琴等
2020-08-01 17:56:54
120
原创 二十八、HTML 5 Web 存储（H5存储 ★★★★）！！！
概念webStorage（H5存储）是新型的本地存储技术，这种技术在今天的浏览器中基本上已经全部支持(IE8以上)。H5存储中有两个对象：localStorage:用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。sessionStorage:用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。localStorage的浏览器支持情况在今天的浏览器中几乎已经没有不支持localStorage的情况了，官方明确指出在IE8及更高的浏览器中都支持。当然也不
2020-08-01 10:48:55
301
原创 二十七、cookie存储
概念cookie:cookie是计算机中的一门技术，主要通过该技术存储网站数据，从而减轻后端压力，加快网站访问速度。存储在客户端浏览器中（不同浏览器不能共享）特性：时间限制（默认浏览器关闭销毁，自定义时间）域的限制（浏览器同源策略）空间限制，cookie只能存储4kb数量限制，每个域下最多不能超过50个cookie存储数据类型限制，cookie只能存储字符串（思考：人/商品信息都是对象怎么存，回答：转化为其他类型）好处：减轻服务器压力，因为将数据存储到客户端了就不
2020-07-31 21:30:43
945
原创 二十六、跨域（jsonp解决跨域）
概念在web有一种现象：不同的域名之间相互分享资源(信息)并进行通信。这种现象叫做：跨域。表面上看起来多个站点之间的来往增加是非常好的，但是其中弊端却是更大的。因为你不知道其他站点会拿你分享给他的信息做什么事情。所以出于安全性的考虑，在web中跨域这种现象默认是不允许的。同源策略即协议(http)，域名(www.xxx.com)，端口(80)都一致。其中三者有一个不一致就属于跨域天生就能跨域的标签 1，<img> 2，<iframe>
2020-07-30 18:01:05
128
原创 二十五、ES6新增语法（promise解决异步回调地狱）ES7（async / await解决异步回调地狱）
promise !!!异步回调地狱简介es6出了一个新技术叫promise，主要就是用来解决异步回调地狱的语法!!!// 1. 创建promise对象const p = new Promise(一个实参 函数类型 有两个形参) 第一个形参代表成功了 success resolve 第二个形参代表失败了 error rejectconst p = new Promise((resolve, reject) => { // consol
2020-07-30 17:02:12
493
原创 二十四、ajax请求
HTTP协议（理解重要）明确：在生活中，我们经常通过浏览器输入网址打开一个网站，例如打开淘宝，天猫，京东等思考：网页显示的内容数据哪里来的？用户角度 - 输入网址回车可以看到网页内容上网时，页面显示网页的工作原理开发角度 - 输入网址 - 通过DNS文件找到服务器IP -> 然后发送请求 -> ... -> 最终返回html浏览器解析脚下留心： 解析的过程中发现img、js、css继续发送请求解析思考：请求可以随意发吗，还是有规则的？回答： 不可以，所有
2020-07-30 14:32:04
255
原创 二十三、PHP && MYSQL
一、WEB相关概念服务器：没有显示器的主机，配置比普通电脑高、24小时开机web服务器：是个软件，开启之后你就可以通过浏览器访问磁盘目录下的文件ip地址：是电脑的唯一编号不重复，每个人都有一个特殊的127.0.0.1 localhost域名：因为ip不方便记忆DNS服务器：保存域名和ip对应关系的文件端口号：为了确定每次访问交给计算机哪个软件处理web访问流程普通用户：打开浏览器 输入网址 直接看到内容专业开发：打开浏览器 输入网址 -> 交给DNS服务器（存放ip和域名关系
2020-07-11 09:49:05
155
原创 二十二、ES6新增语法（class类，继承）
知识回顾语法概念原型：js给每个函数分配的公共空间原型好处：减少代码冗余、便于后期维护设置原型构造函数中普遍是属性构造函数公共空间普遍是方法构造函数.prototype.键 = 值构造函数.prototype.键 = 对象 （留心：修改构造函数原型执行获取原型实例对象.键原型链：多个原型的集合原型链特性： 调用对象属性和方法先 自身找 没有去 原型链 找一直 Object构造函数的公共空间还是 没有属性 undefined方法 报错面向对象思
2020-07-07 21:52:59
447
原创 二十一、面向对象案例
面向对象框架格式下面以自动轮播图（插件）为例写插件潜规则：构造函数中保存标签等属性，原型方法中使用一个个功能<style> //-------------------------------------------轮播图样式* {padding:0px;margin:0px;}.box {width:500px;height:180px;overflow: hidden; position: relative;}ul { list-style:none;
2020-07-07 19:19:58
241
原创 二十、js中面向对象(原型，原型链)
面向对象概念明确：面向对象几乎所有语言都有，它是一种编程思想 面向过程：一步步实现代码（就是咱们之前写的代码 面向对象：封装起来，然后创建对象调用（减少代码冗余，便于后期维护，减少内存占用等）举例说明：造车面向过程：想一个 造一下面向对象：封装起来（车模型—class），然后创建对象调用（造车—new object ）好处（代码举例）贪食蛇游戏由以上代码可看出，利用面向对象写的代码更方便后期维护面向对象（语法）function 函数名() { // 留心1： 只要你
2020-07-04 11:16:23
233
原创 十九、正则
明确需求明确：在实战工作中，经常需要验证用户输入的数据，最典型的场景登录注册思考：判断输入框内容是都等于空（也就是用户是否输入非常简单）但是如何判断是否是邮箱手机号呢？回答：uname != ‘’ 得通过正则正则表达式简介 - 正则表达式（Regular Expression 简称：RegExp） - 又成规则表达式，描述了匹配字符串的规则 - 由我们自己来书写 “规则”，专门用来检测 字符串 是否符合 “规则” 使用的 - 我们使用一些特殊的字符或者符号定义
2020-07-01 10:05:40
280
原创 十八、ES6新增语法（里面含ES5的JSON）（下）
模块（module）通过Live Server插件来运行网页 （走http协议）明确需求■ 实战：封装工具（util.js）或网页头部（head.vue或head.jsx）或底部（版权信息）如果每个页面单独写后期维护麻烦，这时候我们就需要模块化 封装起来 然后直接导入使用。■ 解决：通过es6的模块（module）准备：必须走HTTP网址，vscode安装live server插件语法说明-说明：通过import 和export实现导入导出功能（必须走http协议访问）导出：
2020-06-30 21:04:09
367
原创 十七、js中ES6新增语法（上）
声明变量（var，let，const）!!!语法说明var 变量名 = 变量值; // 声明变量，函数作用域let 变量名 = 变量值; // 声明变量，块级作用域 （ps. 作用域内不能重复定义、能修改）const 变量名 = 变量值; // 声音常量，块级作用域（ps. 作用域内不能重复定义、不能修改 ）留心1：块就是语法中 {}留心2：默认全局就是一个最大块{} 只不过你看不到语法验证：验证：var 函数作用域<script> va
2020-06-29 22:34:49
950
3
原创 十六、事件下（事件委托，案例）
知识点回顾（事件相关）：事件绑定/注册/监听DOM0标签对象.事件类型 = 处理函数标签对象.事件类型 = null在标签上写 事件类型=“函数名()” setTimeout/setInterval(“函数名()”, 毫秒)DOM1：没有DOM2：ie标签对象.attachEvent（事件，处理函数）标签对象.detachEvent（事件，处理函数）主流标签对象.addEventListener(事件类型，处理函数，事件流false冒泡)标签对象.removeEvent
2020-06-24 20:54:16
150
原创 十五、事件对象（DOM2级事件，事件流，阻止事件流）
事件绑定种类DOM0级事件 语法： 标签对象.事件类型 = 函数a同一个节点同一事件只能设置一次，多次着后者覆盖前者b无兼容问题c事件流不支持DOM1级事件 没有**DOM2级事件a同一个节点同一事件可以绑定多个函数，按照绑定顺序执行b有兼容问题c支持处理事件流DOM3级事件 （语法不变只是增加了事件类型）DOM3级事件在DOM2级事件的基础上【添加了更多的事件类型】，全部类型如下：UI事件，当用户与页面上的元素交互时触发，如：load、scroll焦点事件，当元
2020-06-23 22:46:45
261
原创 十四、核心DOM（了解）
节点关系-概念根节点：在HTML文档中，一个HTML文档只有一个树根就是HTML节点子节点：某一个节点的下一级节点父节点：某一个节点的上一级节点兄弟节点：多个子节点属于同一个父节点空白节点：空格、回车、换行在（主浏览器有兼容性问题）IE低版本浏览器：IE6、7、8主流浏览器：IE9+、chrome、Firefox等等节点关系-举例**术语：**DOM的分层结构 / 树形结构 / 节点树**概念：**在JS DOM中，HTML文档的层次结构被理解为倒立的树 （树根指
2020-06-22 22:04:43
152
原创 十三、js中的事件（用户和网页之间的交互）
事件概念事件：触发了一个东西/事情 用户和网页之间的交互/动作举例：鼠标、键盘等所做的动作/交互就是事件，如：onlick等留心：事件产生后一般交给谁处理 函数处理事件种类一、鼠标单击 onclick双击 ondblclick移入 onmouseover移出 onmouseout按下 onmousedown松开 onmouseup右击 oncontextmenu content内容 context等onclick单击事件用法示例<body&g
2020-06-22 21:30:10
723
原创 十一、BOM浏览器对象模型（包含定时器，延时器）
BOM概念：BOM:浏览器对象模型单词由来：BOM是英文Browser Object Model的缩写功能：让js有能力操作浏览器分类：■ window*（浏览器窗口对象，js中最大的对象 留心：因为最大可以不用写 省略）● location*（地址栏对象 - 提供了对地址栏操作的方法和属性）● history*（浏览历史对象，提供了对浏览器历史记录操作的方法和属性）● screen（屏幕对象，获取屏幕的信息）● navigator（浏览器对象，提供了获取浏览器
2020-06-18 22:20:36
183
原创 十、js中的日期对象Date
Date 日期对象语法var time = new Date() // 当前（普遍var time = new Date(2019, 11, 05, 22, 33, 55) // 指定（注：00是12月）var time = new Date(‘2019-12-05 22:33:55’) // 指定（推荐getFullYear()、getMonth()、 // 0-11 0代表1月 写代码的时候得+1getDate()、getHours()、
2020-06-18 09:18:52
128
原创 九、js的Math数学对象
数学对象的各种方法常用ceil()：向上取整floor()：向下取整round()：四舍五入pow(x，y)： x的y次幂sqrt()：求平方根random()：随机数（0~1 最小0.01 最大0.99）console.log(Math.ceil(1.8)) // 2 向上取整console.log(Math.floor(1.8)) // 1 向下取整console.log(Math.round(1.8)) // 2 四舍五入console.log(Math.pow(2,
2020-06-17 22:08:20
122
原创 八、js的字符串对象
字符串创建字面量创建（推荐!!!）var str = “任意内容”构造函数（了解）var str = new String()字符串对象属性str.length方法*查找str.indexOf(内容) str.lastIndexOf(内容) 注：不说的参数几乎用不上方法 *平铺 *替换str.repeat(内容) str.replace(旧内容，新内容)方法 *转数组str.split(分隔符)方
2020-06-17 21:18:41
117
原创 七、数组中内置对象（forEach,map,filter）
数组对象forEach语法： 变量名arr.forEach(实参)留心1： forEach 注意大小写留心2： 实参是一个函数↓变量名arr.forEach(function(item, index, arr) {//1个实参，这个实参是函数类型有3个形参// item 就是数组中的值// index 就是数组的索引/下标// arr 就是这个数组本身（可选 忽略没有用})流程：arr.forEach是怎么跑的 （非常重要举栗：var arr = [‘a’, ‘b’]语法：ar
2020-06-17 13:05:28
427
原创 六、JS的复杂数据类型--数组
数组Array引入：我们知道一个变量存储一个值，一个变量是一个容器，如果给很多容器中都放入商品的话，我们就可以开超市了。我们都去超市买过东西，超市的东西都整齐的摆放在货架上，而不是所有的东西都堆在一起。为什么呢？因为便于管理商品。咱们代码中也有一个货架，叫数组，为了便于管理多个值的。假设，我们现在要存一个班的所有学生姓名，如果每个姓名都存在一个变量中，就跟所有商品随便的堆在一起一样，不好管理，所以我们会存到数组中。数组概念：内存中的多个容器排列起来，组成的一个大容器。数组中的每个小容器都有编号，
2020-06-13 08:59:12
878
原创 五、JS的复杂数据类型--函数（下）
函数-下作用域函数外边的变量叫做全局变量，可以在函数外面和函数里面使用。var num = 1;function test(){ num++; console.log(num);}test(); // 2console.log(num); // 2函数内部的变量叫做局部变量，只能在函数内部使用。function test(){ var num1 = 10; num1++; console.log(num1);}test(); // 11console.log(num1);
2020-06-13 08:42:00
402
原创 四、JS的复杂数据类型--函数（上）
函数-上引入：怎样洗衣服？手动怎么洗？拿个盆，接水，放衣服，倒洗衣粉，洗，涮，拧干挺费劲的，有没有简便的方法？使用洗衣机，衣服放进去，倒上洗衣粉，按开关，一切就都搞定了在生活中这样的例子有很多，大到洗衣机空调，小到水龙头剪刀。每个工具都有自己不同的功能。为了生活方便简洁，就会使用这些工具。程序员是一群很会享受生活的群体，所以在代码中也有很多这样的工具，就是咱们今天要学习的函数。总结：代码中工具----函数概念：函数就是具备某个功能的一个工具。是完成某个功能的一段代码。大家以前有没有用过
2020-06-13 08:35:37
364
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人