最后
好了,这就是整理的前端从入门到放弃的学习笔记,还有很多没有整理到,我也算是边学边去整理,后续还会慢慢完善,这些相信够你学一阵子了。
做程序员,做前端工程师,真的是一个学习就会有回报的职业,不看出身高低,不看学历强弱,只要你的技术达到应有的水准,就能够得到对应的回报。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
学习从来没有一蹴而就,都是持之以恒的,正所谓活到老学到老,真正懂得学习的人,才不会被这个时代的洪流所淘汰。
| 1 2 3 4 | <``el-table
:data="propTableData.col.filter(data => handleAdd || data.name.toLowerCase().includes(handleAdd.toLowerCase()))"
highlight-current-row
border>
</``el-table``>
|
1 2 3 4 5 6 7 8 9 | <``template slot``=``"header" slot-scope``=``"scope"``> <``el-button v-model``=``"handleAdd" size``=``"mini" type``=``"success" round plain @``click``=``"handleAdd(scope.$index, scope.row)"``>{{ $t('common.add') }}</``el-button``> </``template``> |
表头自定义了一个“添加”按钮,点击 el-table 动态添加一行。
(2) el-table 动态添加一行:
1 2 3 4 5 6 7 8 9 10 11 12 | let row = { code: ''``, maxValue: ''``, minValue: ''``, name: ''``, valueType: 'String'``, id: ''``, typeId: ''``, warning: false``, isSet: true } this``.propTableData.col.push(row) |
vue 数据变化驱动 dom 进行更新,给 table 绑定的数据 propTableData.col 添加一个元素,则表格会添加一行。
propTableData.sel 保存当前行数据:
1 | this``.propTableData.sel = row |
(3) el-table 动态删除一行:
子组件中触发父组件的 delete 事件:
1 | this``.$emit(``'delete'``, row.id) |
(4)当前行状态判断,即是否处于编辑状态,控制表格每一行的按钮元素的移除与插入:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <``template slot-scope``=``"scope"``> <``el-button size``=``"mini" type``=``"primary" round plain v-if``=``"!scope.row.isSet" @``click``=``"valChange(scope.row,scope.$index,true)"``>{{ $t('common.edit') }}</``el-button``> <``el-button size``=``"mini" type``=``"primary" round plain v-else @``click``=``"valChange(scope.row,scope.$index,true)"``>{{ $t('common.save') }}</``el-button``> <``el-button size``=``"mini" type``=``"danger" round plain v-if``=``"!scope.row.isSet" @``click``=``"handleDelete(scope.$index, scope.row)"``>{{ $t('common.delete') }}</``el-button``> <``el-button size``=``"mini" type``=``"danger" round plain v-else @``click``=``"valChange(scope.row,scope.$index,false)"``>{{ $t('common.cancel') }}</``el-button``> </``template``> |
上面代码中,通过 v-if=“scope.row.isSet” 来判断当前行是否处于编辑状态。
如果当前行处于编辑状态,则按钮为“保存”和“取消”,此时可对当前行进行保存和取消操作,且不能新增,除非先保存当前行;
如果当前行处于非编辑状态,则按钮为“编辑”和“删除”状态,此时可对当前行进行编辑和删除操作。
css
1,盒模型
2,如何实现一个最大的正方形
3,一行水平居中,多行居左
4,水平垂直居中
5,两栏布局,左边固定,右边自适应,左右不重叠
6,如何实现左右等高布局
7,画三角形
8,link @import导入css
9,BFC理解
js
1,判断 js 类型的方式
2,ES5 和 ES6 分别几种方式声明变量
3,闭包的概念?优缺点?
4,浅拷贝和深拷贝
5,数组去重的方法
6,DOM 事件有哪些阶段?谈谈对事件代理的理解
7,js 执行机制、事件循环
8,介绍下 promise.all
9,async 和 await,
10,ES6 的 class 和构造函数的区别
11,transform、translate、transition 分别是什么属性?CSS 中常用的实现动画方式,
12,介绍一下rAF(requestAnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
mg-T9zPnkcW-1715042013971)]