vue中渲染数据
数组方法
- 去重
- 合并
String方法
- padStart
watch监听器
vue数据响应式
@路径处理符
element-ui
- input
- 样式穿透
vuex使用双向数据绑定
vant
- flex-shrink
- 记住列表滚动位置
- Popup 弹出层
视口单位vw，vh
动态正则
自定义组件的v-model
依赖注入

vue中渲染数据

如果从接口中获取到的数据层级较深，或者需要嵌套渲染，不推荐使用 v-for="item in data[0].xxx" 的形式
可以通过 computed 将次级的数据解析出来，再拿去进行渲染（而且自带缓存，不必频繁获取数据）

数组方法

去重

this.arr = [ ... new Set(this.arr) ]

合并

let arr = [1, 2, 3]
arr.push([4, 5])  // [1, 2, 3, [4, 5]]
let newArr = arr.concat([4, 5]) // [1, 2, 3, 4, 5] 返回新数组

String方法

padStart

用另一个字符串填充当前字符串(重复，如果需要的话)，以便产生的字符串达到给定的长度 ('1').padStart(2, '0') => '01'

watch监听器

要是想要监听对象数据类型下的某一个属性，可以：

watch: {'formData.id'() {......}
}

vue数据响应式

@路径处理符

在js文件中，@/views/user @符代表的是src目录
如果要在css或html中使用@符，需要在@前面加上~

element-ui

input

el-input 中有个@change 事件，是可以当失去焦点和键盘回车时触发，但是如果输入框里的值并没有发生改变，则blur 事件并不会被触发
如果组件没有封装的原生事件，例如@keyup 则需要使用.native 修饰符去触发到原生事件

tips: 这个 .native 是绑定的组件渲染的根元素上，如果组件封装时，外面嵌套了其他元素，则需要判断根元素是否包含这个原生事件

样式穿透

在vue组件中，当style加上了scoped属性时，会给对应的样式类名添加一个唯一的data-xxx属性以做唯一区分，但想控制对应组件的样式时，就控制不到了
这时候可以在样式类前加上 /deep/ 这时的data-xxx属性就会添加到样式类名前面，不会造成影响

/deep/ .el-button {color: red;
}

vuex使用双向数据绑定

因为vuex规定必须使用mutation来修改state里的数据，所以如果想要使用v-model绑定state里的数据，肯定不能直接v-model="$store.state.xxx"
vue的官方文档里，computed计算属性包含了setter和getter，就可以借此特性对state进行双向绑定

computed: {fullName: {// getterget() {return this.$store.state.fullname},// setterset(newValue) {this.$store.commit('setName', newValue)}}
}

vant

flex-shrink

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩
我这里是不想将汉堡按钮压在标签栏上，van-tabs默认的是flex布局，并且子标签就将宽度平分占满了，所以这里想添加一个空div将最后的位置留出来

.placeholder {width: 66px;height: 82px;flex-shrink: 0;
}

记住列表滚动位置

van-tabs下的列表组件滚动位置会相互影响，原因是它们并不是独立滚动，都是body在滚动
这有一段检测页面滚动元素的代码

function findScroller(element) {element.onscroll = function() { console.log(element) }Array.from(element.chilren).forEach(findScroller)
}
findScroller(document.body)

然后给列表组件添加 overflow-y: auto; 样式，让其独立滚动

Popup 弹出层

vant 的弹出层时懒渲染的，既只有在第一次展示的时候会渲染里面的内容，而之后都是控制的显示与隐藏
如果想要每次打开弹出层拿到更新的数据，可以用 v-if 控制要更新的DOM节点

视口单位vw，vh

根据你浏览器的窗口大小指定，不受父元素的影响
1vw = 可视窗口的百分之一，以750为例，1vw = 7.5px

动态正则

// 参数1：匹配字符串  参数2：匹配模式
highLight(text) {const str = `<span style="color: #3296fa">${this.searchText}</span>`const reg = new RegExp(this.searchText, 'gi')return text.replace(reg, str)
}

自定义组件的v-model

有时我们既想传递给自定义组件数据又得修改，就得先传递一个prop，还得手动监听一个事件

<!-- 关注组件 -->
<follow-user-btnclass="follow-btn"v-model="article.is_followed":article-id="article.aut_id"
/>

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，可以通过 model 属性来修改这些默认配置

// 组件
model: {prop: 'isFollowed',event: 'update-is-followed'
}// 更新数据时，只需要触发event事件传递参数即可
this.$emit('update-is-followed', !this.isFollowed)

如果是多个参数想要同样的效果，可以使用 .sync 修饰符，如果传入一个对象，会把对象中的每一个属性都作为一个独立的 prop ，并且为其绑定独立的 v-on 监听器，不能用于字面量的对象上，例，{ title: 'title' }
v-bind.sync="obj" 如果要传对象，就直接调用 .sync 不需要在 v-bind 后面接名称

<follow-user-btn:article-id="article.aut_id"@update:title="doc.title = $event"
/>
<!-- 相当于以上代码的缩写 -->
<follow-user-btn :article-id.sync="article.aut_id" />

tips: 带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:article-id.sync="article.aut_id + 'a'" 是无效的)。

