前端
Crush_In
这个作者很懒,什么都没留下…
展开
-
常见的兼容问题
不同浏览器的标签默认的margin和padding不一样。{margin:0;padding:0;}IE6双边距bug:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大。hack:display:inline;将其转化为行内属性。渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“9”这一标记,将IE浏览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。{background-color:#f1ee18原创 2020-10-05 08:57:25 · 285 阅读 · 0 评论 -
面向对象的三大特点:封装 继承 多态
面向对象的三大特点:封装 继承 多态类ES6 class 关键词定义类,必须通过new关键词来调用ES5 构造函数+原型 模拟类1>成员的属性和方法2>原型的属性和方法注:以上两种都是通过this或者是实例来调用,如果调用的方法在成员方法和属性上能找到,直接调用,成员方法上找不到,往原型对象上找,到最后都没找到,报xx is not a function3>静态的属性和方法必须通过类名调用什么是构造函数?通过new关键词调用的函数,就是构原创 2020-09-25 15:02:29 · 169 阅读 · 0 评论 -
前端你必须明白的响应式布局
响应式布局多终端(pc,m,ipad)使用一套样式结构。缺点:首次加载速度慢(使用的是一套静态资源,静态资源要做额外的适配,而且图片要兼容pc端所以尺寸过大)。增加设计难度,pc和移动没有大的改变前端如何实现响应式布局通过js计算元素的宽高,当屏幕发生改变时 window.onresize通过css的媒体查询 @mediabootstrap 就是一个ui库 (栅格系统) 1.引入类名 2.加类名m站/webapp通过手机浏览器(微信内置浏览器,safari,手机浏览器,谷歌)访问的地址p原创 2020-09-25 14:51:57 · 273 阅读 · 0 评论 -
Vue中三种常见的组件通信
父组件向子组件通信子组件通过 props 属性,绑定父组件数据,实现双方通信子组件向父组件通信将父组件的事件在子组件中通过 $emit 触发非父子组件、兄弟组件之间的数据传递/*新建一个Vue实例作为中央事件总嫌*/let event = new Vue();/*监听事件*/event.$on('eventName', (val) => { //......do something});/*触发事件*/event.$emit('eventName', 'this is a原创 2020-09-25 10:27:22 · 236 阅读 · 0 评论 -
Vue实现Tab切换效果
通过Vue实现简单的Tab切换实现思路是点击上方的标题,下方的内容随之发生改变,上方和下方用的是两个块,是兄弟节点,所以需要点击tab标题和下方内容一一对应,基予两个模块若下标相同是一个内容实现的。Tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="App"> <ul class="tab-tilte"> <li>标题一</li> <li>原创 2020-09-24 13:55:00 · 9447 阅读 · 0 评论 -
v-model双向绑定原理 实现自定义v-model命令
v-model双向绑定原理<input type="text" v-model="变量">首先,变量值和input的value属性进行单向数据绑定,value获得了变量的值其次,通过@input="变量=$event.target.value"来将值绑定到变量上这样就实现了双向绑定<input type="text" v-model="变量">相同<input type="text" :value="变量" @input="变量=$event.target.va原创 2020-09-24 08:10:39 · 316 阅读 · 0 评论 -
Vue 生命周期(简化的不能再简化了)
beforecreate => 实例刚在内存中被创建出来,还没有初始化好 data 和 methods 属性created => 实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时页面没有创建出来beforeMount => 此时已经完成了模板的编译,但是还没有挂载到页面中mounted => 此时,已经将编译好的模板,挂载到了页面指定的容器中显示beforeUpdate => 状态更新之前执行此函数, 此时 data原创 2020-09-23 15:25:01 · 238 阅读 · 0 评论 -
Vue 中你可能用得到的指令
1. v-textv-text主要用来更新textContent,可以等同于JS的text属性2. v-html双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v-html指令。它等同于JS的innerHtml属性。3. v-prev-pre主要用来跳过这个元素和它的子元素编译过程。4. v-cloak这个指令是用来保持在元素上直到关联实例结束时进行编译。5.v-oncev-once关联的实例,只会渲染一次。6.v-ifv-if可以实现条件渲染原创 2020-09-23 09:33:46 · 155 阅读 · 0 评论