- 博客(12)
- 收藏
- 关注
RSS订阅原创 常见的兼容问题
不同浏览器的标签默认的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
237
原创 解释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
126
原创 面向对象的三大特点：封装 继承 多态
面向对象的三大特点：封装 继承 多态类ES6 class 关键词定义类，必须通过new关键词来调用ES5 构造函数+原型 模拟类1>成员的属性和方法2>原型的属性和方法注：以上两种都是通过this或者是实例来调用,如果调用的方法在成员方法和属性上能找到，直接调用，成员方法上找不到，往原型对象上找，到最后都没找到，报xx is not a function3>静态的属性和方法必须通过类名调用什么是构造函数？通过new关键词调用的函数，就是构
2020-09-25 15:02:29
140
原创 前端你必须明白的响应式布局
响应式布局多终端（pc,m,ipad）使用一套样式结构。缺点：首次加载速度慢（使用的是一套静态资源，静态资源要做额外的适配，而且图片要兼容pc端所以尺寸过大）。增加设计难度，pc和移动没有大的改变前端如何实现响应式布局通过js计算元素的宽高，当屏幕发生改变时 window.onresize通过css的媒体查询 @mediabootstrap 就是一个ui库 （栅格系统） 1.引入类名 2.加类名m站/webapp通过手机浏览器（微信内置浏览器，safari，手机浏览器，谷歌）访问的地址p
2020-09-25 14:51:57
250
原创 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
177
原创 Vue实现Tab切换效果
通过Vue实现简单的Tab切换实现思路是点击上方的标题，下方的内容随之发生改变，上方和下方用的是两个块，是兄弟节点，所以需要点击tab标题和下方内容一一对应，基予两个模块若下标相同是一个内容实现的。Tab切换第一步先要把HTML写好，这个第一步很关键，主要分为两块结构 <div id="App"> <ul class="tab-tilte"> <li>标题一</li> <li>
2020-09-24 13:55:00
8908
原创 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
280
原创 Vue 生命周期（简化的不能再简化了）
beforecreate => 实例刚在内存中被创建出来，还没有初始化好 data 和 methods 属性created => 实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时页面没有创建出来beforeMount => 此时已经完成了模板的编译，但是还没有挂载到页面中mounted => 此时，已经将编译好的模板，挂载到了页面指定的容器中显示beforeUpdate => 状态更新之前执行此函数， 此时 data
2020-09-23 15:25:01
191
原创 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
106
原创 数组 和 字符串 的所有用法
数组的用法currentValue 必需。当前元素index 可选。当前元素的索引值arr可选。当前元素属于的数组对象currentIndex可选。当前元素的索引join()数组转字符串arrayObject.join(separator)unshift()数组开头添加，返回数组长度arrayObject.unshift(newelement1,newelement2,....,newelementX)shift()删除原数组第
2020-09-22 14:49:00
235
原创 数组去重的方法（简单易懂）
方法一：这是个没有什么技术含量的方法(使用了ES6 Set数据结构)let arr = [1,1,1,1,2,3,4,5,5,6];arr = [...new Set(arr)]; // [1,2,3,4,5,6]方法二：for循环嵌套for循环function unique(arr){ for(let i = 0; i<arr.length; i++) { for(let j = i+1; j < arr.length; j++) { if(arr[i]
2020-09-22 14:00:12
125
原创 Reac生命周期（简单易懂）
React 生命周期第一个阶段：初始创建阶段constructor() 接收父级的props，初始化state 只执行1次componentWillMount 组件渲染前 17.0 版本即将被废除了 只执行1次render 渲染 执行多次 dom创建或更新，触发render进行diff算法，比较最小化差异，进行更新componentDidMount 渲染完毕 只执行一次请求数据 获取到真实的dom第二个阶段：更新阶段props
2020-09-22 10:54:37
277
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人