- 博客(76)
- 收藏
- 关注
RSS订阅原创 inline-block相关
1.行内元素设置inline-block时，不会继承父元素的宽度，并且另起一行显示？<!-- html --><div class="box"> <span>111</span></div>/* css */.box{ width: 110px; height: 110px; padding: 10px; box-sizing: border-box; background-col
2022-04-19 16:47:24
389
原创 手写分页器组件（vue2）
效果图如下：1.首先要确认参数currentPage：当前页码；pageSize：每页有多少条数据；pageGroup：连续页码数量；total：数据总数；totalPage：总页数2.计算总页数，使用 数据总数 / 每页有多少条数据 向上取整即可。（放在computed中自动计算）computed:{ // 共有多少页 otalPage(){ return Math.ceil(this.total / this.pageSize); }.
2022-04-16 16:58:13
1258
原创 vue路由跳转，动态高亮显示问题 -- 亲测可用
在项目中遇到一个问题，就是在跳转指定路由后，动态设置高亮显示。如图然后封装了一个utils函数用来解决此问题。直接上代码：// 改变路由跳转后的高亮显示// 参数1:index下标 // 参数2:element 元素类名 // 参数3:activeName 高亮类名export default function (index, element, activeName) { // 获取所有节点,注意querySelectorAll是按顺序获取节点的. let allE
2022-04-12 21:28:34
1854
原创 JavaScript -- 对象与原型链 [[Prototype]]
一、第三章：对象1.属性描述符（数据描述符）可以使用 Object.getOwnPropertyDescriptor( myObject, "a" ); 获取myObject对象中属性a的属性描述符。举个例子var obj = { a:1}console.log(Object.getOwnPropertyDescriptor(obj,'a'));使用 Object.defineProperty( myObject, "a", { value: 2, writable:
2022-04-04 18:35:53
2000
原创 JavaScript -- this详解
一、第一章：关于this1.两个误解●this指向函数自身●this指向函数的作用域2.this究竟是什么？this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调 用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。二、第二章：this全面解析1.调用位置最重要的是要分析调用栈（就是为了到达当前执行位置所调用的所有函数）。我们关心的 调用位置就在当前正在执行的函数的前一个调用中。2.绑定规则(1)默认绑定(2)
2022-04-01 10:57:27
3068
原创 编译型语言与解释型语言
计算机只能识别二进制指令，不能直接识别由JavaScript等高级编程语言所编写的代码（源代码），所以需要将高级语言转为二进制指令。由于不同语言转换为二进制指令的时机不同，可分为编译型语言和解释性语言。一、编译型语言● 编译型语言编译型语言要求使用编译器一次性将所有源代码编译为一个可执行程序，一次编译可重复执行。代表语言有C、C++、Golang、汇编等。● 编译型语言一般不能跨平台1.编译出来的可执行程序不能跨平台：因为不同操作系统对可执行文件有着不同的要求，彼此之间不能兼容。
2022-03-28 20:17:23
13309
原创 css专项训练1
一、css单位rpx是微信小程序中的单位，属于WXSS中的单位，不属于css单位。WXSS：微信小程序中的css；WXML:微信小程序中的html；二、display:inline-block;开启BFC，不与浮动元素重叠下面代码wrap盒子的高度是多少（150px）<style type="text/css">.a, .b, .c { box-sizing: border-box; border: 1px solid;}.wrap {
2022-03-24 20:59:06
346
原创 JavaScript专项练习2--正则的exec()方法、同步与异步代码(宏、微任务)的执行顺序
一、下面代码的输出结果为（e）var str1=new RegExp("e");document.write(str1.exec("hello"));解析：exec()是正则表达式的方法，匹配字符串中满足正则的内容，将内容作为数组返回，如果没有匹配则返回null。对于这道题str.exec("hello")简易返回结果为 ['e']，但是由于document.write()会将内容写入文档流并在浏览器页面中显示，所以结果为 e 。正则表达式中还有一个text方法：RegExp.proto
2022-03-23 18:04:17
1073
原创 JavaScript专项练习1
1.如果要打开名为 “window2"的新窗口，可以通过（）window.open("http://www.w3school.com.cn","window2")解析：window.open()方法是用指定的名称将指定的资源加载到浏览器上下文中，第一个参数是url，第二个参数是名称。2.下面这段JavaScript代码的的输出是什么？var myObject = { foo: "bar", func: function() { var self = thi
2022-03-22 20:23:18
2529
2
原创 《网易云音乐小程序》开发总结
一、头部自定义导航栏将配置文件pages.json中，每个页面的style->navigationStyle设置为custom即可开启自定义导航栏。{ "pages": [ { "path": "pages/index/index", "style": { // "navigationBarTitleText": "uni-app" // 使用自定义顶部状态栏 "navigationStyle":"custom" } } ]}
2022-03-22 19:40:44
4168
原创 JS模块化
JS模块化主要有 CommenJS(node)、JS module(es6)。一、Commen JSCommen JS主要是node环境中用于模块化开发，每一个js文件都是一个模块，有自己的作用域，其中的变量和函数都是私有的，对外部js文件不可见。使用module.exports或exports关键字进行对外暴露，可以在普通的js文件中使用1.text.js中的模块 module.exports写法（以下三中写法完全一样）function a(){ console.log('a')
2022-03-16 20:55:41
2127
原创 与＜a＞标签相关的伪类
一、与a标签相关的伪类如下：1.:link表示<a>标签没有被点击时的状态。2.:visited表示<a>标签已经被点击时的状态。3.:hover表示<a>标签被鼠标移入的状态。4.:active表示<a>标签被鼠标点击时的状态。他们的生效顺序遵循“爱恨原则”（LVHA），即:link --> :visited --> :hover --> :active。对于一个未点击的连接，其具有:link和:hover两种属性，
2022-03-04 20:40:41
776
原创 CSS百分比参照问题
一、参照父元素宽度的属性下面例子共同的html和css<style> .box{ width: 400px; height: 200px; background-color: hotpink; /* 解决垂直方向外边距折叠 */ overflow: hidden; } .box1{ width:
2022-03-04 20:39:52
290
原创 Bootstrap基本使用--栅格系统
一、栅格系统1.布局容器bootstrap有两个布局容器，container和container-fluid，container布局的宽度会发生变化；container-fluid布局的宽度总是100%，主要用于移动端。2.container布局容器的宽度变化。 宽度像素范围 类前缀 container容器最大宽度 左右内边距 大屏幕（大桌面显示器） >=1200px .col-lg- 1170px 各15px 中等屏幕（桌面显示
2022-03-03 19:07:58
1013
原创 高度塌陷与垂直方向外边距重叠
一、高度塌陷1.介绍：当父元素没有设置高度时，如果子元素全部浮动，那么父元素将没有元素撑开，那么就会导致父元素高度塌陷。案例如下：<style> .wrapper{ width: 300px; border: 2px solid red; } .box1{ float: left; width: 50px; heig
2022-02-28 19:42:33
172
原创 ::before或::after伪类改变父元素高度
一、介绍当父元素设置高度为100%时，那么其伪类(::before和::after)，可以设置padding-top或padding-bottom改变父元素高度。如：父元素设置如下<style> .nav{ width: 200px; height: 100%; background-color: red; }</style><div class="father"></div>
2022-02-25 13:09:13
2459
原创 CSS--filter属性
filter属性将模糊颜色等图像效果应用于元素，主要用来调整图像，背景图片等。常用属性如下： filter: blur(15px); 设置模糊度，0表示无变化，数值越大越模糊； filter: brightness(1.3); 设置亮度，1表示无变化，小于1变暗 filter: contrast(1.3); 设置对比度，与brightness()效果差不多 filter: drop-shadow(0 0 10px b
2022-02-24 14:02:31
482
原创 div标签中文、英文、数字、字母溢出问题
1.默认情况下，div处理文字溢出（文字超过div宽度）如下：中文/英文 默认换行 数字/字母 默认不换行 2.所以需要css进行控制white-space:nowrap; 使中文/英文不换行，对数字/字母不起作用 word-break:break-all; 使数字/字母换行，对中文/英文不起作用 word-wrap: break-word; 使数字/字母换行，使中文/英文换行（默认也换行） ...
2022-02-22 14:54:32
1094
原创 Git相关整理
一、学习Git之前，先要了解一个概念：版本控制1.版本控制（revision control）是一种在开发过程中用于管理我们对文件、目录或工程的修改历史，方便查看更改历史记录，备份以便恢复以前的版本的软件工程技术。简单来说就是用于管理多人协同开发的技术。2.版本控制的分类(1)本地版本控制：指在我们自己的电脑中保存着个人对版本的修改，并不与其他电脑产生联系。(2)集中版本控制：指所有的版本都保存在公司服务器上，协同开发者需要从服务器上同步更新或上传自己的修改。如果不联网，协同开发者就看不
2022-02-18 12:28:32
335
原创 ECharts基础
一、介绍ECharts是一个基于 JavaScript 的开源可视化图表库，能够比较方便的构建柱状图、饼图、折线图等，用于数据可视化的展示。二、基本认识1.引入echarts的js文件，然后就可以获取一个名为echarts的对象，如<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>2.准备一个设置宽高的容器。<div style="wi
2022-02-14 16:56:42
2234
原创 Day.js插件的基本使用
一、介绍Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。二、使用1.基本安装npm install dayjs --save2.引入import dayjs from 'dayjs'3.一些常见的使用<script> // 获取当前日期,xxxx-xx-xx格式 dayjs().format('YYYY-MM-DD') // 或者 dayjs().startOf('day').fo
2022-02-10 14:01:58
2749
原创 SVG基础
一、介绍SVG是一种基于XML的图像文件格式，是一种缩放不会失真的矢量图。使用<svg></svg>标签来绘制形状，形状的绘制都要放在此标签中，svg默认宽度是300px，高度150px，设置宽高的时候要在css中去设置（与canvas不同）。二、基本用法1.绘制线段：line标签<!-- 绘制线段 --><line x1="100" y1="100" x2="200" y2="200" stroke="red"></line&g
2022-02-08 14:31:41
1855
原创 canvas基础
一、canvas介绍1.canvas是HTML5新增的一个双闭合标签，它目前能够提供2D图形的绘制，为数据可视化提供基础。它就相当于一块画布，js是画笔。2.canvas注意点--canvas标签浏览器默认是一张300*150像素的图片。--canvas标签内部书写的文字或其他标签等都不会显示。--canvas标签可以设置width|height属性，来确定画布的宽高，宽高不要在css中书写，因为当在canvas标签中设置width|height属性时，css中设置的宽高会无效。3.
2022-02-05 16:54:07
3045
原创 开发过程中遇到的问题解决小总结
一.小知识点1.使用vuex保存的数据，在通过路由跳转而使页面发生变化时，store中的数据并不会丢失，所以在路由跳转回来的时候数据依然存在并展示。但是如果一个页面中还有其他小组件，小组件也使用了vuex存储数据，当路由跳转此页面时，小组件中的数据虽然没有丢失，但是却不展示。...
2022-02-03 17:20:30
1205
原创 开发时解决数据回显的小方法
1.数据回显：指已经提交或未提交的数据，再次出现。如跳转进一个添加用户信息页面，在一个输入框中书写了数据“张三”，点击取消之后，再次跳转进添加用户信息页面，输入框中还未书写却已经出现张三这一问题。2.一行代码解决vue中数据回显问题Object.assign(this._data, this.$options.data());3.解释Object.assign()这个方法能够合并对象，并且会将第二个参数对象覆盖第一个参数对象的相同字段的数据，不相同的字段都会保留。然后返回值和第一个参数对象
2022-02-03 17:20:05
3594
原创 作用域插槽
1.作用域插槽也可以进行组件间的通信，当子组件不能决定组件的结构和样式的时候，就需要将父组件传递的数据以作用域插槽的形式回传给父组件，然后由父组件决定结构和样式。<li v-for="item in todos" :key="item.id"> <!-- 子组件不能决定结构和样式，将每一项传递给父组件去决定 --> <slot :todo="item"></slot></li>子组件此处的 :todo是回传的名称，并不是
2022-01-17 15:48:08
371
原创 尚硅谷-尚品汇后台管理系统项目开发总结（第一天）
1.介绍：本后台管理系统为前端后台管理系统，主要为管理员等提供操作界面。本项目基于一个后台管理系统项目模板进行二次开发：源码网站 https://github.com/PanJiaChen/vue-admin-template2.项目模板结构1.build文件夹，内部有个index.js文件，是webpack的配置文件。2.mock文件夹，mock模拟数据的文件夹。开发时是真实接口数据，因此这个文件夹以后可以删除。3.node_modules文件夹，项目依赖的模块。4.pub
2022-01-15 16:43:29
2853
1
原创 尚硅谷-尚品汇后台管理系统项目开发总结（第二天）
1.element-ui分页器相关代码：<span class="demonstration">完整功能</span> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="8" :page-sizes="[1, 3, 5, 10]" :page-size=
2022-01-15 16:43:10
1137
原创 $children与$parent
1.$children组件属性官方介绍：当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。即$children是组件自带的属性，它可以获取到当前组件的子组件，并以数组的形式返回。2.$parent官方介绍：指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。如果组件没有父组件，他的$parent为undefined，App组件(根组件)的$parent不是u
2022-01-12 14:12:41
3408
原创 v-model深入
1.v-model的基本作用v-model的基本作用是做双向数据绑定，多用于表单元素中的双向数据绑定。<!-- 双向数据绑定 --><input type="text" v-model="msg"><span>{{msg}}</span>2.VUE2中v-model的实现原理：单向数据绑定 + 原生DOM事件@input事件@input事件是在表单数据发生变化的时候被触发，然后修改数据值即可实现双向数据绑定。<!-- 不用v-
2022-01-12 14:12:16
1941
原创 .sync修饰符（vue2）
1.主要用处主要用于对props数据进行双向绑定2.用法例子：父亲有10000元，儿子每次花费100元，同步父子组件中的父亲所拥有的金钱。父组件：<span>爸爸现在有{{ money }}元</span><son :money="money" @update:money="money = $event"/>子组件：<span>小明每次花100元<button @click="$emit('update:money',m
2022-01-10 16:42:09
327
原创 组件的$attrs属性和$listeners属性
1.$attrs属性它是组件自身的一个属性，可以获取到传递给组件的所有没有用props声明接收的prop属性。当父组件传递给子组件的props数据较多时，子组件可以使用v-bind="$attrs"将所有props属性接收使用。如：父组件<new-button type="success" icon="el-icon-plus" size="mini" />子组件接收使用<el-button v-bind="$attrs"></el-button&g
2022-01-10 16:41:48
781
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人