todo-list案例(二) 绑定相应事件实现动态交互

 (1). 静态页面（html+css）
 (2). 拆分组件：
       a1: 静态组件 (将静态页面中的html和css分别拆到各个对应组件中)
	   在components文件中分别创建：MyHeader.vue,MyFooter.vue,MyList.vue,MyItem.vue
	   以及App.vue
	   a2:动态组件：动态数据展示
 (3). 绑定相应事件实现动态交互

注意⚠️：所有注释中【变化】的是与前一篇文章相比较的
<— App.vue —>

   <template>
       <div id="root">
           <div class="todo-container">
               <div class="todo-wrap">
	             <MyHeader :addTodo="addTodo"/>
	             //变化三：将App中的todos传给MyList
		         <MyList 
			         :todos="todos" 
			         :checkTodo="checkTodo" 
			         :deleteTodo="deleteTodo"
		         />
		         <MyFooter 
			         :todos="todos" 
			         :checkAllTodo="checkAllTodo" 
			         :clearAllTodo="clearAllTodo"
		         />
		       </div>
	       </div>
       </div>
   </template>
   
   <script>
       import MyHeader from './components/MyHeader.vue'
       import MyList from './components/MyList.vue'
       import MyFooter from './components/MyFooter.vue'
       export default {
           name: 'App',
           components:{
              MyHeader,
              MyList,
              MyFooter
           },
           //变化二：将todos数据从MyList.vue转移至App.vue
           data(){
              return {
                 todos:[
                    {id: 001,title: '抽烟',done: true},
                    {id: 002,title: '喝酒',done: false},
                    {id: 003,title: '烫头',done: true},
                 ]
              }
           },
           methods: {
              //添加一个todo
              addTodo(todo) {
                 this.todos.unshift(todo)
              },
              //勾选或取消勾选一个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 !== todo.id
                 })
              },
              //全选 or 取消全选
              checkAllTodo(done) {
                 this.todos.foreach((todo)=> {
                      return todo.done = done
                 })
              },
              //清除所有已完成的todo
              clearAllTodo() {
                 this.todos = this.todos.filter((todo)=>{
                    return !todo.done
                 })
              }
           }
       }
   </script>

   <style>
      /*base*/
      body {
         background-color: #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>

<— MyHeader.vue —>

    <template>
       <div class="todo-header">
          //变化一：添加事件
          //方法(1)：@keyup.enter="add"  
          //方法(2)：v-model="title" 需与data中的title相呼应，所以得先在data中定义title
          <input type="text" placeholder="请输入任务名称，回车确认" 
          v-model="title" //方法(2)
          @keyup.enter="add" //方法(1)
          />
       </div>
   </template>
   
   <script>
       //先安装nanoid npm i nanoid
       //使用,因为nanoid采用的是分别暴露的形式，所以引用时加{nanoid}
       import {nanoid} from 'nanoid'
       export default {
           name: 'MyHeader',
           //方法(2)
          data() {
              return {
                 title: ''
             }
          },
          props:['addTodo']
           methods:{
              add(e) {
                 //校验数据
                 if(!this.title.trim()) {
                    return alert('任务名称不能为空！')
                 }
                 //将用户输入包装成一个todo对象
                 const todo = {
                    id: nanoid(),//id是动态添加的且唯一的，所以这里采用了nanoid插件生成
                    title: e.target.value, //方法(1)
                    title: this.title, //方法(2)  两种方法二选一即可
                    done: false
                 },
                 //通知App组件去添加一个todo对象
                 this.addTodo(todo)
                 //清空输入
                 e.target.value = '' //方法(1) 操作的是dom
                 this.title = '' //方法(2) 操作的是数据
              }
           }
       }
   </script>

   <style scoped>
      /*MyHeader*/
      .todo-header input {
         width: 560px;
         height: 28px;
         font-size: 14px;
         border: 1px solid #ccc;
         border-radius: 4px;
         padding: 4px 7px;
      }
      .todo-header input:focus {
          outline: none;
          border-color: rgba(82,168,23,0.8);
          box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,23,0.8);
      }
   </style>

<— MyList.vue —>

    <template>
       <ul class="todo-main">
          <MyItem 
	          v-for="todo in todos" 
	          :key="todo.id" 
	          :todo="todo" 
	          :checkTodo="checkTodo"
	          :deleteTodo="deleteTodo"
          />
       </ul>
   </template>
   
   <script>
       import MyItem from './components/MyItem.vue'
       export default {
           name: 'MyList',
           components:{
              MyItem
           },
           props:['todos','checkTodo','deleteTodo']
       }
   </script>

   <style scoped>
      /*main*/
      .todo-main {
         margin-left: 0px;
         border: 1px solid #ddd;
         border-radius: 2px;
         paddding: 0px;
      }
      .todo-empty {
         height: 40px;
         line-height: 40px;
         border: 1px solid #ddd;
         border-radius: 2px;
         padding-left: 5px;
         margin-top: 10px;
      }
   </style>

