How Vue encapsulates a TodoList-Vue.js-php.cn

How Vue encapsulates a TodoList

醉折花枝作酒筹

Release： 2021-04-22 09:40:44

forward

2305 people have browsed it

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.

How Vue encapsulates a TodoList

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:

How Vue encapsulates a TodoList

How Vue encapsulates a TodoList
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;

Copy after login

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>

Copy after login

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!