[Vue] TodoList 案例(二)

简介: [Vue] TodoList 案例(二)

6. 添加列表数据

随机生成id,使用nanoid,安装nanoidnpm i nanoid

导入nanoidimport {nanoid} from nanoid

使用nanoidnanoid()会返回一个唯一的字符串

修改列表数据的存放位置为App.vue,便于数据的添加。

当前数据的传递方式

添加数据:

App组件将添加待做事项的方法传递给TodoAddTask组件,TodoAddTask组件调用父组件传递过来的方法添加待做事项,由于方法真正存在的位置为App组件,相当于TodoAddTask组件只是拥有方法的使用权。

App.vue

<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <!-- 将添加待做事项的方法传入子组件中 -->
      <TodoAddTask :addTodo="addTodo"></TodoAddTask>
      <TodoList :todos="todos"></TodoList>
      <TodoSituation></TodoSituation>
    </div>
  </div>
</template>
<script>
// 导入子组件
import TodoAddTask from './components/TodoAddTask.vue'
import TodoList from './components/TodoList.vue'
import TodoSituation from './components/TodoSituation.vue'
export default {
  name: 'App',
  components: { TodoAddTask, TodoList, TodoSituation },
  data() {
    return {
      todos: [
        {id: '001', todo: '吃饭', done: true},
        {id: '002', todo: '睡觉', done: false},
        {id: '003', todo: '打豆豆', done: true}
      ]
    }
  },
  methods: {
    // 将新的待做事项添加到列表中
    addTodo(todo) {
      this.todos.unshift(todo)
    }
  },
}
</script>

TodoList.vue

<template>
  <ul class="todo-main">
    <!-- 将每个待做事项传入TodoItem -->
    <TodoItem 
      v-for="todo in todos" 
      :key="todo.id" 
      :todoObj="todo"
    ></TodoItem>    
  </ul>
</template>
<script>
// 导入子组件
import TodoItem from './TodoItem.vue'
export default {
  name: 'TodoList',
  components: {TodoItem},
  props: ['todos']
}
</script>

TodoAddTask.vue

<template>
  <div class="todo-header">
    <input 
      type="text" 
      placeholder="请输入你的任务名称,按回车键确认"
      v-model="task"
      @keydown.enter="addTask"
    />
  </div>
</template>
<script>
// 导入nanoid 
import {nanoid} from 'nanoid'
export default {
  name: 'TodoAddTask',
  props: ['addTodo'],
  data() {
    return {
      task: ''
    }
  },
  methods: {
    addTask() {
      // 没有输入不进行添加
      if (!this.task) return
      // console.log(this.task)
      // 新的待做事项
      const todo = {
        id: nanoid(),
        todo: this.task,
        done: false
      }
      // 添加待做事项
      this.addTodo(todo)
      // 输入框清空
      this.task = ''
    }
  }
}
</script>

7. 勾选

由于数据在App组件中,所以修改数据中完成状态的方法也写在App组件中,然后将方法传递给子组件调用,子组件调用方法修改勾选状态。

App.vue

<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <!-- 将添加待做事项的方法传入子组件中 -->
      <TodoAddTask :addTodo="addTodo"></TodoAddTask>
      <!-- 将数据和方法传入子组件 -->
      <TodoList 
        :todos="todos"
        :changeDone="changeDone"
      ></TodoList>
      <TodoSituation></TodoSituation>
    </div>
  </div>
</template>
<script>
// 导入子组件
import TodoAddTask from './components/TodoAddTask.vue'
import TodoList from './components/TodoList.vue'
import TodoSituation from './components/TodoSituation.vue'
export default {
  name: 'App',
  components: { TodoAddTask, TodoList, TodoSituation },
  data() {
    return {
      todos: [
        {id: '001', todo: '吃饭', done: true},
        {id: '002', todo: '睡觉', done: false},
        {id: '003', todo: '打豆豆', done: true}
      ]
    }
  },
  methods: {
    // 将新的待做事项添加到列表中
    addTodo(todo) {
      this.todos.unshift(todo)
    },
    // 修改待做事项的勾选状态
    changeDone(id) {
      this.todos.forEach((todo)=>{
        if (todo.id === id) todo.done = !todo.done
      })
    }
  },
}
</script>

TodoList.vue

