![[发呆]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_4.28b310a.png)
heronCCC
获得徽章 7
赞了这篇沸点
赞了这篇文章
赞了这篇文章
赞了这篇文章
#每天一个知识点#
判断数组的方式
Object.prototype.toString.call([1, 2, 3]) // [object Array]
通过ES6的Array.isArray([1, 2, 3])做判断 // true or false
[1, 2, 3] instanceof Array // true or false
Array.prototype.isPrototypeOf([1, 2, 3]) // true or false
通过原型链去判断：[1, 2, 3].__proto__ === Array.prototype
判断数组的方式
Object.prototype.toString.call([1, 2, 3]) // [object Array]
通过ES6的Array.isArray([1, 2, 3])做判断 // true or false
[1, 2, 3] instanceof Array // true or false
Array.prototype.isPrototypeOf([1, 2, 3]) // true or false
通过原型链去判断：[1, 2, 3].__proto__ === Array.prototype
展开
评论
3
#每天一个知识点#
BFC的作用
解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题
解决高度塌陷的问题：对子元素设置浮动后，父元素会发生高度塌陷，即height变为0。只需将父元素变成一个BFC即可，常用的办法是给父元素设置overflow:hidden
创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局
BFC的作用
解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题
解决高度塌陷的问题：对子元素设置浮动后，父元素会发生高度塌陷，即height变为0。只需将父元素变成一个BFC即可，常用的办法是给父元素设置overflow:hidden
创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局
展开
评论
1
#每天一个知识点#
实现单行、多行文本溢出隐藏
单行文本溢出:
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出部分使用省略号显示
white-space: nowrap; // 规定段落中的文本不可换行
多行文本溢出:
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
实现单行、多行文本溢出隐藏
单行文本溢出:
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出部分使用省略号显示
white-space: nowrap; // 规定段落中的文本不可换行
多行文本溢出:
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
展开
评论
点赞
#每天一个知识点#
slot是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的
默认插槽
子组件用<slot>标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面。父组件在使用的时候，直接在子组件的标签内写入内容即可
具名插槽
子组件用name属性来表示插槽的名字，不传为默认插槽。父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值
作用域插槽
子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用
slot是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的
默认插槽
子组件用<slot>标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面。父组件在使用的时候，直接在子组件的标签内写入内容即可
具名插槽
子组件用name属性来表示插槽的名字，不传为默认插槽。父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值
作用域插槽
子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用
展开
评论
点赞
#每天一个知识点# 生命周期
生命周期指的是Vue组件从创建到销毁经历的一系列的过程
创建前后
beforeCreate - 组件创建之前，无法获取data中的数据
created - 组件创建完成后，可以获取数据
渲染前后
beforeMount - 组件挂载到DOM之前
mounted - 组件挂载完毕，可以获取DOM节点
更新前后
beforeUpdate - 响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染
updated - 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用
销毁前后
beforeDestroy - 实例销毁之前调用。这一步，实例仍然完全可用，this 仍能获取到实例
destroyed - 实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
生命周期指的是Vue组件从创建到销毁经历的一系列的过程
创建前后
beforeCreate - 组件创建之前，无法获取data中的数据
created - 组件创建完成后，可以获取数据
渲染前后
beforeMount - 组件挂载到DOM之前
mounted - 组件挂载完毕，可以获取DOM节点
更新前后
beforeUpdate - 响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染
updated - 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用
销毁前后
beforeDestroy - 实例销毁之前调用。这一步，实例仍然完全可用，this 仍能获取到实例
destroyed - 实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
展开
评论
点赞