Vue2.0 Todo案例 初始化列表

之前的静态来写样式和结构

组件化编码流程(通用)

1.实现静态组件:抽取组件，使用组件实现静态页面效果

2.展示动态数据:

• 2.1.数据的类型、名称是什么？
• 2.2.数据保存在哪个组件？

3.交互–从绑定事件监听开始

动态数据

数据类型(重要)

在js里面存数据只有俩种:

• 数组类型([])
• 对象({})

这里用数据去存，里面存的值是对象

数据名称

数据保存在哪个组件

因为展示操作的都是List组件，所以存在我们自己的MyList.vue

MyList.vue

<template>
    <div>
        <ul class="todo-main">
            <MyItem v-for="todoObj in todos" :key="todoObj.id"/>
        </ul>
    </div>
</template>

<script>
    import MyItem from './MyItem.vue'
    export default{
        name: 'MyList',
        components:{MyItem},
        data(){
            return{
                todos: [
                    {id:'001', title:'吃饭', deno: true},
                    {id:'002', title:'直播', deno: true},
                    {id:'003', title:'写代码', deno: false},
                ],
            }
        }
    }
</script>

你要把数据传递给MyItem.vue,给MyItem.vue怎么传数据?

props传数据 这里的key随便写

MyList.vue

<MyItem v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj"/>

写了:里面是表达式，就会读前面的todoObj

MyItem.vue

<template>
    <div class="todo-li">
        <li>
            <label class="todo-item-label">
                <input type="checkbox" />
                <span>{{todo.title}}</span>
            </label>
            <button class="todo-delete">删除</button>
        </li>
    </div>
</template>

<script>
    export default{
        name: 'MyItem',
        components:{},
        //声明接收todo对象
        props:['todo'],
    }
</script>

动态的决定勾有没有:

<input type="checkbox" :checked="true"/>

:checked=“true” : 等于勾上了

所以可以去访问一个人(todo.deno)

<input type="checkbox" :checked="todo.deno"/>

这样你把数据全给了MyList.vue其实也不合理的

下一章