- 博客(64)
- 收藏
- 关注
RSS订阅原创 将秒换算成时分秒js
timePlay (value) { var secondTime = parseInt(value)// 秒 var minuteTime = 0// 分 var hourTime = 0// 小时 if (secondTime > 60) { // 如果秒数大于60，将秒数转换成整数 // 获取分钟，除以60取整数，得到整数分钟 minuteTime = parseInt(secondTime / 60) .
2020-12-24 18:12:26
1115
1
原创 重装系统后发现office没了
下载家庭和学生版（买电脑都会自带的学生家庭版，注意：dell、微软、联想，只要正规牌子基本都带，买电脑的商品详情页都有写，而且是永久激活的。和买电脑时买的win10系统一样，这个office也是花钱买的）1、进入微软官网：http://www.microsoft.com2、登录你的微软账户3、通过右上角的进入账户主页：点击头像->点击“我的 Microsoft 账户”4、点击“订阅”下的“所有订阅”5、找到“PC 版 Office 家庭和学生版”，点击右边的“查看产品密钥并安装”6、点击安
2020-10-20 16:02:42
12445
2
原创 ＜pre＞＜/pre＞标签保留输入格式
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。利用<pre></pre>这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的标签之一。也就是说你输入的东西被原封不动的输出,包括你输入的空格之类的,不用 <br>等来表示空格或者回车了...
2020-09-08 10:13:28
1680
原创 Avoid mutating a prop 组件传值报错
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “pipelines”报错的时候父组件：子组件：原因：单向数据流所有的 pr
2020-08-25 17:04:25
641
原创 vue filters过滤器{{aa | filterAa}}
//html{{aa | filterAa}}//jsfilters:{ filterAa(aa){ // 这额aa就是过滤器传入的参数 }}例子：<span class="detail-content">{{planDetail.planState | transferPlanStateText}}</span>planDetail.planState是参数，若为PENDING,经过以下方法，返回为 待执行filters: { tr
2020-08-21 15:44:14
207
原创 css中垂直居中的几种方法
一、采用line-height属性当 line-height 和 height 两个属性设置相同的高度时，该元素内部的文字将会居中。#parent { height: 100px; line-height: 100px; border: solid 1px #333;}优缺点：[优点]设置简单；[缺点]只能对一行文字进行垂直居中；二、采用 display:table-cell 和 vertical-align:middle这种现实方式可以让标签元素以表格单元格的形式
2020-08-19 11:21:33
300
原创 vue-router相关知识的总结
首先安装依赖：npm install vue-router项目引用router.js的配置VueRouter 的写法和配置mode:默认时hash,但是这种模式，页面地址会变成加个#号，比较难看http://localhost:8080/#/orderDetail所以一般我们会采用history模式，这样我们的地址就会像平常一样http://localhost:8080/orderDetailbase:应用的基路径，一般写成__dirname,在webpack中有配置rout
2020-08-17 16:57:28
101
原创 vue中computed与methods,watch的总结
computed与methodscomputed是属性调用，有缓存功能,所依赖的数据发生改变时，计算属性才会重新计算，并进行缓存，其他数据改变时，属性并不会重新计算methods:函数调用computed与watchcomputed:变量在computed中定义watch:变量在data中定义如果数据依赖于其他数据，使用computed如果你需要监听某个数据变化时做某事的话，使用watch...
2020-08-17 16:38:57
87
原创 vue中关于生命周期钩子函数的总结
生命周期钩子图示beforeCreate:组件实例刚被创建，el和data未初始化created:组件实例创建完成，完成data初始化，el还不存在beforeMount:完成el和data初始化mounted:完成挂载另外，在标红处，我们能发现el还是{{message}}，这里就是应用的virtual DOM(虚拟DOM)技术，先把坑占住，到后面mounted挂载的时候再把值渲染进去beforeUpdate:组件更新之前updated:组件更新之后beforeDestory:组件销
2020-08-17 16:30:18
120
原创 v-if与v-show的使用场景以及区别
vue中的 v-if 和 v-show 二者都可以动态的控制 元素 的隐藏和显示，但是他们控制的原理是不同的v-ifv-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除，如果删除，也就是页面中不存在这个dom元素，以此达到隐藏的效果；所以v-if在每次切换的时候都会重新创建或者销毁元素，有较高的切换性能消耗；而且v-if是惰性的，如果在初始渲染时条件为假，那就什么也不做，直到条件第一次变为真时，需要渲染时才会开始渲染条件块v-showv-show则是无论你的初始条件是什么，元素都会被渲
2020-08-12 10:52:50
176
原创 vue中v-bind与v-model的区别与联系
在我们需要绑定的属性前面加上 v-bind 之后，v-bind 就和该属性绑定在一起了<a v-bind:href="url">去百度</a> //v-bind绑定hrefdata() { return { url: "http://www.baidu.com" } }我们只需要改变 data 中 url 的值，就能使 a 标签跳转到与修改后的值对应的的页面v-model 是动态的双向数据绑定（只能用在input, textarea, select上），以
2020-08-10 17:01:34
749
原创 vue中一个标签中含有多个class的写法
: 是v-bind的缩写，padding-bottom是其中一个类名，第二个类名意思是：如果(index+1)%3===0就只显示一个类名padding-bottom，如果非的话，就显示padding-bottom和padding-right这两个类名:class="['padding-bottom',(index+1)%3===0?'':'padding-right']"...
2020-08-10 16:46:15
1918
原创 elementui中gutter和offset的区别
gutter是指栅格间间隔，offset是指栅格左侧的间隔格数分栏间隔el-row配置行，el-col配置列，像是一个个单行的表格el-row上的属性gutter，默认值为0，可以设置大于0的任意数字在PC端，设置的这个gutter值为该单元格左右的padding之和<el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-c
2020-08-10 15:52:42
50972
原创 vue中在组件中点击按钮动态添加子路由$addRoute
1.首先在按钮处添加事件且带有两个参数参数一是item，参数二是子路由组件页面(也就是跳转后的页面)2.在生命周期函数created()中添加路由3.在方法中进行路由传值
2020-08-05 11:04:35
3345
原创 vue中路由传值和取值的方法
这里你需要注意：router传值，而route用于取值1、路由传值 this.$router.push()（1） 想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL（2）当点击 <router-link> 时，这个方法会在内部调用，即点击 <router-link :to="..."> 等同于调用 router.push(...)a) 声明式：<rou
2020-08-05 10:30:02
3783
1
原创 如何解决git提交时出现error: failed to push some refs to ‘xxx(远程库)‘
在使用git 对源代码进行push到gitHub时可能会出错，信息如下:出现错误的主要原因是oschina中的README.md文件不在本地代码目录中可以通过如下命令进行代码合并【注：pull=fetch+merge]git pull --rebase origin master此时再执行语句 git push -u origin master即可完成代码上传...
2020-07-06 17:45:44
355
原创 git提交代码时提示Your branch is up-to-date with ‘origin/master‘ 该怎么办
根本原因是版本分支的问题解决办法：1.新建一个分支，然后切换到新分支git branch newbranch git checkout newbranch2.将你的改动提交到新分支上git add . git commit -m "update"3.切换到主分支git checkout master4.新分支提交的改动合并到主分支上git merge newbranch git push -u origin master5.删除这个分支git branch -D new
2020-07-06 17:38:59
3552
原创 webpack无法无法加载文件,系统上禁止运行脚本的解决方法
webpack无法无法加载文件，因为在此系统上禁止运行脚本’的解决方法使用管理员身份运行powershell设置 Set-ExecutionPolicy RemoteSigned为y再次运行就可以了
2020-06-29 11:26:47
2834
1
原创 安装webpack时出现的错误之一解决办法
E:\Program Files>npm install webpack@3.6.0 -gnpm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.npm ERR! path C:\Users\HP\AppData\Roaming\npm\node_modules\webpack\node_modules\_fsev
2020-06-29 10:47:07
5665
3
原创 splice()方法从数组中添加/删除/替换元素
splice() 方法向/从数组中添加/删除/替换元素插入元素：第一个参数是在哪个地方插入元素，第二个参数是0，并且在后面跟上要插入的元素splice(1,0,“aa”,“bb”)删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后面所有的元素）splice(1,2)替换元素：第二个元素是我们要替换几个元素，后面是用于替换前面的元素splice(1,1,“qq”)...
2020-06-24 15:08:21
5325
原创 var和let区别以及块级作用域
在ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须使用function函数的作用域来解决应用外面变量的问题，(因为function作用域中他只管传进去的参数在自己地盘的变化，此参数在之前的行为不归他)你可能看不懂，那么举例说明 var name = "coco"; function changeName() { name = "lili"; console.log(name); } console.log(name)
2020-06-24 10:21:35
170
原创 box-sizing指定盒子模型
box-sizing有两个值可指定为content-box,border-box,这样我们计算盒子大小的方式发生了改变分为两种情况：box-sizing:content-box盒子大小width+padding+border（这也是默认的）box-sizing:border-box盒子大小为width如果盒子模型我们改为box-sizing:border-box,那padding和border就不会撑大盒子了(前提是padding 和border不会超过width宽度)改变盒子模型为盒子大小为
2020-06-16 11:05:04
115
原创 伪元素选择器::before以及::after
伪元素选择器可以帮助我们利用css创建新标签元素，而不需要HTML标签，从而简化了HTML结构选择符简介::before在元素内部的前面插入内容::after在元素内部的后面插入内容注意：before和after创建一个元素，但是属于行内元素新创建的这个元素在文档树中是找不到的，所以我们称为伪元素语法：element::before{}before和after必须要有content属性before在父元素内容的前面创建元素，after在父元素的后面创建元素
2020-06-16 10:56:54
799
原创 结构伪类选择器nth-child和nth-of-type以及两者区别
nth-child(n)选择某个父元素的一个或多个特定的子元素n可以是数字，关键字和公式n如果是数字，就是选择第n个子元素，里面数字从1开始n可以是关键字：even是偶数，odd是奇数n可以是公式：常见的公式如下公式取值2n偶数2n+1奇数5n5 10 15…-n+5前五个（包含第五个）nth-of-type是相同的使用方法两者之间的区别，通过下面的例子说明：当使用nth-child去选择父元素中含div标签的第一个改变背景颜
2020-06-16 10:47:33
589
原创 css直角三角形以及梯形做法
直角三角形做法：border底部 ， 左边取消，只留下上边和右边，且将上边设置为透明，留下右边，则会成为以下效果，当然你也可以尝试着留下别的，来制作不同方向的直角三角形。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
2020-06-15 16:09:44
664
原创 单行文本和多行文本溢出显示省略号
1.单行文本溢出显示省略号white-space:nowrap;//强制一行内显示文本，禁止换行overflow:hidden;//超出部分隐藏text-overflow:ellipsis;//文本用省略号代替超出的部分2.多行文本溢出显示省略号多行文本溢出显示省略号，有比较大的兼容性问题，适合webkit浏览器或者移动端。overflow:hidden;text-overflow:ellipsis;//接下来的几行代码有兼容性问题//弹性伸缩盒子模型显示display:-web
2020-06-15 14:53:07
212
原创 css绘制三角形做法
我们平常使用border最普遍的情况——往往只给border一个较小的宽度（通常为1-2px）；然而这样的日常用法就会容易让大家对border的形成方式产生误解，即认为元素的border是由四个矩形边框拼接而成。我刚开始也是这样认为的！！！然而事实并不是这样。实际上，元素的border是由三角形组合而成<div class="tangle"></div>.tangle { width: 10px; height: 10px; b
2020-06-14 20:49:21
134
原创 css sprites精灵图以及使用方法
为什莫需要精灵图？一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求的图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术（也称为css sprites,css雪碧）。核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器就只需要请求一次就可以了。使用精灵图的核心：1.先将你要展示某个图像的盒子定位并且设置盒子大小，然后使用background:ur
2020-06-14 12:28:52
287
原创 绝对定位的盒子水平垂直居中的方法
加了绝对定位的盒子不能再通过margin:0 auto;,进行水平居中了，但是可以通过以下计算的方法实现水平和垂直居中。水平居中：left:50%; :让盒子的左侧移动到父级盒子元素的水平中心位置margin-left:-100px; :让盒子向左移动自身宽度的一半。垂直居中：top:50%: : 让盒子的上边移动到父级盒子元素的垂直中心位置margin-top:-100px; :让盒子向上移动到自身高度的一半...
2020-06-13 17:31:25
442
原创 为什么要清除浮动以及清除浮动的四种方法
为什莫要清除浮动呢？由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占位置，脱标，最后父级盒子就没有高度变为0，就会影响到下面的标准流盒子，即下面的盒子会跑到浮动的子盒子的底下，占据原本父盒子的位置。清除浮动的四种方法：1.额外标签法会在浮动元素的末尾添加一个空的标签，例如<div style="clear:both"></div>或者其他标签（如<br /等）注意哦：要求这个空标签必须是块级元素哦！！2.父级添加overflow属性可以给父级元素添加ov
2020-06-13 17:23:02
987
1
原创 块级元素水平居中和行内元素水平居中方法
外边距可以让块级元素水平居中，但是必须满足两个条件：1.盒子必须指定了宽度2.盒子左右的外边距都设置为auto.header{ width:960px; margin:0 auto; }常用的写法：margin-left:auto;margin-right:auto;margin:auto;margin:0 auto;而行内元素，可以看成是内容，将父元素直接设置text-align:centerj就可以实现水平居中了！...
2020-06-13 17:00:13
498
原创 flex布局使用方式详细介绍
flex布局比浮动更好用，下面讲解如何使用：开启flex布局：display:flexflex-direction决定主轴方向justify-content决定主轴上的布局align-items决定交叉轴的布局flex-wrap决定单行还是多行align-content决定了多行时交叉轴上的对齐方式，与justify-content相似给每一个item设置order，可以决定其排布的顺序如图所示来设置orderalign-selfflex-grow.
2020-06-12 19:10:54
210
原创 css盒子模型padding,margin,border的设置
CSS盒子模型盒子模型宽度属性高度属性那些HTML元素可以设置高和宽属性边框属性内边距属性内边距属性缩写外边距属性盒子模型计算
2020-06-12 18:38:42
143
原创 盒子阴影box-shadow和文字阴影text-shadow
box-shadow: 20px 20px 30px 20px #888888;第一个是阴影距离左边第二个是阴影距离上面第三个是阴影的模糊程度第四个是阴影的尺寸第五个是阴影的颜色text-shadow语法text-shadow: h-shadow v-shadow blur color;第一个是阴影距离左边第二个是阴影距离上面第三个是阴影的模糊距离第四个是阴影的颜色...
2020-06-12 18:29:41
314
原创 div动画特效
属性 描述 CSS@keyframes 规定动画。 3animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3animation-name 规定 @keyframes 动画的名称。 3animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 4s 3animation-timing-function 规定动画的速度曲线。默认是
2020-06-12 18:23:59
536
原创 CSS3用transform实现文字或图像的旋转、缩放、倾斜、移动的变形
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。一.旋转 rotate用法：transform: rotate(45deg);共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。二.缩放 scale用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);参数表示缩放倍数；一个参数时：表示水平和垂直同时缩
2020-06-12 18:19:16
2274
原创 CSS3 Transform的perspective属性
以下两行语句有什么区别？<div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(40deg);"><div id="animateTest" style="-webkit-transform: rotateY(40deg) perspective(400px);">如果大家不清楚，请听我娓娓道来。CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和F
2020-06-12 18:10:51
348
原创 css3中transform-origin改变元素原点位置
在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：...
2020-06-12 18:00:17
1380
原创 关于alert ,confirm,prompt的介绍
我们在做网页交互的时候往往需要用户在操作之前弹出一个提示消息框来让用户做一些点击才能继续或者放弃，这里有三种模式消息框，它们分别是alert(),confirm()和prompt()。下面我用最简单的方式和例子来做一下介绍：1、alert()–警告消息框alert 方法有一个参数，即希望对用户显示的文本字符串。该字符串不是 HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框，并且该消息框是模式对话框，也就是说，用户必须先关闭该消息框然后才能继续进行操作。例如：window.alert(“
2020-06-12 17:55:24
294
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人