How Vue encapsulates a TodoList

This article will give you a detailed introduction to the method of encapsulating a TodoList in Vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Using Vue to encapsulate a simple Todolist case. At the same time, the technical means of browser local caching are added.

Browser local buffer:

• Premise: Generally, the variables we define, or the data saved with Vuex, will be lost when the browser refreshes it. , this will not achieve the effect of historical records, but using the browser cache can help us solve this problem...

• The browser cache is divided into two types: sessionStorage and localStorage, the two prototype chains are as follows:

It can be seen that their prototype chains are basically the same , the only difference is that

• localStorage acts on the local cache and is persistent. Unless it is manually deleted or cleared, it will always exist in the browser

• sessionStorage functions with session caching. The life cycle only exists during the opening of the browser session. When the browser is closed, the information will be lost, and the data will still be saved by just refreshing the page.

In this example, sessionStorage is used and a small encapsulation is carried out.

const  storage = {
	set(key, value){
		window.sessionStorage.setItem(key, JSON.stringify(value));
	},
	get(key){
		return JSON.parse(window.sessionStorage.getItem(key));
	},
	remove(key){
		window.sessionStorage.removeItem(key);
	}}export default storage;

Example code:

<template>
	<p class="todo">
		<header>
			<input type="text" placeholder="输入..." v-model="keyword" @keydown.enter="handleList">
			TodoList		</header>
		<!-- 正在进行 -->
		<h4>正在进行...{{dolistNumber}}</h4>
		<template v-for="(item, index) in dolist" :key="index">
			<p class="dolist" v-if="!item.checked">
				<label :for="index +&#39;l&#39;">
					<input type="checkbox" v-model="item.checked" :id="index +&#39;l&#39;" @change="handleChecked">
					{{item.title}}				</label>
				<span @click="cancalDo(index)">X</span>
			</p>
		</template>

		<!-- 已经完成 -->
		<h4>已经完成...{{dolist.length - dolistNumber}}</h4>
		<template v-for="(item, index) in dolist" :key="index">
			<p class="dolist" v-if="item.checked">
				<label :for="index +&#39;ll&#39;">
					<input type="checkbox" v-model="item.checked" :id="index +&#39;ll&#39;"  @change="handleChecked">
					{{item.title}}				</label>
				<span @click="cancalDo(index)">X</span>
			</p>
		</template>
	</p></template><script>
	import storage from &#39;../storage.js&#39;;
	export default {
		name: "todoList",
		data() {
			return {
				keyword: "", //  输入的选项
				dolist: [],
			}
		},
		computed:{
			dolistNumber(){
				return this.dolist.filter(item => item.checked === false).length;
			}
		},
		methods: {
			handleChecked(){
				//  当更改状态之后 重新刷新
				storage.set(&#39;dolist&#39;, this.dolist);
			},
			handleList() {
				if (this.keyword !== "") {
					this.dolist.push({
						title: this.keyword,
						checked: false,
					});
					this.keyword = "";
					storage.set(&#39;dolist&#39;, this.dolist);
				}
				
			},
			cancalDo(index) {
				// 删除这个
				this.dolist.splice(index, 1);
				storage.set(&#39;dolist&#39;, this.dolist);
			}
		},
		mounted(){
			let dolist = storage.get(&#39;dolist&#39;);
			if(dolist){
				this.dolist = dolist;
			}
		},

	}	</script><style>
	.todo {
		margin: 400px auto;
		min-height: 300px;
		width: 800px;
		background-color: #eee;
	}

	.todo header {
		position: relative;
		text-align: center;
		height: 60px;
		line-height: 60px;
		font-size: 20px;
		border-bottom: 2px solid #fff;
	}

	.todo header input {
		position: absolute;
		left: 40px;
		top: 50%;
		transform: translateY(-50%);

		outline: none;
		line-height: 30px;
		border-radius: 15px;
		padding-left: 30px;
		border: 1px solid #999;
		font-size: 16px;
		width: 100px;
		transition: all .6s linear;
	}

	.todo header input:focus {
		width: 200px;
	}

	.dolist {
		padding: 20px;
		font-size: 16px;

	}

	.dolist label {
		cursor: pointer;
	}

	.dolist input {
		margin-right: 10px;

	}

	.dolist span:last-child {
		float: right;
		border: 1px solid gray;
		background-color: #999;
		color: #fff;
		border-radius: 50%;
		padding: 5px;
	}

	h4 {
		padding-bottom: 20px;
		text-align: center;
	}</style>

Recommended learning: vue.js tutorial

The above is the detailed content of How Vue encapsulates a TodoList. For more information, please follow other related articles on the PHP Chinese website!