使用vuex做一个简单的todolist案例

最新推荐文章于 2024-09-03 21:44:01 发布
最新推荐文章于 2024-09-03 21:44:01 发布
阅读量1.1k 收藏 8
点赞数 4
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenkai_lou/article/details/104582023
版权
首先使用vue搭建我们的项目

创建一个项目: vue create 项目名称
启动项目: npm run serve
安装vuex：npm install vuex
在src文件夹下创建一个store文件夹 里边创建一个index文件
引入vue和vuex并进行使用
里边写上state getters mutations actions 并进行抛出
在min.js里边引入我们的index.js
在src里创建一个文件夹和组件在这里插入图片描述
在app.vue里引入我们的todolist.vue组件
然后再todolist.vue分别引入todo-input todo-list。

在项目里边写我们的代码:

在todo-input的div里写上一个输入框和按钮
在这里插入图片描述
在state里添加一个数组
在这里插入图片描述
在todo-list里添加一个li标签并使用v-for循环出来
在这里插入图片描述
这样我们的结构就形成了

首先在点击add按钮时候把输入框的内容给添加到下边的标签里

给input标签标签绑定一个v-model并在当前文件里写上自定义属性
在这里插入图片描述
在点击add按钮时候把value值传到我们的state里
在这里插入图片描述
在这里插入图片描述
然后再写上一个可以删除的按钮
在这里插入图片描述
在这里插入图片描述
然后可以根据ior是否为true来给添加一个背景颜色
在这里插入图片描述
这样一个简单的todolist案例就完成了

