todo-list案例 自定义事件

<— 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
              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))
                 }
              }
           }
       }
   </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: ''
             }
          },
          //因为使用了自定义事件addTodo，所以不需要再接受了，此处删除或者注释
          //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对象
                 //因为使用了自定义事件addTodo，此处删除或者注释
                 //this.addTodo(todo)
                 //使用this.$emit()方法
                 this.$emit('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>

<— MyFooter.vue —>

   <template>
      <div class="todo-footer" v-show="total">
           <label>
               //方法(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',
           //因为使用了自定义事件checkAllTodo、clearAllTodo，
           //所以不需要再接收了，此处删除checkAllTodo、clearAllTodo
           props:['todos'],
           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)
                //因为使用了自定义事件checkAllTodo、clearAllTodo，所以采用this.$emit()
                this.$emit('checkAllTodo',value)
             }
           }
       },
       methods:{
         //与方法(1)同用，若使用方法(2)则不需要此段代码
          checkAll(e) {
             this.checkAllTodo(e.target.checked)
          },
          clearAll() {
             //this.clearAllTodo()
             //因为使用了自定义事件checkAllTodo、clearAllTodo，所以采用this.$emit()
             this.$emit('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>