依赖注入

如果在一个页面中需要给许多子组件传递相同的数据，例如 id ，vue 给我们提供了一个好用的，可以直接给所有后代组件传递数据的方法
在根页面中定义 provide 属性来传递数据，在后代组件中用 inject 属性接收

祖先组件不需要知道哪些后代组件使用它提供的 property
后代组件不需要知道被注入的 property 来自哪里
tips: 不要滥用，不利于解耦，重构起来比较困难，并且不支持响应式

// 根页面
provide () {return {articleId: this.articleId}
}// 后代组件
inject: {articleId : {type: [Number, String, Object],default: null}
}

心酸血泪前端路，不断成长任我行，零碎知识点笔记（vue踩坑日记）相关推荐

C#零碎知识点笔记（容易混淆的一些点）
1:按CW+TAB就可以完成打印命令的快速输入: 2:声明变量的时候记得在使用的时候给这个变量一个初始化: 3:明白 CPU___内存----硬盘之间的相互关系: 4:在增加浮点数的时候要记得为 ...
「后端小伙伴来学前端了」Element修改默认样式 | 记录自己学习前端踩坑日记
一.Element修改下拉框角标就比如我最近遇上的一个问题,想要重定义 element 组件库中的下拉选择框的角标,一直不知道怎么覆盖才好. 最后才知道是由伪元素做的. 如果我们想要重定义eleme ...
iOS开发中的零碎知识点笔记韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博 1.关联 objc_setAssociatedObject关联是指把两个对象相互关联起来,使得其中的一个对象作为另外 ...
前端踩坑日记 npm install -g ...
错误代码 added 33 packages, and audited 34 packages in 896ms 3 packages are looking for funding 首先要在终端里面 ...
【踩坑日记 · 前端】为 Excalidraw 添加中文手写字体
文章目录前言中文手写字体步骤 1. 下载源代码和中文字体 2. 注册字体 3. 预加载字体资源 4. 增加字体枚举 5. 添加字体切换按钮部署测试参考资料前言 Excalidraw 是一款 ...
JAVA开发血泪之路：一步步搭建spring框架
JAVA开发血泪之路:一步步搭建spring框架作为一个服务端开发感觉一直挺排斥框架这种东西的,总觉得什么实现逻辑都帮你封装在里面了,你只需要配置这配置那个,出了问题也不知道怎么排查,之前即使写we ...
一个无名前端的10年前端路
也许是自己的关注点变了,也许是跟自己年纪相仿的同行都成了行业大牛,最近时常看到一些前端大佬的总结分享,例如<工作10年谈谈XXX>.<在阿里做了五年技术主管,XXX>.< ...
一个前端菜鸟的成长记
一个前端菜鸟的成长记现在才总结似乎有点晚,但聊胜于无,记录一下我的2016,毕业的第一年,对于人生意义重大的一年. 我的求职之路打从进入了大四之后,便深深的意识到了就业的压力,并一直在做着迈向社会 ...
JavaScript 设计模式核⼼原理与应⽤实践之开篇：前端工程师的成长论
JavaScript 设计模式核⼼原理与应⽤实践之开篇:前端工程师的成长论能够决定一个前端工程师的本质的,不是那些瞬息万变的技术点,而是那些不变的东西. 所谓"不变的东西", ...
华为WEB前端全栈成长计划招募
小编知道很多朋友对成为前端大牛有着深深的向往并有诸多技术问题希望得到解决因为市面上各种教程质量良莠不齐而且想要掌握高阶的开发技术需要耗费大量的时间和精力 So,华为特别推出 [WEB前端全栈 ...

心酸血泪前端路，不断成长任我行，零碎知识点笔记（vue踩坑日记）

目录

vue中渲染数据

数组方法

去重

合并

String方法

padStart

watch监听器

vue数据响应式

@路径处理符

element-ui

input

样式穿透

vuex使用双向数据绑定

vant

flex-shrink

记住列表滚动位置

Popup 弹出层

视口单位vw，vh

动态正则

自定义组件的v-model

依赖注入

心酸血泪前端路，不断成长任我行，零碎知识点笔记（vue踩坑日记）相关推荐

最新文章

热门文章