Vue----任务列表案例(三)

简介: Vue----任务列表案例(三)

7.4 实现添加任务的功能

1.在 App.vue 组件中监听 TodoInput 组件自定义的 add 事件:

<!-- 使用TodoInput组件 -->
    <todo-input @add="onAddNewTask"></todo-input>

2.在 App.vue 组件的 data 中声明 nextId 来模拟 id 自增 +1 的操作:

data() {
    return {
      // 任务列表的数据
      todolist: [
        { id: 1, task: '周一早晨9点开会', done: false },
        { id: 2, task: '周一晚上8点聚餐', done: false },
        { id: 3, task: '准备周三上午的演讲稿', done: true },
      ],
      nextId: 4
    }
  },

3.在 App.vue 组件的 methods 中声明 onAddNewTask 事件处理函数如下:

methods: {
    onAddNewTask( taskname ) {
      this.todolist.push( {
        id: this.nextId,
        task: taskname,
        done: false
      } )
      this.nextId++
    }
  },

8. 封装 todo-button 组件

8.1 创建并注册 TodoButton 组件

1.在 src/components/todo-button/ 目录下新建 TodoButton.vue 组件:

<template>
  <div>
    <h3>TodoButton</h3>
  </div>
</template>
<script>
export default {
  name: 'TodoButton'
}
</script>
<style>
</style>

2.在 App.vue 组件中导入并注册 TodoButton.vue 组件:

<template>
  <div>
    <h1>App 组件</h1>
    <hr>
    <!-- 使用TodoInput组件 -->
    <todo-input @add="onAddNewTask"></todo-input>
    <!-- 使用TodoList组件 -->
    <todo-list :list="todolist"></todo-list>
    <!-- 使用TodoButton组件 -->
    <todo-button></todo-button>
  </div>
</template>
<script>
import TodoList from './components/todo-list/TodoList.vue'
import TodoInput from './components/todo-input/TodoInput.vue'
import TodoButton from './components/todo-button/TodoButton.vue'
export default {
  name: 'App',
  data() {
    return {
      // 任务列表的数据
      todolist: [
        { id: 1, task: '周一早晨9点开会', done: false },
        { id: 2, task: '周一晚上8点聚餐', done: false },
        { id: 3, task: '准备周三上午的演讲稿', done: true },
      ],
      nextId: 4
    }
  },
  methods: {
    onAddNewTask( taskname ) {
      this.todolist.push( {
        id: this.nextId,
        task: taskname,
        done: false
      } )
      this.nextId++
    }
  },
  components: {
    TodoList,
    TodoInput,
    TodoButton
  }
}
</script>
<style lang="less" scoped>
</style>

8.2 基于 bootstrap 渲染组件结构

1.根据 bootstrap 提供的 Button group(https://v4.bootcss.com/docs/components/button-group/)渲染 Todobutton 组件的基本结构。

2.在 TodoButton 组件中渲染如下的 DOM 结构:

<template>
  <div>
    <div class="btn-group" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-secondary">全部</button>
      <button type="button" class="btn btn-secondary">已完成</button>
      <button type="button" class="btn btn-secondary">未完成</button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TodoButton'
}
</script>
<style>
</style>

3.并通过 button-container 类名美化组件的样式:

<template>
  <div class="button-container">
    <div class="btn-group" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-secondary">全部</button>
      <button type="button" class="btn btn-secondary">已完成</button>
      <button type="button" class="btn btn-secondary">未完成</button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TodoButton'
}
</script>
<style lang="less" scoped>
  .button-container {
    width: 400px;
    text-align: center;
  }
</style>

8.3 通过 props 指定默认激活的按钮

1.在 TodoButton 组件中声明如下的 props,用来指定默认激活的按钮的索引:

<script>
export default {
  name: 'TodoButton',
  props: {
    active: {
      type: Number,
      required: true,
      // 默认激活索引为0的按钮
      // 0 全部,1 已完成,2 未完成
      default: 0
    }
  }
}
</script>

