css3
折海棠赠晩宁.
这个作者很懒,什么都没留下…
展开
-
web前端面试题必备
1、vue数据双向绑定原理vue.js 是采用数据劫持结合发布者-订阅者的模式的方法,通过Object.defineProperty()来劫持各个属性的Getter、setter,在数据变动时发送消息给订阅者。它实现的整个流程是先为每个vue属性用Object.defineProperty()实现数据劫持,为每个属性分配一个订阅者集合的管理数组dep;然后在编译的时候在该属性的数组dep中添加订阅者,v-model就会添加一个订阅者,接着用input举例,为input添加监听事件,修改值就会为这个属性赋值原创 2020-10-12 09:21:52 · 842 阅读 · 2 评论 -
vue中的事件修饰符
常用的修饰符@事件.stop 阻止事件冒泡@事件.prevent 阻止事件默认行为@事件.capture 触发事件捕获@事件.self 当事件在该元素本身 触发回调@once 只执行一次@事件.passive 告诉浏览器你不想阻止事件的默认行为.使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用v-on:click.prevent.self会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。v-model的修饰符<1>原创 2020-09-20 21:04:18 · 131 阅读 · 0 评论 -
js的数据类型 存储
js数据类型JavaScript一共有8种数据类型:7种基本数据类型: Undefined、Null、Boolean、Number、String、Symbol(es6新增,表示独一无二的值) 和 BigInt(es10新增);1种引用数据类型: Object(Object本质上是由一组无序的名值对组成的)。里面包含 function、Array、Date等。JavaScript不支持任何创建自定义类型的机制,而所有值最终都将是上述 8 种数据类型之一。如何存储基本数据类型:直接存储在栈(sta原创 2020-09-20 20:52:21 · 188 阅读 · 0 评论 -
vue常用指令
1、v-model多用于表单元素实现双向数据绑定2、v-for循环数组或json3、v-show显示/隐藏dom元素,通过display=block/none来控制元素显示/隐藏4、v-if判断显示/隐藏 dom元素5、v-else-if必须和v-if连用6、v-else必须和v-if连用 不能单独使用 否则报错 模板编译错误7、v-bind绑定属性v-bind:class 三种绑定方法1、对象型 ‘{red:isred}’2、三元型 ‘isred原创 2020-09-16 21:42:58 · 86 阅读 · 0 评论 -
vue中的11个生命周期
BeforeCreate(创建前)该函数执行在组件创建、数据观测 (data observer) 和 event/watcher 事件配置之前,实例初始化之后被调用。在该阶段组件未创建,不能访问数据,组件中的 data,ref 均为 undefined。Created(创建后)在组件创建完成后立即调用在这一步 实例已经完成了数据观测 属性和方法的运算 watch、event事件回调但是还没有渲染成html模板 组件中的data已经存在 可以进行操作了 但是el仍然是undefiend 因为挂载原创 2020-09-16 08:25:16 · 2910 阅读 · 0 评论 -
在vue中v-if和v-show的区别与使用场景
相同点都可以动态控制着dom元素的显示隐藏区别一、基于vue框架v-if:控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show:控制DOM 的显示隐藏是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的二、性能对比v-if有更高的切换消耗;v-show有更高的初始渲染消耗三、使用场景v-if适合运营条件不大可能改变的场景下;v-show适合频繁切换;...原创 2020-09-15 20:41:27 · 148 阅读 · 0 评论 -
var与let、const的区别以及代码总结
一、声明的变量是否会挂载在window上?var声明的变量会挂载在window上,而let和const声明的变量不会代码如下:var a = 100;console.log(a,window.a); // 100 100let b = 10;console.log(b,window.b); // 10 undefinedconst c = 1;console.log(c,window.c); // 1 undefined二、是否存在变量提升?var声明变量存原创 2020-09-06 14:58:46 · 112 阅读 · 0 评论 -
JS中原型与原型链详解
1.原型的概念protoJavaScript的所有对象中都包含了一个[proto]内部属性,这个属性所对应的就是自身的原型。prototypeJavaScript的函数对象,除了原型[proto]之外,还有prototype属性,当函数对象作为构造函数创建实例时,该prototype属性值将被作为实例对象的原型[proto]constructor每个原型都有一个constructor属性,指向该关联的构造函数。2.原型链概念实例对象与原型之间的连接,叫做原型链。当一个对象调原创 2020-09-02 22:40:46 · 125 阅读 · 0 评论 -
JS继承(ES5的6种继承 and ES6新增)
ES5 有 6 种方式可以实现继承,分别为1.原型链继承父类的实例作为子类的原型原型链继承的基本思想是:利用原型让一个引用类型继承另一个引用类型的属性和方法。 //原型链继承 function Fu() { this.name = "张三"; this.age = 2; } Fu.prototype.child = function() { return this.name; }; let a = new Fu()原创 2020-09-02 20:20:56 · 139 阅读 · 0 评论 -
JS中改变this指向的方法(call和apply、bind)
导读:thisthis是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式call,apply,bindcall、apply、bind的作用是改变函数运行时this的指向。call,apply,bind 这三个函数是 Function原型上的方法 Function.prototype.call() Function.pr原创 2020-09-01 19:45:46 · 545 阅读 · 0 评论 -
js数据类型判断的四种方法
1、typeof( 返回数据类型 )返回数据类型,包含这7种: number、boolean、symbol、string、object、undefined、function。typeof 对于基本数据类型判断是没有问题的,但是遇到引用数据类型(如:Array)是不起作用2、instanceof(实例、判断对象类型)注意: instanceof 检测的是原型判断 new 关键字创建的引用数据类型不考虑 null 和 undefined(这两个比较特殊)以对象字面量创建的基本数据类型instanc原创 2020-09-01 00:13:34 · 142 阅读 · 0 评论 -
JS数据类型(8种)
注意:JS的数据类型有8种。在ES5的时候,我们认知的数据类型确实是 6种:Number、String、Boolean、undefined、object、Null。ES6 中新增了一种 Symbol。这种类型的对象永不相等,即始创建的时候传入相同的值,可以解决属性名冲突的问题,做为标记。谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。(但是很多人不把这个做为一个类型)JS数据类型:总结1、Undefined 类型只有一个值。在使用var 声明变量但未对其加初始化时,这个变量就原创 2020-09-01 00:09:02 · 216 阅读 · 0 评论 -
H5 的新特性总结
1、语义化标签:header、footer、section、nav、aside、article2、增强型表单:input的多个 type3、新增表单元素:datalist、keygen、output4、新增表单属性:placehoder、required、min 和 max5、音频视频:audio、video6、canvas绘画7、地理定位8、拖拽9、本地存储:localStorage - 没有时间限制的数据存储;sessionStorage- 针对一个 session 的数据存储,当用户关原创 2020-08-30 16:08:00 · 242 阅读 · 0 评论 -
css3动画的总结
在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些问题。CSS3 的出现,让动画变得更加容易,性能也更加好。CSS3 中有三个关于动画的样式属性transform、transition和animation;transformtransform可以用来设置元素的形状改变,主要有以下几种变形:rotate(旋转)、scale(缩放)、skew(扭曲)、translate(移动)和matrix(矩阵变形),语法如下:原创 2020-08-30 15:28:35 · 133 阅读 · 0 评论 -
如何实现水平/垂直居中?
水平居中1.行内元素如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置text-align:center 来实现的2.定宽块状元素当被设置元素为块状元素时用 text-align:center 就不起作用了。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。3.不定宽块状元素11)为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。2)为这个 table 设置“左右 margin 居中。4.不定宽块状元转载 2020-08-27 21:01:00 · 342 阅读 · 0 评论 -
如何实现两、三栏布局?
两栏布局方法一:浮动布局<style>div{ height:500px;}#aside{ width:300px; background-color:yellow; float:left;}#main{ background-color:aqua; margin-left:300px;}</style><body> <div id = "aside"> </div> <div id = "转载 2020-08-27 20:40:36 · 166 阅读 · 0 评论 -
什么是Flex布局?
一、什么是Flex布局?Flex是Flexible Box的缩写,顾名思义为“弹性布局”,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局。.box{ display:flex;}行内元素也可以使用Flex布局。.box{ display:inline-flex;}webkit内核的浏览器,必需加上-webkit前缀.box{ display:-webkit-flex; display:flex;}需要注意的是,设为flex布原创 2020-08-25 20:15:33 · 225 阅读 · 0 评论 -
什么是盒模型?【标准盒子模型和怪异盒子模型的区别?】
什么是盒子模型?在我们HTML页面中,没一个元素都可以被看作一个盒子,而这个盒子由:内容区(content)、填充区(padding)、边框区(border)、外边界区(margin)四部分组成。对于盒模型,分为标准盒模型和怪异盒模型两种。标准(W3C)盒模型在标准模式下,一个块的总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右)怪异盒模型(IE盒子模型)在怪异模式下,一个块的总宽度 = 内容的width + margin(左右)(这原创 2020-08-25 19:47:08 · 991 阅读 · 0 评论