Vue学习：todolist初始化列表

展示动态数据：需要有一个地方 保存这些数据 并对其进行增删改查

数据类型+名称 保存的组件 都需要考虑

一个 大数组保存 保存的每一件都是对象 对象里面一定存在的参数id 名称 标识有没有完成

在list里面： :todo="todo"是传入的参数 :的意思是传递的是可变的值 使用的变量名称为todo

变量内容是todo 是前面遍历的

<template>
    <ul class="todo-main">
        <Item v-for="todo in todos" :key="todo.id" :todo="todo"/>
       
    </ul>
</template>
<script>
    import Item from './Item'
    export default {
        name: 'List',
        data() {
            return {
                todos:[
                    {id:'0001',title:'吃饭',done:true},
                    {id:'0002',title:'打游戏',done:true},
                    {id:'0003',title:'学习',done:false},
                    {id:'0004',title:'上课',done:true},
                ],
            };
        },
        components: {
            Item,
        }

    }
</script>

item里面：接收到了数组里面的数据 使用todo接收传入的参数，然后：变量名 的值

<template>
    <li>
        <label>
            <!-- :checked动态绑定 --->
            <input type="checkbox" :checked="todo.done"/>
            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger" style="display:none">删除</button>
    </li>


</template>
<script>
    export default {
        name: 'Item',
        props:['todo']

    }