这是我参与「第四届青训营 」笔记创作活动的第11天
1.首页
-
不同频道间的滚动会互相影响原因为：实际滚动的为body元素
解决方案：为article组件设置一定的高度使得滚动的元素改为article元素
-
css3新增视口单位 vw和vh,不受父元素影响
1vw=可视窗口的百分之一
1vh=可视窗口高度的百分之一
-
flex:unset 意思为重置为初始值即取消flex布局
-
&:not(:last-child) 不包含最后一个子节点
-
防止外站图片获取失败
处理相对时间的第三方库
Moment.js
Day.js 更轻量
注：默认为英文 需配置中文
由于时间在很多组件中使用因此使用过滤器
定义一个全局过滤器，可以在任何组件模板中使用，相当于一个全局可用的方法
2.频道编辑
补充
-
white-space:nowrap
-
v-bind:class 语法：一个对象
对象中的key表示要作用的css类名
对象中的value要计算出布尔值
true则作用该类名，false则补作用该类名
-
// 数组的filter方法，遍历数组，把符合条件的元素储存到新数组里
return this.allChannels.filter(channel => {
return !this.Mychannels.find(mychannels => {
return mychannels.id === channel.id
})
})
-
计算属性会观测内部依赖数据的变化，若依赖的数据发生变化则计算属性会重新执行
-
数组方法之 arr.includes()方法
判断数组中是否包含括号内的内容
-
子组件需要修改父组件传向子组件中的值(即props中的值)需通过this.$emit()触发自定义事件
-
arr.splice(a,b) a:要删除的元素的索引 b:共要删几个元素
函数防抖--Lodash
debounce函数
vue组件中如何渲染带有标签的字符串
使用v-html指令可以绑定渲染带有html标签的字符串
字符串的替换方法实现搜索字符的高亮
-
str.replace(a,b) a将要被替换的字符串 b：a替换为b字符串
-
但只能替换一个 不修改原来的字符串，而是返回一个新的字符串
-
a可以使用正则表达式
-
如果需要根据数据变量动态创建正则表达式，则手动new RegExp(a,b)
- a：匹配模式字符串，根据此字符串创建正则对象
- b：匹配模式要写到字符串中
- 例： const reg=new RegExp(this.searchText,'gi') 注：g全局 i忽略大小写
