Todo案例

App.vue

<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader 
    @make='make'
    :all='list'
    ></TodoHeader>
    <TodoMain 
    :arr='monArr'
    ></TodoMain>
    <TodoFooter
    :arr='monArr'
    @dianji='dianji'
    @qingchu='qingchu'
    ></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./style/base.css"
import "./style/index.css"
    
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";



export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data(){
    return{
       list: JSON.parse(localStorage.getItem('lister')) || [],
      getArr:'all'
    }
  },
  methods:{
    make(val){
       let id = this.list.length === 0 ? 100 : this.list[this.list.length -1 ].id +1
       this.list.push({
         id:id,
         name:val,
         isDone:false
       })
    },
    dianji(val){
      this.getArr = val
    },
    qingchu(){
      this.list = this.list.filter(obj=>obj.isDone === false)
    }
  },
computed:{
  monArr(){
    if(this.getArr === 'no'){
     return this.list.filter(obj=>obj.isDone === false)
    }else if(this.getArr === 'yes'){
      return this.list.filter(obj =>obj.isDone === true)
    }else(this.getArr === 'all')
      return this.list
  }
},
watch:{
  list:{
    handler(){
      localStorage.setItem('lister',JSON.stringify(this.list))
    }
  }
}
};
</script>

Header.vue

<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keydown.enter="fn"
      v-model.trim="take"
    />
  </header>
</template>

<script>
export default {
  props:['all'],
 data(){
   return{
     take:'',
   }
 },
 methods:{
   fn(){
     if(this.take.length === 0) return alert('格式不对')
     this.$emit('make',this.take)
     this.take=''
   }
 },
 computed:{
   isAll:{
     set(val){
       this.all.forEach(obj =>obj.isDone = val);
     },
     get(){
      return this.all.length !==0 && this.all.every(obj =>obj.isDone ===true)
     }
   }
 }

}
</script>

Main.vue

<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <li :class="{completed:obj.isDone}" v-for="obj in arr" :key='obj.id'>
      <div class="view">
        <input class="toggle" type="checkbox" v-model="obj.isDone"/>
        <label>{{obj.name}}</label>
        <button class="destroy"></button>
      </div>
    </li>
  </ul>
  
</template>

<script>
export default {
  props:['arr']
}
</script>

Footer.vue

<template>
  <footer class="footer" @click="$emit('dianji',isSter)">
    <span class="todo-count">剩余<strong>数量值:{{arr.length}}</strong></span>
    <ul class="filters">
      <li>
        <a :class="{selected:this.isSter === 'all'}" href="javascript:;" @click="isSter = 'all'">全部</a>
      </li>
      <li>
         <a :class="{selected:this.isSter === 'no'}" href="javascript:;" @click="isSter = 'no'">未完成</a>
      </li>
      <li>
         <a :class="{selected:this.isSter === 'yes'}" href="javascript:;" @click="isSter = 'yes'">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="$emit('qingchu')">清除已完成</button>
  </footer>
</template>

<script>
export default {
    props:['arr'],
    data(){
      return{
        isSter:'all'
      }
    }
}
</script>