vue + vuex todolist的实现示例代码

todolist demo

最近有空重新看了一下vuex,然后又写了一个todolist小demo,原理比较简单,主要是自己规范了一下代码的写法.

下载地址 :vue-test_jb51.rar

效果图

根组件

<template>
 <div class='container'>
 <h1 class='title'>todo list demo</h1>
 <type-filter
 :types='types'
 :filter='filter'
 :handleUpdateFilter='handleUpdateFilter'
 />
 <add-todo :handleAdd='handleAdd' />
 <todo-item
 v-for='(item,index) in list'
 :key='item.id'
 :index='index'
 :data='item'
 :filter='filter'
 :handleRemove='handleRemove'
 :handleToggle='handleToggle'
 />
 </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import TypeFilter from './filter'
import AddTodo from './addTodo'
import TodoItem from './item'

const { mapState, mapMutations } = createNamespacedHelpers('TodoList')
export default {
 name: 'todo-list-demo',
 components: { TypeFilter, TodoItem, AddTodo },
 computed: {
 ...mapState(['list', 'types', 'filter'])
 },
 methods: {
 ...mapMutations([
 'handleAdd',
 'handleRemove',
 'handleToggle',
 'handleUpdateFilter'
 ])
 }
}
</script>

<style lang='scss' scoped>
@import './style.scss';
</style>

过滤条件组件

<template>
 <ul class='types'>
 <li
 v-for='(item,index) in types'
 :key='index + item'
 :class='filterClass(item)'
 @click='handleUpdateFilter(item)'
 >{{item}}</li>
 </ul>
</template>

<script>
export default {
 name: 'type-filter',
 props: ['types', 'filter', 'handleUpdateFilter'],
 methods: {
 filterClass(filter) {
 return { filter: true, active: filter === this.filter }
 }
 }
}
</script>

<style lang='scss' scoped>
@import './style.scss';
</style>

添加待办组件

<template>
 <input
 type='text'
 name='add-todo'
 id='add-todo-input'
 class='add-todo'
 @keyup.enter='add'
 placeholder='input then hit enter'
 />
</template>

<script>
export default {
 name: 'add-todo',
 props: ['handleAdd'],
 methods: {
 add(e) {
 const val = e.target.value.trim()
 if (val) {
 this.handleAdd({
  id: new Date().getTime(),
  message: val,
  status: false
 })
 e.target.value = ''
 }
 }
 }
}
</script>

<style lang='scss' scoped>
@import './style.scss';
</style>

单个待办事项组件

<template>
 <p v-if='show' class='todo-item'>
 <span
 :class='messageClass(data.status)'
 @click='handleToggle(data.id)'
 >{{index+1}}. {{data.message}}<i class='date'>{{dateFormat(data.id)}}</i></span>
 <span
 class='delete'
 @click='handleRemove(data.id)'
 >Delete</span>
 </p>
</template>

<script>
export default {
 name: 'todo-items',
 props: ['data', 'filter', 'index', 'handleRemove', 'handleToggle'],
 computed: {
 show() {
 return (
 this.filter === 'ALL' ||
 (this.filter === 'UNDO' && !this.data.status) ||
 (this.filter === 'DONE' && this.data.status)
 )
 }
 },
 methods: {
 dateFormat(time) {
 const date = new Date(time)
 return `(${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()})`
 },
 messageClass: status => ({ message: true, done: status })
 }
}
</script>

<style lang='scss' scoped>
@import './style.scss';
</style>

vuex部分(模块)

