使用Vue2实现Todo案例

1.项目创建，静态页面准备

1.1创建TodoHeader,TodoMain,TodoFooter三个组件并在根组件中注册并以标签的形式使用

//在Main.js入口文件中引入样式文件
import './assets/styles/bootstrap.css'
import './assets/styles/base.css'
import './assets/styles/index.css'

<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader></TodoHeader>
    <TodoMain></TodoMain>
    <TodoFooter></TodoFooter>
  </section>
</template>
​
<script>
  // 1.0 样式引入
  import "./styles/base.css"
  import "./styles/index.css"
​
  import TodoHeader from "./components/TodoHeader";
  import TodoMain from "./components/TodoMain";
  import TodoFooter from "./components/TodoFooter";
​
​
  export default {
  components: {
  TodoHeader,
  TodoMain,
  TodoFooter,
  },
  };
</script>

2.实现Todo列表的渲染

• 需求1: 把待办任务, 展示到页面TodoMain.vue组件上
• 需求2: 关联选中状态, 设置相关样式

// 在App父组件中模拟支撑业务的数据
export default {
data() {
return {
list: [
{ id: 100, name: "吃饭", state: true },
{ id: 201, name: "睡觉", state: false },
{ id: 103, name: "打豆豆", state: true },
],
};
}
};

// 在TodoMain.vue组件中接收App父组件传递过来的数据并实现渲染
<template>
  <ul class="todo-list">
    <!-- 2.2 循环任务-关联选中状态-铺设数据 -->
    <!-- completed: 完成的类名 -->
    <li :class="{completed: obj.state}" v-for="(obj, index) in arr" :key='obj.id'>
      <div class="view">
        // 实现复选框和数据的双向绑定
        <input class="toggle" type="checkbox" v-model="obj.state"/>
        <label>{{ obj.name }}</label>
        <!-- 4.0 注册点击事件 -->
        <button class="destroy"></button>
      </div>
    </li>
  </ul>
</template>
​
<script>
export default {
  props: ["list"]
};
</script>
​
<style>
</style>

3.实现Todo案例的--添加任务

• 需求: 输入任务敲击回车, 新增待办任务

// 在TodoHeader组件中使用 V-model实现输入框的双向绑定 绑定按下回车事件并把数据传给App父组件
 <template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox">
    <label for="toggle-all"></label>
    <!-- 3.0 键盘事件-回车按键
         3.1 输入框 - v-model获取值
     -->
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keydown.enter="downFn"
      v-model="task"
    />
  </header>
</template>
​
<script>
// 3. 目标 - 新增任务
export default {
  data(){
    return {
      task: ""
    }
  },
  methods: {
    downFn(){
      if (!this.task.trim())  return alert('输入的任务不能为空')
      // 3.2(重要) - 当前任务名字要加到list数组里
      // 子传父技术
      this.$emit("create", this.task)
      this.task = ""
    }
  }
}
</script>

// 在App父组件中
<TodoHeader @create="createFn"></TodoHeader>
​
methods: {
   createFn(taskName){ // 添加任务
      // 3.3 push到数组里
      let id = this.list.length == 0 ? 100 : this.list[this.list.length - 1].id + 1
      this.list.push({
        id: id,
        name: taskName,
        state: false
      })
    },
}

4.实现Todo案例任务删除

• 需求: 点击任务后的x, 删除当前这条任务

// 在TodoMain组件中通过$emit把Id传给App父组件用于实现删除功能
<!-- 4.0 注册点击事件 -->
<button class="destroy" @click="delFn(obj.id)"></button>
​
methods: {
delFn(id){
// 4.1 子传父
this.$emit('del', id)
}
}

// 在App父组件中接收Id并实现删除
<TodoMain :arr="list" @del="deleteFn"></TodoMain>
​
methods: {
deleteFn(theId){ // 删除任务
let index = this.list.findIndex(obj => obj.id === theId)
this.list.splice(index, 1)
},
},

5.Todo案例底部统计模块

• 需求: 统计当前任务的条数

// 在TodoFooter组件中使用插值表达式渲染出数量
<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{ getCount }}</strong></span>
    <ul class="filters">
      <li>
        <a class="selected" href="javascript:;">全部</a>
      </li>
      <li>
        <a href="javascript:;">未完成</a>
      </li>
      <li>
        <a href="javascript:;">已完成</a>
      </li>
    </ul>
    <button class="clear-completed">清除已完成</button>
  </footer>
</template>
​
// 在TodoFooter组件中定义Props属性接收App父组件传过来的数据
export default {
  // 5.0 props定义
  props: ['farr'],
// 使用计算属性计算出任务数量
 // 5.1 计算属性 - 任务数量
 computed: {
    getCount() {
      let count = 0
      this.farr.forEach(v => {
        if (v.state == false) {
          count++
        }
      })
      return count
    }
  },
}

