自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(24)
  • 收藏
  • 关注

原创 【Vue】基础复习

vue基础复习watch监听器正常格式:watch:{ (要监听的数据):{ immediate:true // 自动先执行一次 deep:true // 深度监视 handler(newVal,oldVal){ ... } }}简写格式:watch:{ (要监听的数据) (newVal,oldVal){ ... }}此时不能使用immediate和deep要监视的数据:先简

2022-04-26 21:33:14 307

原创 【vue2】电商项目复习

【vue2】电商项目复习跑别人项目如果有报错,需要先执行npm i --legacy-peer-deps粘贴文件CSS样式使用.DOC文件的style样式时,因为空格原因会报错,可以先用WPS文档替换一下空格键路由传参参数分params参数路径参数query参数查询字符串想要拿到路径参数需要在路由规则的path上添加:(参数名)例如path:'/search/:keyword'1、字符串形式this.$router.push('/Search/' + this.keyword + '?

2022-04-13 21:25:03 711

原创 【Vue2】ref复习

【Vue2】ref复习ref的部分作用如同Jquery中$(''),获取标签DOM元素一样作用一:ref的出现可以在vue项目中获取标签的DOM属性,并且可以修改其样式<h1 ref='h1Ref'>哇哈哈</h1>this.$refs.h1Ref.style.color='red'注释:获取当前vue实例中ref值为h1的DOM元素,并修改其color属性作用二:ref也可以在组件中挂载,可以使用组件的各种方法父组件:<template> &l

2022-04-12 12:00:14 975

原创 【Vue2】音乐播放器

【Vue2】音乐播放器需求:1、输入关键词发起axios请求,获取播放列表2、点击播放按钮,根据点击的数据id值,发起axios请求获取音频播放路径,并在<audio>标签下的src属性使用该路径,并使黑胶唱片区域开始动画3、根据播放时的音频id值,发起axios请求获取热门留言区域4、当点击MV图标时,根据选择视频的id值发起axios请求,播放对应视频,点击空白区域暂停并退出视频遇到的问题:问题一:多次重复写了axios根路径代码不足够简洁,利用率不高,没有复用性应当

2022-04-11 20:48:20 835

原创 【Jquery】点击列表实现对应的内容展示

点击列表实现对应的内容展示需求:点击tab栏中的某个P标签,在下列展示相对应的电器解决方法:正确的方法!!!// 导航栏切换并显示效果 $('.index-nav p').on('click',function () { // 对点中的按钮添加类,其兄弟删除类 $(this).addClass('nav-active').siblings('p').removeClass('nav-active') // 定义所有的block-ico va

2022-04-10 16:52:52 1384

原创 【Jquery】按钮切换效果

按钮切换效果需求:点击按钮,实现高亮或熄灭背景:该六个盒子使用art-template渲染出来的,非流式布局,所以无法直接遍历按钮解决方法:方法一:<div class="close-btn {{$value.status ? 'is-open' : ''}}" onclick="$(this).is('.is-open') ? $(this).removeClass('is-open'): $(this).addClass('is-open');" > <i

2022-04-09 10:53:13 551

原创 【template】template复习

template使用步骤:1、导如template.js包<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>2、自定义template模板注意:模板格式<script id="tpl" type="text/html"> <!-- 遍历传入的数据 --> {{each data}} {{/each}}

2022-04-08 11:54:07 42

原创 作用域

作用域es6之前,全局作用域、局部作用域(函数作用域)全局作用域在script下定义变量在函数内部没有声明直接赋值局部作用域在函数内部下定义变量函数的形参也是局部变量执行效率1、局部变量只有在浏览器关闭时才会销毁,比较占内存2、局部变量当我们执行完毕就会销毁,比较节约内存资源作用域链就因原则JS引擎运行JS预解析变量预解析(变量提升)把var提到最前面,值不提函数与解析(函数提升)把函数声明提升到作用域最前面代码执行创建对象的三

2021-12-14 10:22:53 812

原创 函数

函数函数的概念把代码进行封装,统一调用,以后可以重复使用函数的使用1、声明函数function 函数名() { //函数体 }2、调用函数函数名();函数的参数声明函数:函数名(形参,形参,。。。)调用函数:函数名(实参,实参,。。。)函数的返回值return语句return 返回结果return 终止结果return后面不会运行 return只能返回一个值,最后的一个值break:结束当前的循环体continue:跳出

2021-12-13 09:10:21 47

原创 数组

数组把一组相关的数据存放在一起,方便访问创建空的数组var arr = new Array(); var arr[ ] ;调取数组数据arr[a,b,c,d]; console.log(arr[0]);遍历数组把数组的元素从头到尾访问一次var arr = ['red','green','biue']; for(var i =0;i < 3;i++){ console.log(arr[i]); }冒泡排序让一组数据有顺序的进行排序两个for循环 每一次大循环

2021-12-13 09:09:08 149

原创 流程控制-循环

流程控制-循环循环解决实际问题中许多有规律的重复操作for循环for语法结构for(初始化变量;条件表达式;操作表达式){ //循环体 }断点调试可以在程序中设置一个断点,调试时可以可以一步步调试观察当前的值双重for循环for(初始化变量;条件表达式;操作表达式){ for(初始化变量;条件表达式;操作表达式){ //循环体 } }while循环while (条件表达式) { //循环体 //操作表达式 }do while循环do{ 循环体 操作表达式

2021-12-13 09:08:16 42

原创 运算符

运算符常用运算符:算术运算符+、-、*、/、%先乘除后加减表达式由数字、运算符、变量等组成的式子返回值计算结果递增和递减运算符:前置递增运算符前置自增++num 等同于 num=num+1后置自增num++ 先返回值,再增加比较运算符两个数据进行比较,比较运算后,会返回一个布尔值作为比较运算的结果== 判断号(两个不同的数据类型会转换为相同的类型)!= 不等号=== 全等!== 不全等逻辑运算符&& 与

2021-12-13 09:07:42 45

原创 编程语言

编程语言机器语言:机器只识别这个语言 汇编语言 高级语言(最适合,需要一个编译器转化为计算机识别的语言)计算机组成硬盘输入设备鼠标、键盘、手写板、摄像头输出设备显示器、打印机、投影仪CPU负责处理数据与运算硬盘存储数据,永久存储内存存储数据,暂时存储软件系统软件应用软件计算机存储使用二进制表示数据数据存储单位位bit 字节Byte(八位一进) 千字节KB(1024一进位) 兆字节MB(1024一进位) 吉字节GB(1024一进位

2021-12-13 09:07:04 42

原创 HTML书写规范

HTML书写规范CSS书写顺序1、布局定位属性 display/position/float/overflow/clear/visibility2、自身属性 width/height/margin/padding/border/background3、文本属性color/font/text-decoration/text-align/vertical-align/white-space/break-word4、其他属性content/cursor/border-radius/bo

2021-12-13 09:05:59 72

原创 CSS 3D

CSS 3D形式:transform:translate3d(x,y,z);3D透视 perspectiveperspective:数值;透视写的父盒子上3D旋转 rotate形式:transform:rotateX(45deg): transform:rotateY(45deg): transform:rotateZ(45deg):3D转换 transfromtransform-style:preserver-3d; 子元素开启立体空间...

2021-12-13 09:00:40 49

原创 CSS3 2D

CSS3 2D转换 translate形式:transform:translate(x,y) transform:translateX(数值) ransform:translateY(数值)特点:1、类似定位 2、不回影响其他元素的位置 3、translate:(50%,50%)移动自身长宽的百分比旋转 rotatetransform:rotate(45deg);旋转中心:transform-origin:左右 上下;缩放 scale形式:transform:sc

2021-12-13 08:59:12 36

原创 HTML5多媒体标签

HTML5多媒体标签<audio>音频标签形式:<audio src="***.mp3"></audio> <audio controls="controls"> <source src="***.mp3" type="audio/mpeg"> <source src="***.ogg" type="audio/ogg" </audio&gt...

2021-12-13 08:58:13 75

原创 CSS高级技巧

CSS高级技巧display显示display:none; 隐藏元素,不保留位置display:block 转换为块级元素,显示元素用途做下拉菜单、JS特效visibility可见性visibility:hidden; 隐藏元素,保留位置visibility:visible; 显示元素overflow溢出overflow:hidden; 溢出的隐藏overflow:scroll; 显示滚动条overflow:auto; 智能,字数溢出时显示滚动条用途清

2021-12-13 08:56:50 106

原创 定位(三种机制之一)

定位(三种机制之一)显示在普通流和浮动之上详解定位=定位模式+边偏移语法选择器 { position:属性值;}值static 静态定位(不怎么用)none一样意思取消定位relative 相对定位给top、rifgt、botton、left值,使在最顶部可覆盖移动 原有位置大小还在absolute 绝对定位(用于父子级)1、父级无定位,子级绝对定位,则以浏览器显示区域定位 2、父级有定位,子级绝对定位,则以父级显示区域定位不保留原先位置子绝父相

2021-12-13 08:55:40 64

原创 浮动(float)

浮动(float)三种机制用CSS摆放盒子1.普通流 1)块级元素独占一行,从上向下 2)行内元素,从左到右2.浮动 让多个块级元素排成一行 3.定位浮动用法选择器 {float:属性值;}属性值:none;left;fight;浮动特点1.不会压住边框,内边距 2.在一个大盒子中,第一个盒子是普通流,第二个盒子浮动,两个盒子一行占一个(一般不给大盒子高度)清除浮动含义:使父级元素能感受到子级浮动的高度,从而把父级元素的高度从0撑开表现:选择器 {cl

2021-12-13 08:54:17 47

原创 CSS 7day

CSS高级技巧display显示display:none; 隐藏元素,不保留位置display:block 转换为块级元素,显示元素用途做下拉菜单、JS特效visibility可见性visibility:hidden; 隐藏元素,保留位置visibility:visible; 显示元素overflow溢出overflow:hidden; 溢出的隐藏overflow:scroll; 显示滚动条overflow:auto; 智能,字数溢出时显示滚动条用途清

2021-11-24 20:54:13 71

原创 定位(三种机制之一)

定位(三种机制之一)显示在普通流和浮动之上详解定位=定位模式+边偏移语法选择器 { position:属性值;}值static 静态定位(不怎么用)none一样意思取消定位relative 相对定位给top、rifgt、botton、left值,使在最顶部可覆盖移动 原有位置大小还在absolute 绝对定位(用于父子级)1、父级无定位,子级绝对定位,则以浏览器显示区域定位 2、父级有定位,子级绝对定位,则以父级显示区域定位不保留原先位置子绝父相

2021-11-23 21:19:55 50

原创 盒子模型

盒子模型1.内容2.边框 border border:大小 样式 颜色 border-collapse 合并相邻 边框3.内边距 padding: 盒子大小=“内容宽度 高度”+“内边距”+“边框”清除元素的内外边距*{padding=0; margin=0;}塌陷让小盒子在大盒子中下坠1.嵌套关系 border-top: 1px solid transparent 2.给父级指定一个上padding padding-top:1px; 3.给父级添加overflow:

2021-11-19 20:21:23 158

原创 复合选择器

复合选择器·后代选择器.父级 子级{}子元素选择器.父级>子级{}交集选择器父级.父级{}·并集选择器级,级{}链接伪类选择器a:link /未访问的链接a:visited /已访问的链接a:hover /鼠标移动到链接上a:active /选定的链接l v h a 顺序标签显示模式块内元素特点: 1.独占一行 2.可以控制高和宽 3.宽度默认是100% 4.是一个容器,你面可以放行内或块级元素p里

2021-11-18 08:54:59 34

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除