VUE项目实战（一）

APP.vue

<template>
  <div class="container">
  <h1>APP根组件</h1>
  <hr>
  <TodoInput @add="addNewTask" /><br>
  <TodoButton/><br><br>
  <TodoList :todoList="todoList"/><br>

{{todoList}}
  </div>
</template>
<script>
import TodoInput from "./components/TodoInput.vue";
import TodoButton from "./components/TodoButton.vue";
import TodoList from "./components/TodoList.vue";
export default {
  name: 'App',
  components: {
    TodoInput,TodoButton,TodoList
  },
  data(){
    return{
      todoList:[
        {id:1,task:"周一早晨9点开会",done:false},
        {id:2,task:"周一晚上8点聚餐",done:true},
        {id:3,task:"准备周三上午的演讲稿",done:false},
      ]
    }
  },
  computed:{
  taskList(){
    if(this.activeBtnIndex === 1){return this.todoList.filter(value=> value.done)}
    else if(this.activeBtnIndex === 2){return this.todoList.filter(value=> !value.done)}
    else{return this.todoList}
  },
  methods:{
    addNewTask(newTask){
      this.todoList.push({
        id:this.todoList[this.todoList.length-1].id+1,
        task:newTask,
        done:false
      })
    }
  }
}
}
</script>

components：

TodoButton.vue

<template>
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-primary" @click="btnClick(0)">全部</button>
  <button type="button" class="btn btn-success" @click="btnClick(1)">已完成</button>
  <button type="button" class="btn btn-warning" @click="btnClick(2)">未完成</button>
</div>
</template>

<script>
export default {
  name: 'TodoInput',
  emits:['update:change'],
  props:['change'],
  methods:{
    btnClick(index){
      this.$$emit('update:change',index)
    }
  }
}
</script>

<style scoped>
.row{margin:15px 0;}
</style>

TodoInput.vue

<template>
    <form class="input-group flex-nowrap" @submit.prevent="formSubmit">
      <!-- .prevent 取消默认行为 -->
        <span class="input-group-text" id="addon-wrapping">任务</span>
        <input type="text" class="form-control" placeholder="请输入任务信息" 
        aria-label="Username"
        aria-describedby="addon-wrapping"
        v-model="task"/>
        <input type="submit" value="添加新任务" class="btn btn-primary"/>
    </form>
</template>

<script>
    export default {
        name: "TodoInput",
        emit:['add'],
        data(){
          return{
            task:'',
          };
        },
        methods:{
          formSubmit(){
            this.$emit('add',this.task);
            this.task=''
          }
        }
    }
</script>

<style scoped>

</style>

TodoList.vue

<template>
<ul class="uu">
  <!--eslint-disable-next-line-->
  <li class="list-group-item goleft" v-for="item in todoList" :key="item.url">
    <input class="form-check-input me-1"
    type="checkbox" 
    value="" aria-label="..." v-model="item.done"
    :id="'a'+item.id">
    <label :for="'a'+item.id" :class="{'fw-light text-decoration-line-through':item.done}">{{item.task}}</label>
    <span class="badge rounded-pill bg-success float-end" v-if="item.done">已完成</span>
    <span class="badge rounded-pill bg-warning text-dark float-end" v-else>未完成</span>
  </li>
</ul>
</template>
<script>
export default {
  name: 'TodoList',
  props:['todoList']
}

</script>

<style scoped>
.uu{padding: 0;}
</style>