// App父组件传入数据
<TodoFooter :farr="list"></TodoFooter>

6.实现Todo案例点击底部按钮实现数据切换

• 需求1: 点击底部切换 – 点谁谁有边框
• 需求2: 对应切换不同数据显示

// 在Footer组件中
<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{ count }}</strong></span>
    <ul class="filters" @click="fn">
      <li>
        <!-- 判断谁应该有高亮样式: 动态class
             用户点击要切换isSel里保存的值-->
        <a :class="{selected: isSel === 'all'}" href="javascript:;" @click="isSel='all'">全部</a>
      </li>
      <li>
        <a :class="{selected: isSel === 'no'}" href="javascript:;" @click="isSel='no'">未完成</a>
      </li>
      <li>
        <a :class="{selected: isSel === 'yes'}" href="javascript:;" @click="isSel='yes'">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" >清除已完成</button>
  </footer>
</template>
​
<script>
  export default {
  // 定义props属性接收父组件传递的数据
  props: ['farr'],
  // 定义计算属性统计任务数量
  computed: {
  count(){
  return this.farr.length
  }
  },
  // 点谁谁亮
  // 变量isSel
  data(){
  return {
  isSel: 'all' 
  }
  },
  methods: {
  fn(){ // 切换筛选条件
  // 子 -> 父 把类型字符串传给App.vue 
  this.$emit("changeType", this.isSel)
  }
  }
  }
</script>

App父组件中

<TodoFooter :farr="showArr" @changeType="typeFn"></TodoFooter>
​
<script>
  export default{
  data(){
  return {
  // 定义变量接收TodoFooter传递过来的字符串类型
  getSel: "all" // 默认显示全部
  }
  },
  methods: {
  // 把TodoFooter传递过来的字符串类型存起来
  typeFn(str){ 
  this.getSel = str
  },
  },
  // 定义计算属性进行筛选
  computed: {
  showArr(){
  if (this.getSel === 'yes') { // 显示已完成
  return this.list.filter(obj => obj.state)
  } else if (this.getSel === 'no') { // 显示未完成
  return this.list.filter(obj => !obj.state)
  } else {
  return this.list // 全部显示
  }
  }
  },
  }
</script>

7.实现Todo案例点击按钮清空已完成

// 在TodoFooter组件中
<button class="clear-completed" @click="clearFn">清除已完成</button>
​
<script>
  methods: {
  // 清空已完成任务
  clearFn(){ 
  this.$emit('clear')
  }
  }
</script>

在App父组件中
<TodoFooter :farr="showArr" @changeType="typeFn" @clear="clearFun"></TodoFooter>
​
<script>
  methods: {
  // 清除已完成
  clearFun(){ 
  this.list = this.list.filter(obj => !obj.state)
  }
  }
</script>

8.实现Todo案例本地存储

// 在App组件中
<script>
  export default {
  data(){
  return {
   默认从本地取值
  list: JSON.parse(localStorage.getItem('todoList')) || [
  { id: 1, TodoName: '吃饭', state: false },
  { id: 2, TodoName: '睡觉', state: true },
  { id: 3, TodoName: '打豆豆', state: false }
  ],
  },
  // 使用侦听器监听list的变化
  watch: {
  list: {
  deep: true,
  handler(){
  // 只要list变化 - 覆盖式保存到localStorage里
  localStorage.setItem('todoList', JSON.stringify(this.list))
  }
  }
  }
  };
</script>

9.实现Todo案例全选功能

• 需求1: 点击全选 – 小选框受到影响
• 需求2: 小选框都选中(手选) – 全选自动选中

//在App父组件中
<TodoHeader :arr="list" @create="createFn"></TodoHeader>

//在Header组件中
<input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
  <script>
    export default {
    //定义计算属性
    computed: {
    isAll: {
    set(checked){ // 只有true / false
    //影响数组里每个小选框绑定的isDone属性
    this.arr.forEach(obj => obj.state = checked)
    },
    get(){
    //小选框统计状态 -> 全选框
    //如果没有数据, 直接返回false-不要让全选勾选状态
    return this.arr.length !== 0 && this.arr.every(obj => obj.state === true)
    }
    }
    },
    }
  </script>

10.案例总结：

这个案例中用到的知识:

1️⃣组件的导入，注册以及使用

2️⃣父传子(子组件定义props属性接收父组件传过来的数据)

3️⃣计算属性的应用

4️⃣子传父(通过$emit发出自定义事件，父组件监听事件并处理)

5️⃣动态绑定样式(:class=“{类名:布尔值}”)

6️⃣v-model,v-for,v-on,v-bind等基础指令的运用

7️⃣watch侦听器的使用(实现数据缓存)

8️⃣filter,every,forEach等数组方法的运用