todoMVC案例(Vuejs)-CSDN博客

本文链接：https://blog.csdn.net/weixin_51564923/article/details/122500747

所有实现代码在文章结尾处

分析整个实现过程的步骤：

1.显示大标题“todoMVC"

在h1中引入{{msg}}，在js文件中将msg赋值，从而在html中显示大标签的内容

2.当没有数据时，两块模板需要隐藏，用到v-if标签。将两个模板放在一个template标签中，当items.length=0时，则v-if=false,进而两块模板隐藏。

3.引入数据。将JS中写好的默认数据引入在html的每一个li标签中。

4.将每个事件划分为完成/未完成。该功能用到双向数据绑定，可以在浏览器中vue模块查看状态以及修改。在每一个li中设置completed属性。他的true/false取决于items中的定义。completed：items.completed。

5.得到未完成的li数码。用到filter方法过滤出没完成的事件.length

{this.items=this.items.filter(completed=>!items.completed).length}赋值在remaining身上

6.左下角item为1时是单数，其余情况均为复数形式。用到 remaining=1？‘’：‘s'

7.不可以输入空数据，用trim()判空，如果trim后没有则返回原来的样子，如果有值则把它传在id+1的位置，内容传到content中。最后将输入框自动清空。

8.功能切换：全选反选按钮。利用get 与set 方法分别控制全选按钮与其余小按钮。用到双向数据绑定，在总按钮中v-model。通过true与false控制是否勾选

(1)总按钮：get()到remaining是否等于0，如果等于另说明已经全部完成，该按钮需要在此时自动勾选。

(2)每个小按钮：将总按钮设置一个setStatus值，如果总按钮被勾选，则该值为true，取消勾选则为false。获得到该值时说明总按钮正在被点击。则其余小小按钮随之改变状态。通过v-for遍历每一个按钮的completed属性，状态与总按钮SetStatus状态保持一致。

这样就实现了全选反选的功能。

9.移除功能的实现。点击每个右上角的小叉叉，就会删除掉这个li数据，通过数组函数splice移除。设置该方法splice是从你点击的这个索引值index往后数1个（也就是它本身）this.items.splice(index, 1)

10.点击清空已完成时只留下未完成的Li传入items中。设置@click方法触碰到js中事件。在此事件中再次用到filter过滤方法，过滤得到未完成的li，重新放在item中。就实现了清空已完成的操作。

要注意：当没有已完成项目时该功能需要被隐藏。所以要判断总的项目数量是否大于未完成数量，如果true则v-show该方法，反之亦然。

11.编辑任务项。db双击li切换到新的editing中。只要双击就触碰到方法使得它俩相等，相等就会触碰到显示editing这个功能。进入到编辑标签后，将原本的content赋予编辑标签内让我们编辑。

如果不想编辑的话就点击esc键，会使等式不相等，进而退出编辑功能。

如果想要保存的话可以点击enter键或者使编辑框失去焦点。即可保存。在点击与失去上加上一个事件。先进行判空，在保存，再把编辑页面去掉。这样就实现了一整个编辑的大动作。

12.全局获取焦点设置当进入到这个页面后自动获取输入框的焦点，无需手动点击后获取焦点。

设置全局指令。Vue.directive()

局部指令：当进入编辑框时也无需手动再次点击才能获取焦点，设置局部指令directives:{}

13.路由状态切换。通过 window.onhashchange 获取点击的路由 hash （# 开头的），来获取对应的那个状态值，并将状态值赋值给 filterStatus。如果这个值是空，则显示所有项目，如果是active则显示未完成项目，如果为completed则显示已完成项目。此处再次用到filter过滤的方法。并且将最初的v-for内容全部换成点击a标签后才会显示的内容。

14.数据持久化：无论你保存与否，退出与否，你输入过的数据都会存在这个页面中，不会丢失，即使重新运行该代码。

使用 window.localStorage 实例进行保存数据与获取数据

定义 itemStorage 数据存储对象，里面自定义 fetch 获取本地数据， save 存数据到本地。
修改 Vue 实例中 data 选项的 items 属性，通过 itemStorage.fetch() 方法初始化数据
Vue 实例中增加一个 watch 选项，用于监听 items 的变化，一旦变化通过 itemStorage.save() 重新保存数据到本地