<— MyItem.vue —>

    <template>
       <li>
          <label>
             //变化四：勾选事件
             //方法(1)：@click
             //方法(2)：@change 
		     //方法(3)：v-model="todo.done" === :checked="todo.done" and @change="handleCheck(todo.id) 不建议使用此方法，此方法间接性的改变了props的数据，props数据只能使用，不能更改，所以此处不建议使用
             <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
             //如下代码也能实现功能，但不推荐，因为违反原则，修改了props,只不过vue没有监测到
             //<input type="checkbox" v-model="todo.done"/>
             <span>{{ todo.title }}</span>
          </label>
          //变化五：删除事件
          <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
       </li>
   </template>
   
   <script>
       export default {
           name: 'MyItem',
           props:['todo','checkTodo','deleteTodo'],
           methods:{
             //勾选 or 取消勾选
             handleCheck(id) {
                //通知App组件将对应的todo对象的done值取反
                this.checkTodo(id)
             },
             //删除
             handleDelete(id) {
                if(confirm('确定删除吗？')) {
                   this.deleteTodo(id)
                }
             }
           }
       }
   </script>

   <style scoped>
      /*item*/
      li {
         list-style: none;
         height: 36px;
         line-height: 36px;
         padding: 0 5px;
         border-bottom: 1px solid #ddd;
      }
      li label {
         float: left;
         cursor: pointer;
      }
      li label li input {
          vertical-align: middle;
          margin-right： 6px;
          position: relative;
          top: -1px;
      }
      li button {
         float: right;
         display: none;
         margin-top: 3px;
      }
      li:before {
         content: initial;
      }
      li:last-child {
         border-bottom: none;
      }
      li:hover {
        background-color: #ddd;
      }
      li:hover button {
          display: block;
      }
   </style>

<— MyFooter.vue —>

   <template>
      <div class="todo-footer" v-show="total">
           <label>
               //变化七：全选or取消全选
               //方法(1)
               <input type="checkbox" :checked="isAll" @change="checkAll"/>
               //方法(2)
               <input type="checkbox" v-model="isAll"/>
           </label> 
           <span>
              //变化六：计算已完成的数量
              <span>已完成{{ doneTotal }}</span> / 全部 {{ total }}
           </span>
           <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
      </div>
   </template>
   
   <script>
       export default {
           name: 'MyFooter',
           props:['todos','checkAllTodo','clearAllTodo'],
           computed:{
             total() {
                return this.todos.length
             },
             doneTotal() {
                //基础写法
                let i = 0;
                this.todos.forEach((todo)=>{
                   if(todo.done){
                      i++
                   }
                })
                return i

               //高级写法：es6:reduce
               const x = this.todos.reduce((pre,current)=>{
                   return pre + (current.done ? 1 : 0)
               },0)
               //高级写法的简写形式：
               return this.todos.reduce((pre,todo)=>pre + (todo.done ? 1 : 0),0)
             }
           },
           //方法(1)简写形式只被读取不被修改
           isAll() {
              return this.doneTotal === this.total && this.total > 0
           },
           //方法(2)可被修改
           isAll:{
             get(){
                return this.doneTotal === this.total && this.total > 0
             },
             set(value){
                this.checkAllTodo(value)
             }
           }
       },
       methods:{
         //与方法(1)同用，若使用方法(2)则不需要此段代码
          checkAll(e) {
             this.checkAllTodo(e.target.checked)
          },
          clearAll() {
             this.clearAllTodo()
          }
       }
   </script>

   <style scoped>
      /*footer*/
      .todo-footer {
          height: 40px;
          line-height: 40px;
          padding-left: 6px;
          margin-top: 5px;
      }
      .todo-footer label {
          dispaly: inline-block;
          margin-right: 20px;
          cursor: pointer;
      }
      .todo-footer label input {
          position; relative;
          top: -1px;
          vertical-align: middle;
          margin-right: 5px;
      }
      .todo-footer button {
          float: right;
          margin-top: 5px;
      }
   </style>

总结：组件化编码流程：
1. 实现静态组件：拆分组件【按照功能点拆分，命名不要与html元素冲突】，使用组件实现静态页面效果
2. 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是多个组件在用：
一个组件在用: 数据存放在组件自身即可
多个组件在用: 数据存放在共同的父组件上 （状态提升）
3. 实现交互 --- 从绑定事件开始
4.props:适用于：
(1) 父组件 ==> 子组件 通信
(2) 子组件 ==> 父组件 通信 [父组件需要先给子组件一个函数]
5.使用v-model时要切记：v-model绑定的值不能时props传过来的值，因为props是不能修改的
6.props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做