todo-list案例--新增编辑功能【vue知识点：$nextTick】

1. 语法：this.$nextTick(回调函数)
2. 作用：在下一次DOM更新结束后执行其指定的回调
3. 使用场景：当改变数据后，要基于更新后的新DOM进行某些操作时，要在$nextTick所指定的回调函数中执行

App.vue

   <template>
       <div id="root">
           <div class="todo-container">
               <div class="todo-wrap">
                 //给MyHeader组件添加自定义事件addTodo
	             <MyHeader @addTodo="addTodo"/>
		         <MyList 
			         :todos="todos" 
			         :checkTodo="checkTodo" 
			         :deleteTodo="deleteTodo"
		         />
		         //给MyFooter组件添加自定义事件checkAllTodo、clearAllTodo
		         <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
           },
           data(){
              return {
                 //不使用写死的数据，采用本地存储读取用户动态数据
                 //JSON.parse 将本地存储中的json字符串解析转化为数组形式读取
                 // || [] 防止数据为空时报错，localStorage里没有数据时页面读取的todos是null,
                 //todos没有length的属性所以一定会报错，因此 || [] 是必要的条件
                 todos: JSON.parse(localStorage.getItem('todos')) || []
              }
           },
           methods: {
              //添加一个todo
              addTodo(todo) {
                 this.todos.unshift(todo)
              },
              //勾选或取消勾选一个todo
              checkTodo(id) {
                 this.todos.forEach((todo)=> {
                    if(todo.id === id) {
                       todo.done = !todo.done
                    }
                 })
              },
              //更新一个todo
              updateTodo(id,title) {
                 this.todos.forEach((todo)=> {
                    if(todo.id === id) {
                       todo.title = title
                    }
                 })
              }
              //删除一个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
                 })
              }
           },
           //监听数据变化
           watch() {
              //这是监视的简写形式监听不到深层次（是否勾选）
              //方法（1）
              todos:(value) {
                 //将用户编辑的数据存储到本地存储localStorage中
                 //JSON.stringify将数组形式的数据转化为字符串形式存储在localStorage中
                 localStorage.setItem('todos',JSON.stringify(value))
              },
              //监视的完整形式（可以监听到是否勾选），采用方法（2）
              //方法（2）
              todos:() {
                 handler(value) {
                    deep: true, //开启深度监视
                    localStorage.setItem('todos',JSON.stringify(value))
                 }
              }
           },
           mounted() {
              this.$bus.$on('updateTodo',this.updateTodo)
           },
           beforeCreate() {
              this.$bus.$off('updateTodo')
           }
       }
   </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-edit{
         color: #fff;
         background-color: skyblue;
         border:1px solid rgb(103,159,180);
         margin-right: 5px;
      }
      .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>

MyItem.vue

    <template>
       <li>
          <label>
             <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
             //如下代码也能实现功能，但不推荐，因为违反原则，修改了props,只不过vue没有监测到
             //<input type="checkbox" v-model="todo.done"/>
             <span v-show="!todo.isEedit">{{ todo.title }}</span>
             <input 
	             v-show="todo.isEedit" 
	             type="text" 
	             :value="todo.title"
	             @blur="handleBlur(todo,$event)"
             />
          </label>
          <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
          <button 
	          class="btn btn-edit" 
	          v-show="!todo.isEedit" 
	          @click="handleEdit(todo)"
	          ref="inputTitle"
	      >编辑</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)
                }
             },
             //编辑
             handleEdit(todo) {
                //判断todo上是否存在isEdit
                if(todo.hasOwnProperty('isEdit')){
                   todo.isEdit = true
                }else {
                   //this.$set(添加的对象，添加的名称，添加的值)
                   //初次编辑的时候todo里没有isEdit,故使用this.$set()追加
                   this.$set(todo,'isEdit',true)
                }
                
                //点击编辑按钮后input自动获取焦点
                //$nextTick 所指定的回调会在dom节点更新完毕之后再执行
                this.$nextTick(function(){
                   this.$refs.inputTitle.focus()
                })
             },
             //失去焦点回调（真正执行修改逻辑）
             handleBlur(todo,e) {
                todo.isEdit = false
                if(!e.target.value.trim()){
                   return alert('输入不能为空！')
                }
                this.$bus.$emit('updateTodo',e.target.value)
             }
           }
       }
   </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>