<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Template • TodoMVC</title>
	<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
	<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
	<!-- CSS overrides - remove if you don't need it -->
	<link rel="stylesheet" href="css/app.css">
	<script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
	<section class="todoapp" id="todoapp">
		<header class="header">
			<h1> {{msg}} </h1>
			<!-- enter回车出发事件 -->
			<input @keyup.enter="addItem" class="new-todo" placeholder="What needs to be done?"  v-app-focus>
		</header>
		<template v-if="items.length">
			<section class="main">
				<input id="toggle-all" class="toggle-all" type="checkbox" v-model="toggleAll">
				<label for="toggle-all">Mark all as complete</label>
				<ul class="todo-list">
					<!-- These are here just to show the structure of the list items -->
					<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
					<li :class="{completed:item.completed ,editing:item===currentItem}" v-for="(item,index) in filterItems"
						:key="item.id">
						<div class="view">
							<input class="toggle" type="checkbox" v-model="item.completed">
							<!-- 双击触碰toEdit函数，在js中使得currentItem===item，便有了：editing:true 将li更换成editing模板-->
							<label @dblclick=toEdit(item)>{{item.content}} </label>
							<button class="destroy" @click="removeItem(index)"></button>
						</div>
						<input class="edit" :value="item.content" @keyup.Esc=cancelEdit
							@keyup.enter="finishEdit(item, index,$event)" @blur="finishEdit(item,index, $event)" v-todo-focus="item === currentItem">
					</li>
				</ul>
			</section>
			<!-- This footer should hidden by default and shown when there are todos -->
			<footer class="footer">
				<!-- This should be `0 items left` by default -->
				<span class="todo-count"><strong>{{remaining}}</strong> item{{remaining === 1 ? "" : "s"}} left</span>
				<!-- Remove this if you don't implement routing -->
				<ul class="filters">
					<li>
						<a :class="{selected:filterStatus==='all'}" href="#/">All</a>
					</li>
					<li>
						<a :class="{selected:filterStatus==='active'}" href="#/active">Active</a>
					</li>
					<li>
						<a :class="{selected:filterStatus==='completed'}" href="#/completed">Completed</a>
					</li>
				</ul>
				<!-- Hidden if no completed items are left ↓ -->
				<button class="clear-completed" @click="removeCompeted" v-show="items.length > remaining">Clear
					completed</button>
			</footer>
		</template>
	</section>
	<footer class="info">
		<p>Double-click to edit a todo</p>
		<!-- Remove the below line ↓ -->
		<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
		<!-- Change this out with your name and url ↓ -->
		<p>Created by <a href="http://todomvc.com">you</a></p>
		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
	</footer>
	<!-- Scripts here. Don't remove ↓ -->
	<script src="node_modules/todomvc-common/base.js"></script>
	<script src="js/app.js"></script>
</body>

</html>

(function (Vue) {
	//模拟数据
	const items =[
	]
	var STORAGE_KEY = 'items-vuejs';
	// 本地存储数据对象
	const itemStorage = {
		fetch() { // 获取本地数据
			return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
		},
		save(items) { // 保存数据到本地
			localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
		}
	}


	Vue.directive("app-focus",{
		//聚集函数
		inserted(el,binding){
			el.focus()
		}
	})
	const vm = new Vue({
		el:"#todoapp",
		data:{
			msg:"TobeNumOne",
			items:itemStorage.fetch(),
			currentItem:null,
			filterStatus:"all"
		},
		  // 监听器
		  watch: {
			// 如果 items 发生改变，这个函数就会运行
			items: {
				deep: true, // 发现对象内部值的变化, 要在选项参数中指定 deep: true。深度监听
				handler: function (newItems, oldItems) {
					//本地进行存储
					itemStorage.save(newItems)
				}
			}
		},
		directives:{
			"todo-focus":{
				update(el){
				el.focus()
					
				}
			}
		},
		computed:{
			remaining(){
				//filter过滤方法  ： 过滤出来没完成的
				return this.items.filter(items => !items.completed).length
			},
			toggleAll:{
				//控制全选按钮
				get(){
					return this.remaining === 0
				},
				//控制下面的小小按钮
				set(newStatus){
					console.log(newStatus);
					this.items.forEach((item)=>{
						item.completed = newStatus
					})
				}
			},
			filterItems(){
				switch (this.filterStatus) {
					case "active":
						return this.items.filter(item=>!item.completed)
						break;

					case "completed":
						return this.items.filter(item=>item.completed)
						break;
				
					default:
						return this.items
						break;
				}
			}
		},
		methods:{
			addItem(event){
				console.log(event.target); //addItem
				console.log("addItem",event.target.value);
				//获取输入的数据，trim去掉前后空格
				const content = event.target.value.trim()
				//判断数据是否为空
				if(!content.length){
					return
				}
				//不空，添加到数组中去，生成ID值，现在的数组长度+1 = 它的ID值
				const id = this.items.length + 1
				//添加到数组中
				this.items.push({
					id,
					content,
					completed:false
				})
				event.target.value=""
			},
			removeItem(index){
				//从当前索引开始删除一个，也就是它本身
				this.items.splice(index, 1) 
			},
			//清除已经完成的
			removeCompeted(){
				//filter是过滤出来，是拿到没完成的。
				this.items=this.items.filter(item => !item.completed)
			},
			toEdit(item){
				this.currentItem = item
			},
			cancelEdit(){
				this.currentItem = null
			},
			finishEdit(item,index,event){
				const content = event.target.value.trim();
				if(!event.target.value.trim()){
					this.removeItem(index)
					return 
				}
				item.content = content;
				this.currentItem=null
			}
		}
	})
	window.onhashchange = function(){
		const hash = window.location.hash.substr(2) || "all"
		vm.filterStatus=hash
	}
	window.onhashchange()
})(Vue);

需要todomvc的CSS样式和bootstrap样式或者空模板想自己从0做这个项目的话可以私聊我哈，我有压缩包。

欢迎兄弟姐妹们一起来讨论！