- 博客(27)
- 收藏
- 关注
RSS订阅原创 PROMISE
1.基本语法 new Promise((resolve, reject) => { setTimeout(()=>{/*resolve('hello world')*/ reject('error')},1000) }).then( (data)=>{console.log(data)} ).catch((err)=>{console.log(err)})2.pr
2021-10-12 21:11:47
123
原创 tabbar
1.创建脚手架2.在APP.vue中编写基本的格式 <div id="app"> <div id="tab-bar"> <div>首页</div> <div>分类</div> <div>购物车</div> <div>我的</div> </div> </div>3.引用css..
2021-10-10 21:08:25
190
原创 VUE组件思维导图-代码
父子组件通信<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...
2021-09-22 13:44:19
562
原创 组建双向绑定
实现思路：pro拿到父组建的数据并实例化 子组建中的data，再通过v-model 这里 v-model 不方便就用 :value 和 @input 绑定输入的值和更改的值。这样模板中的data就被修改了，pro改起来麻烦一点，其是父组建传下来的值，想要更改就要让子组件通过$emit 传出更改的data值，父组件接受值后 ，更改其data中的数据这样模板中子组件的data值也响应更改了.<!DOCTYPE html><html> <head> ...
2021-09-15 16:15:22
193
原创 vue 购物车实现
主页：添加或减少：移除：全部移除CSS:table { border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th, td { padding: 8px 16px; border: 1px solid #e9e9e9; text-align: left; } th { back...
2021-09-08 16:33:41
79
原创 VUE -- v-bind实现点击字体换色功能
要求使得点击的字体变色思想：1.v-for 除了可以绑定 数组的值，还可以绑定索引；基于此我们可以联想到之前ES5中，用queryselectAll获取所有li ，然后用循环遍历，通过索引绑定点击变色的事件，当然这里面可能会有闭包的问题 ，循环用let i 更好2.@click；v-on：click 可以指定一个事件行为标识符，这里直接用表达式表达了；将点击的索引赋值给acticeIndex 这样就可以绑定；3.v-bind：绑定class active，其中boolean 用ac...
2021-08-25 23:56:02
2382
原创 数组拓展（for...of、values、keys、entries）、迭代器
1.数组拓展values（）、keys（）、entries（）返回的都是一个遍历器，只要是遍历器都有for...of方法，for...of方法类似于数组里的foreachvalues（） var a=[1,2,3,4,5,6] for(let b of a.values()){ console.log(b) }keys（）返回的是键 在数组中是索引 var a=[1,2,3,4,5,6] for(let b of a..
2021-08-18 15:06:40
231
原创 SET集合、MAP、数组拓展上
Ⅰ.Set集合集合表示无重复有序的队列；如何声明： let set=new Set([1,2,3]); console.log(set);方法：1.add： set.add('qq') set.add('dd')2.delete set.delete('qq')3.has:校验某个值是否在集合中console.log(set.has(1))4.size 集合长度...
2021-08-18 13:53:16
86
原创 ES6箭头函数this指向、解构赋值、扩展对象、SYMBOL
1.箭头函数的指向箭头函数没有this的指向的在es5中 this指向可能会引起以下的问题： let pagg={ id:123, init:function(){ document.addEventListener('click',function(event){ this.dos(event.type) })
2021-08-18 00:00:52
386
原创 扩展运算符、箭头函数
1.扩展运算符 如果我们想比较两个数的大小；可以用Math.Max()函数进行操作，若我们想要比较两个函数的大小，是否也能用改函数进行操作呢？ 答案是不可以！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
2021-08-16 23:51:22
154
原创 ES6---模板字符串、默认函数剩余函数
1.模板字符串模板字符串：使用tab键上的反引号``，插入变量时使用${} <script> window.onload=function(){ var name="www" var age=18 var a=document.getElementById("f"); let dd=`<li id=${age}> ${name}<li>`; ..
2021-08-16 08:50:02
162
原创 ES6--let、const命令
1.let和const命令 在之前JavaScript中我们是如何定义一个变量的：var 比如定义一个Number类型的变量 var a=1 同时如果我想修改a的值；可以直接再定义；var a=2；前面一个值就被覆盖掉了； 在作用域中也提到过；var声明的是一个全局变量； 比如console.log(a);var a=3; 其输出的结果为：...
2021-08-13 00:11:04
92
原创 DOM查询练习
功能：1.实现全选、反选、全不选、提交的按钮功能2.实现checkbox的全选功能3.按钮功能和checkbox全选的交互对应关系示意图：代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload..
2021-08-04 16:22:27
108
原创 NBA-3D动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel=...
2021-07-21 15:15:04
191
原创 背景、雪碧图与渐变
这里面我觉得渐变不太重要了解一下就行了直到其怎么调出来即可；背景是需要着重关注的，雪碧图直到其思想即可！！（1）背景 没学背景之前我们的思想是： background-color：****；用这个来设置纯色的背景的 现在可以通过背景来引入图片啦啦啦； background-image：用这个来引入背景图片 url(*****)里面填写地址即可；...
2021-07-21 11:16:23
91
原创 京东上侧引导条（含下拉窗口）
京东网页样式成果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g..
2021-07-12 13:06:44
129
原创 CSS字体与标签字体
字体 在之前的学习中，我用到的字体有关的css样式为：font-size、color就这两个；对于前者我常用***px来控制字体的大小，其实之前也了解过em、rem两种形式的改变字体的方法； em是改变字体的大小---相对的是当前元素 rem是改变字体大小---相对根元素的 了解完了这些知识点就可以网下走了font-family这玩意就像是word里的字体样式一样，我们平时写课程报告的时候都是要用的宋体啥啥啥...
2021-07-10 14:56:00
550
原创 CSS-position定位
1.引入 写在最前面，position在实际开发使用的过程没有float多因为它过于固定，往往起不到想要的效果，但在一些情况下右必须要使用Position去布局。 平时我们想使得在界面中移动到下图的位置；显而易见可以完成该项任务过程，具体的代码实现十分显而易见:CODE： .dyg{ width:200px; height: 200px; background-col...
2021-07-09 11:57:35
144
原创 高度塌陷与BFC
1.啥叫高度塌陷？？ 因为在做开发时，网页的页面不一定是固定的，我们肯定希望有多少内容框框就有多大。块元素当然满足我们的需求；但是块元素没办法水平布局。块元素撑开父类 那是不是只要把浮动元素设置一下，让它也可以撑起父元素nei。答案是不可以；如果想让浮动元素撑开父类会有什么样子的后果nei---高度塌陷；父元素顶不住了解决方法：将父元素设置成BFC；开启BFC该元素会变成一个独立的布局区域元...
2021-07-08 23:00:40
130
原创 盒子模型补充
1.box-sizing简而言之，盒子模型是是由（margin-padding-border-盒子宽高）组成的，其中我们可见的盒子样式是不包含margin的；而box-sizing的作用是用来设置盒子尺寸的计算方式（设置width和height的作用）举一个简单的例子：可以看到该盒子的大小为160*160 这里指的是默认的：content-box默认值，宽度和高度用来设置内容区的大小如果加上box-sizing:content-box;此时盒子向内凹陷；这是侯w...
2021-07-07 21:14:17
67
原创 基于盒子模型做网易的一个小的新闻框
原来的新闻是这个样子的；最后通过模仿编写结果为这个样子：虽然感觉上还是有差距的，但差距没有上一个我做的京东那么明显了；其中有两个知识点是我在这次的操作中不熟悉并且通过视频点播才晓得的；（1）其中这一处体育；原本是一个div的块模型，红线是通过border-top实现的，但最初的结果是红线占据了整条线；这点显而易见就是块元素是独占一行的，我开始的操作是用display将其转换为inline类型这样就可以只显示在其上了；但要调整行大小，通过行内元素是不行的；要用disp
2021-07-07 08:54:51
214
原创 用HTML5+CSS3做一京东左侧项目栏
跟着B站老师学习，其中有个项目是用HTML5+CSS3做京东左侧的项目栏；用到的是盒子模型的知识。其中视频中老师用的是hav元素作为a的父元素；我用的是ul-li作为其祖先元素；总体实现的效果是差不多的；其中有两个注意点（1）line-heightli{ line-height=25px; height=25px;}该段代码设置父元素高和行高相同，使得字体呈先在正中央。（2）去除超链接下划线text-dection=none;最后是项目的总体呈现；
2021-07-06 21:06:54
405
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人