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 368

原创解释vue的响应式原理

Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法 data 中声明的属性都被添加了访问器属性当读取 data 中的数据时自动调用 get 方法当修改 data 中的数据时自动调用 set 方法检测到数据的变化，会通知观察者 Wacher 观察者 Wacher自动触发重新render 当前组件生成新的虚拟 DOM 树 Vue 框架会遍历并对比新虚拟 DOM树和旧虚拟DOM树中每个节点的差别，并记录下来，不

2020-09-27 18:39:43 227

原创面向对象的三大特点：封装继承多态

面向对象的三大特点：封装继承多态类 ES6 class 关键词定义类，必须通过new关键词来调用 ES5 构造函数+原型模拟类 1>成员的属性和方法 2>原型的属性和方法注：以上两种都是通过this或者是实例来调用, 如果调用的方法在成员方法和属性上能找到，直接调用，成员方法上找不到，往原型对象上找，到最后都没找到，报xx is not a function 3>静态的属性和方法必须通过类名调用什么是构造函数？通过new关键词调用的函数，就是构

2020-09-25 15:02:29 229

原创前端你必须明白的响应式布局

响应式布局多终端（pc,m,ipad）使用一套样式结构。缺点：首次加载速度慢（使用的是一套静态资源，静态资源要做额外的适配，而且图片要兼容pc端所以尺寸过大）。增加设计难度，pc和移动没有大的改变前端如何实现响应式布局通过js计算元素的宽高，当屏幕发生改变时 window.onresize 通过css的媒体查询 @media bootstrap 就是一个ui库（栅格系统） 1.引入类名 2.加类名 m站/webapp 通过手机浏览器（微信内置浏览器，safari，手机浏览器，谷歌）访问的地址 p

2020-09-25 14:51:57 341

原创 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 302

原创 Vue实现Tab切换效果

通过Vue实现简单的Tab切换实现思路是点击上方的标题，下方的内容随之发生改变，上方和下方用的是两个块，是兄弟节点，所以需要点击tab标题和下方内容一一对应，基予两个模块若下标相同是一个内容实现的。 Tab切换第一步先要把HTML写好，这个第一步很关键，主要分为两块结构 <div id="App"> <ul class="tab-tilte"> <li>标题一</li> <li&gt

2020-09-24 13:55:00 9659

原创 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 418

原创 Vue 生命周期（简化的不能再简化了）

beforecreate => 实例刚在内存中被创建出来，还没有初始化好 data 和 methods 属性 created => 实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时页面没有创建出来 beforeMount => 此时已经完成了模板的编译，但是还没有挂载到页面中 mounted => 此时，已经将编译好的模板，挂载到了页面指定的容器中显示 beforeUpdate => 状态更新之前执行此函数，此时 data

2020-09-23 15:25:01 295

原创 Vue 中你可能用得到的指令

1. v-text v-text主要用来更新textContent，可以等同于JS的text属性 2. v-html 双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。 3. v-pre v-pre主要用来跳过这个元素和它的子元素编译过程。 4. v-cloak 这个指令是用来保持在元素上直到关联实例结束时进行编译。 5.v-once v-once关联的实例，只会渲染一次。 6.v-if v-if可以实现条件渲染

2020-09-23 09:33:46 210

Crush_In的博客