wenkai_lou
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vuex写todolist
Du123456789yan的博客
09-22 333
用vuex简单写一个todolist
超详细的Vuex——todoList效果
weixin_51962708的博客
10-01 628
超详细的Vuex——todoList效果效果介绍HelloWorld.vue组件child.ue组件m.js 效果介绍 本编是写的类似记事本的一个小案例，通过获取焦点输入内容，添加到全部中。一共有三个按钮，分别为All全部、Active未完成、Completed已完成。通过勾选为已完成，也可以查看未完成的，从未完成的勾选为已完成的。 HelloWorld.vue组件 Home页面中我们清晰的看到一个input框，它是对输入的内容进行添加。代码中还引入了一个child子组件。由于我们是要用Enter进
利用 vuex写一个todoList
lzfengquan的博客
04-04 396
1 store 仓库下有index,js文件 state: { // 存放数据 todoList: JSON.parse(sessionStorage.getItem(‘todoList’)) || [] }, mutations: { // 同步方法 btn(state, val) { state.todoList.push({ id:Date.now(), name: val }) sessionStorage.setItem(‘todoList’, JSON.stringify(state.todoL
使用vuex完成todolist
weixin_45223696的博客
03-14 353
vuex完成todolist基本功能 首先使用vue-cli搭建项目 项目中使用了element-ui的组件，使用前要先引入element-ui 头部组件html内容 <template> <div> <!-- 头部整体盒子 --> <div class="header_container"> ...
vuex实现简单的todoList
yangmiemie120的博客
09-27 952
首先新建一个vue项目，然后install vuex。 在建好的项目中，首先在src文件夹下新建一个store.js,当然，如果你比较追求完美，可以新建一个store文件夹，里面再创建一个js，store.js文件中，首先需要引入vue和vuex,然后再将vuex全局注入到vue中，就想这样： import Vue from 'vue'; import Vuex from 'vuex' // vu...
初探Vuex，使用Vue-cli，Vuex实现一个简单的TodoList
kaiakai111的博客
08-30 1107
1.vue-cli创建工程的两种方法 全局安装vue-cli工具的命令：npm install -g @vue/cli，-g表示全局安装。 创建vue工程：首先需要进入到创建工程的目录 创建vue工程命令：vue create 项目名（小写字母、可以有横线和下划线） 回车后，会出现vue-cli的一些选项，如果使用default就会创建默认的工程，第二个则是手动 当我们选择了默认的cli配置后等待安装 2.组件化思想 3.vue-router介绍 4.vuex介绍 state : 组件的状态（需要管理的或
基于Vuex的TodoList和Count计数器整合案例
06-11
在这个“基于Vuex的TodoList和Count计数器整合案例”中，我们将深入探讨如何利用Vuex来构建一个包含TodoList功能和计数器功能的综合应用。 首先，让我们理解Vuex的基本概念。Vuex是一个专为Vue.js应用程序开发的...
TodoList案例源码
05-06
9. **状态管理**：虽然简单的TodoList可能直接在组件内管理状态，但对于更复杂的应用，开发者可能会采用Vuex进行集中式状态管理，以确保状态的一致性和可预测性。 10. **项目构建工具**：Vue项目通常会使用Webpack...
vue-todolist案例
03-08
在这个"vue-todolist"案例中，我们可以看到一个基于Vue的简单待办事项列表应用。这个案例涵盖了Vue的基础知识，包括组件化开发、数据绑定、事件处理等核心概念。 1. **组件化开发**：Vue的核心特性之一就是组件化，...
详解vuex的简单todolist例子
10-16
主要介绍了详解vuex的简单todolist例子,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用vuex实现todoList改造
07-12
深度监视 概念：为了发现对象内部值的变化，可以在选项参数中指定 deep: true ；注意监听数组的变动不需要这么做 方法使用 第一个handler：其值是一个回调函数；即监听到变化时应该执行的函数 第二个是deep：其值是true或false；确认是否深入监听（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。） 第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数 插槽使用 概念：和 HTML 元素一样，我们经常需要向一个组件传递内容，Vue 自定义的 元素可以很愉快的帮助我们实现
vue + vuex todolist的实现示例代码
11-29
todolist demo 最近有空重新看了一下vuex,然后又写了一个todolist小demo,原理比较简单,主要是自己规范了一下代码的写法. 下载地址 :vue-test_jb51.rar 效果图 根组件 todo list demo <add-todo :handleA
Vuex简单理解及实现TodoList
qq_39085895的博客
01-29 483
一、Vuex起步 Vuex基本概念 Vuex是在Vue项目开发时使用的状态管理工具，是实现组件全局状态和数据管理的一种机制，可以方便的实现组件之间的数据共享。 为什么使用Vuex 我们在项目开发中频繁的使用组件传参的方式来操作data中的值，项目肯定会变的臃肿，管理和维护这些值将是相当耗时的工作。所以Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具VueX。有了Vuex，我们只需要把这些值定义在VueX中，就可在整个Vue项目的组件中使用。 核心api state 存放状态 mutati
Vuex实战项目—ToDoList代码及流程详解
道阻且长
08-27 484
Vuex实战项目—ToDoList代码及流程详解
使用VUE来实现简单的TodoList（持续更新中）
CrownNew的博客
02-09 519
我们用到了VUE中的v-for、v-on、v-model三种指令 下面我谈一下现阶段对这三个指令的理解 v-for <li v-for = 'item in list'>{{item}}</li> 我对v-for的理解就是VUE中的for循环，例如item in list就和C语言中的for i in range有异曲同工之意。 v-on <button v-...
vuex实现todoList实例
weixin_30907935的博客
03-08 524
这是一个vuex的项目用例；旨在分割管理项目中的data,以组件为单位，利用vuex提供的module属性，进行 项目store的加载管理；最大限度的把逻辑分离出去，让模版文件专一作模版，让 store专心作数据管理。 src/store/index.js import Vue from 'vue' import Vuex from 'vuex' import TodoList from '../...
todoList案例（vue版本）之编辑todo（vuex实现）
richest_qi的博客
05-16 490
文章目录App.vue（App组件）store/index.jsItem.vue（Item组件） 编辑todo，代码涉及的主要文件有 store/index.js App.vue，即App组件 components/Item.vue，即Item组件 App.vue（App组件） 变更部分：添加样式.btn-edit。 <template> <div id="app"> <div class="todo-container"> <div
Vue前端路由详解——以Ruoyi框架为案例学习
最新发布
警警的博客
09-03 1070
Ruoyi框架前端路由通过Vue Router实现，支持静态路由和动态路由的配置，通过路由守卫实现权限控制等需求，采用路由懒加载提高应用性能，并通过路由元信息存储自定义信息。这些特性共同构成了Ruoyi框架前端路由的完整体系，为开发者提供了灵活、强大的路由管理能力。
写一个使用vuex进行组件间通信的案例
03-08
可以的，我可以为您提供一个使用 Vuex 进行组件间通信的案例。 首先，在 Vue.js 应用程序中安装 Vuex，然后创建一个 store 对象来管理应用程序的状态。在 store 对象中，我们可以定义 state、mutations、actions 和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值