2.通过 动态绑定 class 类名 的方式控制按钮的激活状态:

<template>
  <div class="button-container">
    <div class="btn-group" role="group" aria-label="Basic example">
      <button 
        type="button" 
        class="btn"
        :class="active===0 ? 'btn-primary' : 'btn-secondary'"
      >全部</button>
      <button 
        type="button" 
        class="btn"
        :class="active===1 ? 'btn-primary' : 'btn-secondary'"
      >已完成</button>
      <button 
        type="button" 
        class="btn"
        :class="active===2 ? 'btn-primary' : 'btn-secondary'"
      >未完成</button>
    </div>
  </div>
</template>

3.在 App 组件中声明默认激活项的索引,并通过属性绑定的方式传递给 TodoButton 组件:

nextId: 4,
      activeBtnIndex: 0
<!-- 使用TodoButton组件 -->
    <todo-button :active="activeBtnIndex"></todo-button>

8.4 通过 v-model 更新激活项的索引

需求分析:

父 -> 子 通过 props 传递了激活项的索引(active) 子 -> 父 需要更新父组件中激活项的索引

这种场景下适合在组件上使用 v-model 指令,维护组件内外数据的同步。

1.为 TodoButton 组件中的三个按钮分别绑定 click 事件处理函数如下:

<template>
  <div class="button-container">
    <div class="btn-group" role="group" aria-label="Basic example">
      <button 
        type="button" 
        class="btn"
        :class="active===0 ? 'btn-primary' : 'btn-secondary'"
        @click="onbtnClick(0)"
      >全部</button>
      <button 
        type="button" 
        class="btn"
        :class="active===1 ? 'btn-primary' : 'btn-secondary'"
        @click="onbtnClick(1)"
      >已完成</button>
      <button 
        type="button" 
        class="btn"
        :class="active===2 ? 'btn-primary' : 'btn-secondary'"
        @click="onbtnClick(2)"
      >未完成</button>
    </div>
  </div>
</template>

2.在 TodoButton 组件中声明如下的自定义事件,用来更新父组件通过 v-model 指令传递过来的 props 数据:

<script>
export default {
  name: 'TodoButton',
  emits: ['update:active'],
  props: {
    active: {
      type: Number,
      required: true,
      // 默认激活索引为0的按钮
      // 0 全部,1 已完成,2 未完成
      default: 0
    }
  }
}
</script>

3.在 TodoButton 组件的 methods 节点中声明 onBtnClick 事件处理函数如下:

methods: {
    onbtnClick( index ) {
      // 1. 如果当前点击的按钮的索引值,等于 props 传递过来的索引值,则没必要触发 update:active 自定义事件
      if (index === this.active) return
      // 2. 通过 this.$emit() 方法触发自定义事件
      this.$emit('update:active', index)
    }
  }
<!-- 使用TodoButton组件 -->
    <todo-button v-model:active="activeBtnIndex"></todo-button>

8.5 通过计算属性动态切换列表的数据

点击不同的按钮,切换显示不同的列表数据。此时可以根据当前激活按钮的索引,动态计算出要显示的列表数据并返回即可!

1.在 App 根组件中声明如下的计算属性:

computed: {
    // 根据激活按钮的索引值,动态计算要展示的列表数据
    tasklist() {
      // 对“源数据”进行 switch...case 的匹配,并返回“计算之后的结果”
      switch (this.activeBtnIndex) {
        case 0: return this.todolist
        case 1: return this.todolist.filter(x => x.done)
        case 2: return this.todolist.filter(x => !x.done)
      }
    }
  },

2.在 App 根组件的 DOM 结构中,将 TodoList 组件的 :list=“todolist” 修改为:

<!-- 使用TodoList组件 -->
    <todo-list :list="tasklist"></todo-list>

9. 最终效果



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