TodoList案例笔记 | 尚硅谷Vue2.0

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 -- TodoList案例

个人笔记，可运行.

目录

Public

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

src

components

MyHeader.vue

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model.trim="title" @keydown.enter="add"/>
  </div>
</template>

<script>
import nanoid from "nanoid"
export default {
  name: "MyHeader",
  props:["receive"],
  data(){
    return {
      title:''
    }
  },
  methods:{
    add(){
      if(!this.title) return alert("输入不能为空")
      let obj = {id:(new Date()).getTime().toString(),title:this.title,done:false};
      this.receive(obj);
      this.title = "";
    }
  }
};
</script>

<style scoped>
/*header*/
.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, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

MyList.vue

<template>
  <ul class="todo-main">
    <MyItem v-for="todo in todos" :key="todo.id" :todo="todo" :handleChange="handleChange" :handleDelete="handleDelete"/>
  </ul>
</template>

<script>
import MyItem from "./MyItem.vue";
export default {
  name: "MyList",
  components: {
    MyItem,
  },
  props:['todos','handleChange',"handleDelete"],
};
</script>

<style scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 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>
        <input type="checkbox" :checked="todo.done" @change="handleChange(todo.id)"/>
        <span>{{todo.title}}</span>
      </label>
      <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    </li>
</template>

<script>
export default {
    name:"MyItem",
    props:["todo","handleChange","handleDelete"],
}
</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>
      <input type="checkbox" v-model="isAll"/>
    </label>
    <span> <span>已完成{{undone}}</span> / {{total}} </span>
    <button class="btn btn-danger" @click="clearAllTodo">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "MyFooter",
  props:['todos','checkAllTodo','clearAllTodo'],
  computed:{
    total(){
      return this.todos.length
    },
    undone(){
      // 1,过滤
      // let n=0;
      // this.todos.forEach(el => {
      //   if(el.done)n++
      // });
      // return n
      
      // 2.统计
      // const x = this.todos.reduce((premtodo)=>{
      //   return pre + (todo.done ? 1: 0)
      // },0)
      // console.log(x);

      // 3.统计-简写
      return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1: 0),0)
    },
    isAll:{
      get(){
        return this.undone==this.total
      },
      set(v){
        this.checkAllTodo(v);
      }
    }
  }
};
</script>

<style scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: 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>

App.vue

<template>
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader :receive="receive" />
        <MyList :todos="todos" :handleChange="handleChange" :handleDelete="handleDelete"/>
        <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
      </div>
    </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import MyFooter from "./components/MyFooter.vue";
import MyList from "./components/MyList.vue";

export default {
  name: "App",
  components: {
    MyHeader,
    MyFooter,
    MyList,
  },
  data() {
    return {
      todos: JSON.parse(localStorage.getItem("todos")) ? JSON.parse(localStorage.getItem("todos")) : []
    }
  },
  watch:{
    todos:{
      deep:true,
      handler(v){
        localStorage.setItem("todos",JSON.stringify(v))
      }
    }
  },
  methods:{
    // 添加一个todo
    receive(obj){
      this.todos.unshift(obj);
    },
    // 勾选or取消勾选一个todo
    handleChange(id){
      this.todos.forEach((el)=>{
        if(el.id==id)el.done=!el.done;
      })
    },
    // 删除一个todo
    handleDelete(id){
      this.todos = this.todos.filter(el=>el.id!==id)
    },
    // 全选or取消全选
    checkAllTodo(v){
      this.todos.forEach((el)=>{
        el.done=v
      })
    },
    // 清除所有已经完成的todo
    clearAllTodo(){
      this.todos=this.todos.filter((el)=>{
        return !el.done
      })
    }
  }
};
</script>

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

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

posted @   槑孒  阅读(205)  评论(0)  编辑  收藏  举报
相关博文：
· Vue2学习笔记 | 基础篇
· vue3 动态加载el-icon图标
· Vue08-TodoList案例
· Vue.js TodoList案例pubsub
· Vue中 TodoList 示例： 浏览器本地存储、自定义事件
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