- 博客(25)
- 收藏
- 关注
RSS订阅原创 es6新特性---Promise详解
Promise用来解决回调地狱的问题1、promise有三个状态：（生命周期）pending 初始状态 fulfilled 成功状态 rejected 失败状态Promise从被new出来的那一刻起，就开始了他的生命周期（Promise的状态会在[[PromiseStatus]]中体现）。初始的状态被称为Pending，这种状态表示异步操作处在挂起期，说明异步操作尚未完成。而异步操作一旦完成，Promise就被认为是settled状态了，并且会进入一下两种状态的其中一种：1.fulfil
2022-03-29 21:34:55
1635
原创 js中的this指向
函数this的指向，是在函数调用的时候来确定其指向的有以下代码，直接调用函数function aa() { console.log(this) }aa()输出的this是window，因为aa是window的方法，相当于是window调用了该方法。再看以下代码，在对象里定义方法var o = { a:1, b:function() { console.log(this) } } o.b()执行结果就是“o”这个对象
2022-03-24 22:13:02
624
原创 清除浮动原理、clear原理、bfc原理
一、clearclear 属性定义了元素的哪边上不允许出现浮动元素。并不是将浮动元素变成了非浮动的，而是将该元素左右的浮动元素放到下一行。left ：在左侧不允许浮动元素right ：在右侧不允许浮动元素both ：在左右两侧均不允许浮动元素none：默认。允许浮动元素出现在两侧。推荐使用伪元素方式清除浮动，代码如下.clearfix{ zoom: 1;/*zoom：1 触发IE hasLayout。*/ &::after{ conten.
2022-03-23 17:11:43
1474
原创 cookie、localStorage和sessionStorage详解
一、cookiecookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技术。简言之，cookie是服务器端发给客户端的文本文件；目的是用于辨别用户身份。只能储存4kb的数据，
2022-03-17 23:23:49
15847
原创 em和rem的区别
在css中，用的最多的就是px，em，rem三个长度单位，这三个单位的区别就是：px是固定的单位长度，一旦设置了就无法随页面的大小而适应改变。 em是相对长度单位，比px更具灵活性，em的长度是相对于父元素 rem的长度是相对于根元素，也就是html的字体大小一、em的使用1、子元素设置em，大小是取决于父元素字体的大小2、元素的的width，height，margin，padding用em的话是取决于该元素的font-size的大小em的继承效果1、使用em存在继承效果，每个元
2022-03-16 17:43:43
6480
4
原创 伪类和伪元素详解
CSS1和CSS2中对伪类的伪元素的区别比较模糊，CSS3对这两个概念做了相对较清晰地概念，并且在语法上也很明显的讲二者区别开。一、伪类什么是伪类？伪类用于定义元素的特殊状态例如。它可以有以下作用为元素设置鼠标悬停上时的样式 链接已点击和未点击时的样式 设置元素获得焦点的样式...
2022-03-15 23:11:31
1811
原创 flex布局讲解、BFC讲解
1、flex详解弹性布局（display:flex;）属性详解 - cdgogo - 博客园2、BFC详解面试官：请说说什么是BFC？大白话讲清楚_蛙人的博客-CSDN博客什么是BFC？看这一篇就够了_Leon的博客-CSDN博客_bfc
2022-03-15 16:15:33
666
原创 CSS3中的transition和transform属性
transform：转换，改变元素的外观，有很多方式来改变元素的外观，例如位移（translate），缩放（scale），旋转（rotate），倾斜（skew）等，它没用动画效果，数值改变元素样子立刻改变。 transition：过渡，指的是css的某个属性值如何平滑的改变，就是平常所说的动效一、transform的使用1、位移 translate(x,y)...
2022-03-14 23:07:14
5162
原创 Vue10---动画封装
在业务中我们可能对一个动画效果进行多次的使用，那么就可以对这个效果进行封装。下面进行一个简单的动画封装，效果为字体由红变成绿色,将动画效果封装成一个组件的时候，建议将实现效果写到methods里面，而不是style里，这样只需要调用此组件就可以，不必写在外部写style样式了。<template><div> <fade :show="show"> <h1 >hello world</h1> </f
2022-03-14 15:48:42
812
原创 Vue09---多个元素或组件的过渡、列表的过渡
一、多个元素之间的过渡在transition过渡动画标签里面有多个元素<templete><div> <transition mode="out-in" > <div v-if="show" key="hello">hello world</div> <div v-else key="bye">Bye world</div&g
2022-03-14 15:13:07
774
原创 Vue08---js动画与Velocity.js结合
一、动画钩子函数transition有以下钩子函数1、before-enter(el)：动画进入之前的钩子函数，默认带一个参数，为transition包裹的这个元素对象2、enter(el,done)：动画执行中的函数,done为回调函数，需手动调用（必须调用），代表动画结束。3、after-enter(el)：done函数回调完代表动画执行完毕，开始调用此钩子函数。与之对应的有动画离开的钩子函数：before-leave，leave，after-leave以下例子为，动画进入时字
2022-03-13 22:31:47
1008
原创 Vue07---vue中的css动画原理及animate.css使用
目录一、transition过渡动画原理二、使用keyframes关键帧三、在vue中使用animate.css同时使用过渡和动画一、transition过渡动画原理当元素被transition标签包裹之后，vue会自动分析被包裹的元素的css样式，然后构建一个动画的流程。在动画开始执行的瞬间会往div标签上增加两个样式：fade-enter、fade-enter-active,当动画第一帧结束开始第二帧的时候，会移除fade-enter样式，同时加上fade-e...
2022-03-13 20:48:40
2508
原创 Vue06---异步组件和动态组件
目录一、动态组件keep-alive属性二、异步组件异步组件声明路由懒加载方法一、动态组件我们在一个多标签的界面中使用 is attribute 来切换不同的组件：<component v-bind:is="currentTabComponent"></component>如果我们需要频繁的切换页面，可以使用keep-alive缓存当前组件的状态具体详见官网例子动态组件 & 异步组件 — Vue.jskeep-alive...
2022-03-11 18:07:08
306
原创 Vue05---插槽、具名插槽、作用域插槽
目录什么是插槽？1、普通插槽2、具名插槽3、作用域插槽什么是插槽？插槽就是子组件中提供给父组件的一个占位符，用<slot></slot>表示，父组件可以在使用子组件的时候在子组件内部加入任何内容，该内容将替换子组件的<slot></slot>代码如下：1、普通插槽在子组件中插入slot标签<template> <div> <span>我的名字叫：&...
2022-03-10 18:16:26
387
原创 Vue04---父子组件之间传值、非父子组件传值
一、父子组件之间传值1、单向数据流父组件向子组件传值，子组件不可修改父组件的传值。父组件向子组件传值是通过参数props方式，子组件向父组件传值是通过事件触发$emit的方式父传子具体实现：父组件通过import引入子组件，并注册，在子组件标签上添加要传递的属性，子组件通过props接收，接收有两种形式一是通过数组形式[‘要接收的属性’ ]，二是通过对象形式{ }来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收子传父具体实现：子组件通过..
2022-03-10 15:35:28
946
原创 Vue03---事件绑定和表单绑定
目录一、事件绑定1、点击事件两种写法2、阻止form表单提交的默认事件事件修饰符按键修饰符系统修饰符鼠标按键修饰符二、表单绑定vue表单绑定修饰符一、事件绑定1、点击事件两种写法@click="handleClick"@click="handleClick($event)"$event可以对dom元素进行获取或修改标签的属性2、阻止form表单提交的默认事件1.在表单上绑定事件@click="handleClick"，方法中写e
2022-03-10 11:49:10
2675
原创 Vue02---vue样式绑定、条件渲染、列表渲染
1、样式绑定第一种方式：class的对象绑定在标签上写 :class="{样式名字className: isActivated是否显示的值}"第二种方式：class的数组绑定:class="[vue的数据名字]"通过在vue实例的data中设置该数据的值来进行样式的赋值第三种方式 ： style行内样式修改:style="vue的数据属性名字styleObj"或者 :style="[styleObj,{fontSize:'20px'}]"后续在vue的date属性里定义（
2022-03-10 11:23:02
592
原创 Vue1---基础知识（基本指令，组件、生命周期，计算属性、方法、侦听器）
目录一、基本指令二、生命周期钩子三、计算属性，方法与侦听器四、组件使用细节点一、基本指令v-for 循环v-model 双向绑定v-on 事件绑定 简写@v-bind:content="item" 父组件向子组件传递参数绑定 简写：把v-bind去掉就可以v-text 代替innerText,与{{}}插值表达式有同样的效果v-html 代替innerHtml，vm.$datavm.$el $号取出来的是vue实例的属性或方法1、全局组...
2022-03-08 17:50:46
159
原创 js05---节点、元素、事件、事件冒泡
目录一、节点的概念（页面中所有的内容）二、元素的创建三、事件的绑定1、为一个元素创建多个点击事件2、绑定事件的区别四、事件的解绑五、事件冒泡六、事件总结一、节点的概念（页面中所有的内容）1、父级节点/父级元素obj.parentNodeobj.parentElement2、子节点/子元素obj.childNodes 节点比元素多obj.children第一个子节点 obj.firstChild第一个子元素 obj.fr...
2022-03-08 15:22:34
246
原创 js04---dom基础
一、基本概念二、基本操作1、onclick事件html与js分离：2、阻止超链接的默认跳转使用 return false;三、兼容代码1、设置标签innertext和textContenthtml中的文本内容使用textContent属性，火狐谷歌兼容，ie8不兼容，使用如下兼容代码可解决不兼容的属性就是undefined四、自定义属性---为了储存一些数据自定义添加的属性不能通过点语法获取出来，但可以通过getAttribute方法获取..
2022-03-08 15:14:05
172
原创 js03---内置对象
一、内置对象Math、Date、String、Array、Objec1、Mathmath.max()/math.min()--->一组数中取最大/最小的数math.ceil()---->向上取整math.floor()---->向下取整math.random()--->随机数 可以随机产生一个 [ 0 ，1） （左闭右开）之间的随机数 double类型。math.pow(x,y)--->幂运算 返回x的y次幂2、DateDate.no
2022-03-08 11:51:01
88
原创 js02---对象
一、基础1、创建对象方式1）调用系统的构造函数创建对象判断对象的类型 对象 instanceof 类型的名字instanceof 与 typeof的区别instanceof用于检测构造函数的prototype是否在某个实例对象的原型链上，返回一个布尔值typeof 返回是字符串---变量的基本类型，在引用类型中除了function类型其他都返回object工厂模式创建对象（2）自定义构造函数创建对象new一个对象的时候做了四件事：（3）字面量方式创建对象.
2022-03-07 22:53:35
252
原创 js01---函数基础
目录一、函数基础1、arguments对象伪数组2、函数的其他定义方式3、函数也是一种数据类型4、函数也可作为返回值使用一、函数基础1、arguments对象伪数组arguments.length 获取的是函数在调用的时候传入了几个参数\使用arguments对象可以获取传入的每个参数的值2、函数的其他定义方式（1）命名函数 function a()（2）匿名函数 function () 匿名函数不能直接调用（3）函数表达式 ：把一个函数...
2022-03-07 17:50:11
134
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人