目录
- 概述
- 组件总体设计
- 迁移代码 or 编写
- App.vue
- AddItem.vue
- ListPanel.vue
- ListItem.vue
- 注意事项
概述
Vue快速实现一个简单的列表增删改查:
方便演示CSS略去,效果:
能够进行简单的CRUD操作
组件总体设计
组件嵌套结构图:
红框中标注重点编写的文件:
迁移代码 or 编写
如果是代码迁移,可以根据原代码在浏览器开发者工具中抽离不同的模块
App.vue
先使用方法传递来操作跨组件数据 代替 子组件向父组件传数据
<template>
<div id="app">
<!--html标签会自动转小写,不建议使用大写字母,使用短横-代替-->
<add-item :addList="addList" />
<list-panel :list='list' :delObj="delObj"/>
<!--父组件传递数据(包括函数)给子组件-->
</div>
</template>
<script>
import AddItem from './components/AddItem.vue' //引入子组件
import ListPanel from './components/ListPanel.vue'
export default {
name: 'App', //调用组件名
components: {
AddItem,
ListPanel
},
data() {
return { //组件化data必须写成return对象的形式,不能直接写对象
list:[{id:'1',content:'test'}]
}
},
methods:{
addList(obj){
this.list.unshift(obj)//附录中查看万能数据方法
},
delObj(id){
this.list = this.list.filter(obj => obj.id!==id)
}
}
}
</script>
AddItem.vue
安装nanoid生成唯一标识符
npm i nanoid
<template>
<input type="text" placeholder="输入并回车添加" @keyup.enter='add'>
</template>
<script>
import {nanoid} from 'nanoid'
export default {
name:'AddItem',
props:['addList'],//接收父组件的数据
methods: {
add(e){
const inputObj = {id:nanoid(),content:e.target.value}
this.addList(inputObj); //调用父组件的函数方法
}
},
}
</script>
ListPanel.vue
<template>
<ul>
<!--父组件传递数据(包括函数)给子组件-->
<list-item
v-for="item in list"
:key="item.id"
:listObj = 'item'
:delObj="delObj"
/>
</ul>
</template>
<script>
import ListItem from './ListItem.vue'
export default {
name:'ListPanel',
props:['list','delObj'], //接收父组件的数据
components:{
ListItem
}
}
</script>
ListItem.vue
<template>
<li>{{listObj.content}}<button @click="deleteObj(listObj.id)">删除</button></li>
</template>
<script>
export default {
name:'ListItem',
props:['listObj','delObj'],
methods: {
deleteObj(id){
this.delObj(id)
}
},
}
</script>
<style scoped>
/* scoped属性为局部样式,避免不同组件相同名字冲突*/
li button{
display: None;
}
/* 悬浮样式,鼠标放在控件上更改背景色*/
li:hover{
background-color: #ddd;
}
li:hover button{
display: inline;
}
</style>
注意事项
- 组件名不能使用已有html标签名,如head
- 组件名使用大驼峰命名法(类似MyVue),或者关闭语法检查工具
- 浏览器会将html标签转小写,因此组件是大驼峰命名,标签是**-短横分割**
- The template root disallows ‘v-for’ directives 👉 只能有一个根元素
附:JS万能数组增删改操作命令:
语法: array.splice(index, howmany, item1, …, itemX)
参数 | 描述 |
index | 必需。整数,指定位置添加/删除项目,可使用负值从尾部开始。 |
howmany | 可选。要删除的项目数。如果设置为 0,则不会删除任何项目。 |
item1, …, itemX | 可选。要添加到数组中的新项目。 |
test = [1,2,3,4]
test.splice(0,0,666) //在数组头添加666(从第0位开始,删除0个数据,添加666)
test.splice(3,1) //删除最后一个元素 (从第3位开始删除一个元素)
test.splice(3,1,666) //修改最后一个元素为666(从第3位开始,删除一个元素,添加666)