40vue实现TodoList案例

vue实现TodoList案例

非常重要！！！：数据在哪，操作对应数据的方法在哪！！！，不要修改props传递的数据，非要使用，请使用中间量转化。

组件化编码流程（通用）

1.实现静态组件：

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

2.展示动态数据：

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

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

总结：TodoList 案例

1.组件化编码流程:
--(1).拆分静态组件: 组件要按照功能点拆分，命名不要与html元素冲突。

​ --(2).实现动态组件: 考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用:

​ ----1).一个组件在用: 放在组件自身即可。

​ ----2).一些组件在用: 放在他们共同的父组件上 (状态提升)。

​ --(3).实现交互:从绑定事件开始。

2.props适用于:

​ --(1).父组件 ==> 子组件通信

​ --(2).子组件 ==> 父组件通信（要求父先给子 一个函数)

3.使用v-model时要切记: v-model绑定的值不能是props传过来的值，因为props是不可以修改的!

4.props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

TodoList 案例流程

1.实现静态组件：

1.分析结构：拆解组件
2.vue 创建（拆解）结构
3.vue 创建（拆解）样式

2.实现动态数据：

实例演示

App

<template>
    <div class="todo-container">
        <div class="todo-wrap">
            <MyHeader :addTodo="addTodo"></MyHeader>
            <MyList :todos="todos"></MyList>
            <MyFooter></MyFooter>
        </div>
    </div>
</template>

<script>
    import MyHeader from './components/MyHeader';
    import MyList from './components/MyList';
    import MyFooter from './components/MyFooter';

    export default {
        name:'App',
        components:{MyHeader,MyList,MyFooter},
        data(){
            return {
                todos:[
                    {tid:'001',title:'吃饭',done:true},
                    {tid:'002',title:'喝酒',done:false},
                    {tid:'003',title:'开车',done:true},
                ]
            }
        },
        methods:{
            addTodo(todo){
                // 4.将todo 添加到 todos 的首项
                this.todos.unshift(todo);       // todos 更新 unshift 触发vue， vue重新解析模板
            }
        }
    }
</script>

Header

<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="createTodo"/>
    </div>
</template>

<script>
    import {nanoid} from 'nanoid';
    export default {
        name:'MyHeader',
        data() {
            return {
                title:''
            }
        },
        methods:{
            createTodo(){
                // 1.判断title是否是有效值
                if(!this.title.trim()) return alert('请输入有效值...');
                // 2.构造todo对象
                //      - uuid 内存较大
                //      - nanoid 内存较小 nanoid()
                let todo = {tid:nanoid(),title:this.title.trim(),done:false};
                // 3.将数据传输到MyList组件(x)
                //     - 将数据传输到夫组件，通过夫组件将数据传输到MyList组件
                this.addTodo(todo);
                // 5.将输入框中的数据清空
                this.title = '';
            },
        },
        props:['addTodo']       // 夫组件将方法传递给子组件，子组件可以通过调用方法，从而引用夫组件方法，传递信息。
    }
</script>

弹窗提示信息

removeTodo(tid){
    if(confirm('你确定要删除么？')) this.deleteTodo(tid);
}