<template>
  <ul class="todo-main">
    <!-- 将每个待做事项传入TodoItem -->
    <!-- 将方法传递给子组件 -->
    <TodoItem 
      v-for="todo in todos" 
      :key="todo.id" 
      :todoObj="todo"
      :changeDone="changeDone"
    ></TodoItem>    
  </ul>
</template>
<script>
// 导入子组件
import TodoItem from './TodoItem.vue'
export default {
  name: 'TodoList',
  components: {TodoItem},
  props: ['todos', 'changeDone']
}
</script>

TodoItem.vue

<template>
  <li>
    <label>
      <!-- 使用v-bind绑定checked属性,true则有这个属性,false无这个属性 -->
      <input type="checkbox" :checked="todoObj.done" @click="changeChecked"/>
      <span>{{todoObj.todo}}</span>
    </label>
    <button class="btn btn-danger" style="display:none">删除</button>
  </li>
</template>
<script>
export default {
  name: 'TodoItem',
  props: ['todoObj', 'changeDone'],
  methods: {
    // 修改勾选状态
    changeChecked() {
      this.changeDone(this.todoObj.id)
    }
  },
}
</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;
}
</style>

8. 删除

鼠标悬浮,对应的item项背景颜色改变,删除按钮显示。

TodoItem.vue

li:hover {
  background-color: #ddd;
}
li:hover button {
  display: inline-block;
}
<button class="btn btn-danger" @click="handlerDelete">删除</button>

App.vue

<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <!-- 将添加待做事项的方法传入子组件中 -->
      <TodoAddTask :addTodo="addTodo"></TodoAddTask>
      <!-- 将数据和方法传入子组件 -->
      <TodoList 
        :todos="todos"
        :changeDone="changeDone"
        :deleteTodo="deleteTodo"
      ></TodoList>
      <TodoSituation></TodoSituation>
    </div>
  </div>
</template>
<script>
// 导入子组件
import TodoAddTask from './components/TodoAddTask.vue'
import TodoList from './components/TodoList.vue'
import TodoSituation from './components/TodoSituation.vue'
export default {
  name: 'App',
  components: { TodoAddTask, TodoList, TodoSituation },
  data() {
    return {
      todos: [
        {id: '001', todo: '吃饭', done: true},
        {id: '002', todo: '睡觉', done: false},
        {id: '003', todo: '打豆豆', done: true}
      ]
    }
  },
  methods: {
    // 将新的待做事项添加到列表中
    addTodo(todo) {
      this.todos.unshift(todo)
    },
    // 修改待做事项的勾选状态
    changeDone(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 !== id
      })
    }
  },
}
</script>

TodoList.vue

<template>
  <ul class="todo-main">
    <!-- 将每个待做事项传入TodoItem -->
    <!-- 将方法传递给子组件 -->
    <TodoItem 
      v-for="todo in todos" 
      :key="todo.id" 
      :todoObj="todo"
      :changeDone="changeDone"
      :deleteTodo="deleteTodo"
    ></TodoItem>    
  </ul>
</template>
<script>
// 导入子组件
import TodoItem from './TodoItem.vue'
export default {
  name: 'TodoList',
  components: {TodoItem},
  props: ['todos', 'changeDone', 'deleteTodo']
}
</script>

TodoItem.vue

<template>
  <li>
    <label>
      <!-- 使用v-bind绑定checked属性,true则有这个属性,false无这个属性 -->
      <input type="checkbox" :checked="todoObj.done" @click="changeChecked"/>
      <span>{{todoObj.todo}}</span>
    </label>
    <button class="btn btn-danger" @click="handlerDelete">删除</button>
  </li>
</template>
<script>
export default {
  name: 'TodoItem',
  props: ['todoObj', 'changeDone', 'deleteTodo'],
  methods: {
    // 修改勾选状态
    changeChecked() {
      this.changeDone(this.todoObj.id)
    },
    // 删除
    handlerDelete() {
      // 弹出框点击确定执行if中的代码
      // 点击取消不执行
      if (confirm('确定删除吗?')) {
        this.deleteTodo(this.todoObj.id)
      }
    }
  },
}
</script>


相关文章
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
7天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
41 1
vue学习第一章
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
30 1
|
1月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
38 1
vue学习第四章
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
29 1
|
1月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
32 1
|
1月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
1月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能

热门文章

最新文章