const state = {
 list: [],
 types: ['ALL', 'UNDO', 'DONE'],
 filter: 'ALL'
}
const mutations = {
 handleAdd(state, item) {
 state.list = [...state.list, item]
 },
 handleRemove(state, id) {
 state.list = state.list.filter(obj => obj.id !== id)
 },
 handleToggle(state, id) {
 state.list = state.list.map(
 obj => (obj.id === id ? { ...obj, status: !obj.status } : obj)
 )
 },
 handleUpdateFilter(state, filter) {
 state.filter = filter
 }
}
export default {
 namespaced: true,
 state,
 mutations
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue组件编写之todolist组件实例详解
  • 使用Vue完成一个简单的todolist的方法
  • vue.js todolist实现代码
  • vue实现留言板todolist功能
  • 详解Vue的computed(计算属性)使用实例之TodoList
  • vue.js实例todoList项目
  • vue2的todolist入门小项目的详细解析
  • 基于vuejs实现一个todolist项目
  • vue实现todolist单页面应用
  • vue实现ToDoList简单实例
(0)

相关推荐

  • 使用Vue完成一个简单的todolist的方法

    看了两天的Vue,还是上手写一个简单的todolist更实用(文末有彩蛋). 一.使用vue-cli脚手架快速搭建一个框架 利用vue-cli来自动生成我们项目的前端目录及文件,方法: npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev 这样我们的一个基于webpack的vue项目目录就可以快速构建好了. 目录如下: 二.完成一个简单的todolist 接下来就看一下we

  • vue实现留言板todolist功能

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet&quo

  • vue.js todolist实现代码

    案例知识点: 1.vue.js基础知识 2.HTML5 本地存储localstorage store.js代码 const STORAGE_KEY = 'todos-vue.js' export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.strin

  • vue.js实例todoList项目

    新建组件todoList.vue,在App.vue中引入 import TodoList from "./components/todoList"; export default { name: 'app', components: { TodoList } } <template> <div id="app"> <h1>TO DO LIST !</h1> <todo-list></todo-list

  • vue2的todolist入门小项目的详细解析

    看完vue2的官方文档后,找个入门项目巩固下知识点,简单的todolsit是个不错的选择. 项目用到了vue.js vue.cli webpack ES6 node环境,完成项目后会对这些技术栈有了些了解. 准备开发环境 $ npm install -g vue-cli $ vue init ,比如 vue init webpack todolist $ cd todolist $ npm install $ npm run dev 安装谷歌插件vue.js devtools 下载vue.js的

  • vue实现todolist单页面应用

    刚学习vue的小伙伴不知道从哪入手,很多网上的教程一来就搭建脚手架环境,可以新手更本看不懂,建议还是用引入script的方式引入vue.js,然后看官网的教程,再拿那这个demo练练手,也可以看看官网的demo,然后再去熟悉安装,搭建单页面应用. 效果: 功能: 在input输入文字点击按钮或者enter,下面会添加一个带复选框和文字还有删除按钮的li 用到的vue函数: data,methods,watch,还有localstorage 页面非常简单: 先写外面的盒子,这里用到v-model双

  • vue组件编写之todolist组件实例详解

    我们在topNav这个页面上插入一个todolist子组件 我不知道怎么回事,这里的markdown的代码总是串行..所以代码看得不舒服,见谅啊,我最后会放github的源代码地址. 1. 父组件topNav中注册子组件,引入子组件 <template> <div> <p>下面这一行就是定义的组件名称</p> <todo-list></todo-list> <router-view></router-view>

  • 基于vuejs实现一个todolist项目

    用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <template> <div id="app"> <h1 v-html = "title"></h1> <input v-model="newItem" v-on:keyup.enter="add

  • vue实现ToDoList简单实例

    一.需求与准备 1.准备 使用bootstrap实现页面的基础样式(依赖jquery),使用vue实现功能需要 2.功能需求 1).表单实现输入任务清单后加入到展示项中 2).点击删除按钮弹出警告框询问是否删除(bootstarp模态框插件) 3).确定删除时,删除对应项(单项删除,全部删除) 4).任务列表为空时,显示"数据为空" v-show 二.实例 1.静态页面 demo使用bootstrap来快速搭建页面 1).表单组件: .form, form-group, form-co

  • 详解Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组件的方法,不同的是vue采用的与html绑定事件. 给个例子 /*html*/ <input type="button" value="点击" v-on:click='handlClick' id="app"> /*js*/ var ap

随机推荐