Vue_Todo_list案例（第一版）、自我任务复选框

文件：

 

目录

总结：

    1.组件化编码流程

       2.props适用于：

        3.使用v-model时切记

        4.props传过来的若是对象类型的值，

一、main.js

二、App.vue

三、components

   1.Item.vue

   2.List.vue

   3.MyFooter.vue

   4.MyHeader.vue

---

总结：

    1.组件化编码流程

          ①拆分静态组件：组件要按照功能点拆分，命名不要与html冲突

          ②实现动态组件：考虑好数据存放位置，数据是一个组件在用，还是一些组件在用

              一个组件用：放在组件自身即可

              一些组件用：放在他们共同的父组件上（状态提升）

           ③实现交互：从绑定事件开始

       2.props适用于：

            父组件==》 子组件通信

             子组件==》父组件通信（要求父先给子一个函数）

        3.使用v-model时切记

             v-model绑定的值不能是props传过来的值，因为props是不可以修改的

         

        4.props传过来的若是对象类型的值，

             修改对象中的属性时Vue不会报错，但是不推荐这样做

一、main.js

// 该文件是整个项目的入口文件
 
// 引入vue，这个vue不能解析template配置项
import Vue from 'vue'
// 下面这个是引入完整版的vue。这个vue能解析template配置项
// import Vue from 'vue/dis/vue'
 
// 引入APP组件，它是所有组件的父组件
import App from './App.vue'
 
 
 
// 关闭vue的生产提示
Vue.config.productionTip = false
 
// 创建vue实例对象---vm
new Vue({
  el:'#app',
  render: h => h(App),
})

二、App.vue

 
<script>
// 引入组件
   import MyFooter from './components/MyFooter.vue'
   import MyHeader from './components/MyHeader.vue'
   import List from './components/List.vue'
   import Item from './components/Item.vue'
 
 
 
 
    export default {
        name:'App',
        // 注册组件
        components:{
            MyFooter,
            MyHeader,
            List,
            Item,
        },
        data(){
            return{
                // done:true  这个地方不要加引号，否则会能跑，被误认为字符串
                todos:[
                    {id:'001',title:'抽烟',done:true},
                    {id:'003',title:'喝酒',done:false},
                    {id:'002',title:'开车',done:true},
                ]
            }
        },
 
    methods:{
        // 添加一个todo
        addTodo(todoObj){
           this.todos.unshift(todoObj)
        },
        // 勾选or取消一个todo
        checkTodo(id){
            // 对上面的数据进行遍历
            this.todos.forEach( (todo)=>{
             if(todo.id === id){
                // 取反
                todo.done = !todo.done
             }
            })
        },
        // 删除一个todo
        deleteTodo(id){
            // 过滤器
          this.todos =  this.todos.filter((todo)=>{
            // 将符合条件的留下
            return todo.id !== id
          })
        },
        // 底部复选框，将所有的todo都按照底部复选框的形式，（底部选就都选
        checkAllTodo(done){
            this.todos.forEach((todo)=>{
                todo.done = done
            })
        },
        // 清除所有已经完成的todo
        clearAllTodo(){
           this.todos =  this.todos.filter((todo)=>{
                // 留下done为false的
                return !todo.done
            })
        }
    }
}
script>
 
<style >
    /*base*/
    body {
        background: #fff;
    }
 
    .btn {
        display: inline-block;
        padding: 4px 12px;
        margin-bottom: 0;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
    }
 
    .btn-danger {
        color: #fff;
        background-color: #da4f49;
        border: 1px solid #bd362f;
    }
 
    .btn-danger:hover {
        color: #fff;
        background-color: #bd362f;
    }
 
    .btn:focus {
        outline: none;
    }
 
    .todo-container {
        width: 600px;
        margin: 0 auto;
    }
    .todo-container .todo-wrap {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
 
style>

三、components

   1.Item.vue