Vue零基础高效学习②：组件化CRUD增删改查 & 代码迁移

概述

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）