Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
具体的效果图如下:
直接上代码
vue组件
<a-input placeholder=“请输入目录名称” v-model=“addValue” @change=“inChange()” />
<a-button
type=“primary”
style=“margin-left:20px”
icon=“plus”
@click=“onAdd”
:disabled=“disabled”
新增目录
{{ item.name }}
方法
data() {
return {
policiesAndRegulationss: []
}
},
methods: {
//列表查询 处理数据格式
getRecord() {
postDataToMng(this.url.list, { pageSize: 9999 }).then(res => {
if (res.errCode == 0) {
let data = JSON.parse(res.bizContent)
for (let index = 0; index < data.policiesAndRegulationss.length; index++) {
data.policiesAndRegulationss[index].scopedSlots = { title: ‘custom’ } //遍历一级添加插槽
//二级菜单名字改为children
data.policiesAndRegulationss[index].children = data.policiesAndRegulationss[index].policiesAndRegulationsAOList
//删除原 二级菜单
delete data.policiesAndRegulationss[index].policiesAndRegulationsAOList
for (let i = 0; i < data.policiesAndRegulationss[index].children.length; i++) {
data.policiesAndRegulationss[index].children[i].scopedSlots = { title: ‘custom’ } //遍历二级添加插槽
}
}
this.policiesAndRegulationss = data.policiesAndRegulationss
console.log(this.policiesAndRegulationss);
} else {
this.$message.error(res.errMsg)
}
})
}
}
使用插槽 插入增删改查的方法
二级list必须为children
,添加插槽时需将一二级list的对象中插入scopedSlots
对象。具体实现方法参考以上代码,使用for遍历插入。
slot=“custom”
scopedSlots:{
title:‘custom’
}
数据处理格式如下
policiesAndRegulationss : [
{
title: ‘0-0-0’,
key: ‘0-0-0’,
scopedSlots:{
总结
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
0’,
key: ‘0-0-0’,
scopedSlots:{
总结
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-iBFSIEp7-1715260667448)]