VueはTodoListの例をカプセル化し、ブラウザのローカルキャッシュのアプリケーションを実装します。

VueはTodoListの例をカプセル化し、ブラウザのローカルキャッシュのアプリケーションを実装します。

この記事では主に、Vue で TodoList をカプセル化するケースと、ブラウザのローカル キャッシュのアプリケーション実装について紹介し、次のように共有します。

ここに画像の説明を挿入

シンプルな Todolist の例が Vue を使用してカプセル化されています。ブラウザのローカル キャッシュ テクノロジも追加されています。

ブラウザのローカルキャッシュ:

  • 前提: 通常、定義した変数や Vuex によって保存されたデータは、ブラウザを更新すると失われるため、履歴記録の効果は得られません。ただし、ブラウザ キャッシュを使用すると、この問題を解決できます...
  • ブラウザ キャッシュは、sessionStorage と localStorage の 2 種類に分かれています。2 つのプロトタイプ チェーンは次のとおりです。

ここに画像の説明を挿入

ここに画像の説明を挿入

プロトタイプチェーンは基本的に同じであることがわかりますが、唯一の違いは

  • localStorage は永続的なローカル キャッシュとして機能します。手動で削除するかクリアしない限り、ブラウザー内に常に存在します。
  • sessionStorage はセッション キャッシュに使用されます。そのライフ サイクルは現在のブラウザー セッションにのみ存在します。ブラウザーを閉じると、情報は失われます。ただし、ページを更新するだけであれば、データは保存されたままになります。

この例では、sessionStorage が使用され、そのための小さなパッケージが作成されます。

定数ストレージ = {
	set(キー, 値){
		window.sessionStorage.setItem(キー、JSON.stringify(値));
	},
	get(キー){
		JSON.parse(window.sessionStorage.getItem(key)) を返します。
	},
	削除(キー){
		window.sessionStorage.removeItem(キー);
	}
}

デフォルトのストレージをエクスポートします。

コード例:

<テンプレート>
	<div class="todo">
		<ヘッダー>
			<input type="text" placeholder="Enter..." v-model="キーワード" @keydown.enter="handleList">
			やることリスト
		</ヘッダー>
		<!-- 進行中 -->
		<h4>進行中...{{dolistNumber}}</h4>
		<template v-for="(item, index) in dolist" :key="index">
			<div class="dolist" v-if="!item.checked">
				<label :for="index +'l'">
					<input type="checkbox" v-model="item.checked" :id="index +'l'" @change="handleChecked">
					{{item.title}}
				</ラベル>
				<span @click="cancalDo(index)">X</span>
			</div>
		</テンプレート>

		<!-- 完了 -->
		<h4>完了しました...{{dolist.length - dolistNumber}}</h4>
		<template v-for="(item, index) in dolist" :key="index">
			<div class="dolist" v-if="item.checked">
				<label :for="index +'ll'">
					<input type="checkbox" v-model="item.checked" :id="index +'ll'" @change="handleChecked">
					{{item.title}}
				</ラベル>
				<span @click="cancalDo(index)">X</span>
			</div>
		</テンプレート>
	</div>
</テンプレート>

<スクリプト>
	'../storage.js' からストレージをインポートします。
	エクスポートデフォルト{
		名前: "todoList",
		データ() {
			戻る {
				キーワード: "", // 入力オプション dolist: [],
			}
		},
		計算:{
			リスト番号(){
				this.dolist.filter(item => item.checked === false).length を返します。
			}
		},
		メソッド: {
			ハンドルチェック(){
				// ステータスを変更した後に更新します storage.set('dolist', this.dolist);
			},
			ハンドルリスト() {
				if (this.keyword !== "") {
					this.dolist.push({
						タイトル: this.keyword,
						チェック済み: false、
					});
					this.keyword = "";
					ストレージを設定します('dolist', this.dolist);
				}
				
			},
			cancalDo(インデックス) {
				// これを削除します this.dolist.splice(index, 1);
				ストレージを設定します('dolist', this.dolist);
			}
		},
		マウントされた(){
			dolist = storage.get('dolist'); とします。
			if(dolist){
				this.dolist = dolist;
			}
		},

	}	
</スクリプト>

<スタイル>
	.todo {
		マージン: 400px 自動;
		最小高さ: 300px;
		幅: 800ピクセル;
		背景色: #eee;
	}

	.todo ヘッダー {
		位置: 相対的;
		テキスト配置: 中央;
		高さ: 60px;
		行の高さ: 60px;
		フォントサイズ: 20px;
		下境界線: 2px 実線 #fff;
	}

	.todo ヘッダー入力 {
		位置: 絶対;
		左: 40px;
		上位: 50%;
		変換: translateY(-50%);

		アウトライン: なし;
		行の高さ: 30px;
		境界線の半径: 15px;
		左パディング: 30px;
		境界線: 1px 実線 #999;
		フォントサイズ: 16px;
		幅: 100ピクセル;
		遷移: すべて .6 秒線形。
	}

	.todo ヘッダー入力:フォーカス {
		幅: 200ピクセル;
	}

	.dolist {
		パディング: 20px;
		フォントサイズ: 16px;

	}

	.dolist ラベル {
		カーソル: ポインタ;
	}

	.dolist入力{
		右マージン: 10px;

	}

	.dolist span:最後の子 {
		フロート: 右;
		境界線: 1px の灰色
		背景色: #999;
		色: #fff;
		境界線の半径: 50%;
		パディング: 5px;
	}

	h4 {
		パディング下部: 20px;
		テキスト配置: 中央;
	}
</スタイル>

Vue で TodoList をカプセル化するケースとブラウザローカルキャッシュのアプリケーション実装についての記事はこれで終わりです。Vue TodoList に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vuex のシンプルな todolist の例の詳細な説明
  • Vue は TodoList から親子コンポーネントの通信を学習します
  • Vuejs はシンプルな todoList 関数とコンポーネントのサンプルコードを実装します
  • vue.js の todoList プロジェクトの例
  • VueのTodoListケースの詳しい説明

<<:  mysqlパラメータsql_safe_updatesを使用して更新/削除範囲を制限する方法の詳細な説明

>>:  Linux システムのパフォーマンスを分析するための top コマンドの詳細な説明

推薦する

MySQL で大量のデータ (数千万) を素早く削除するためのいくつかの実用的なソリューションの詳細な説明

著者は最近、仕事でパフォーマンスのボトルネックの問題に遭遇しました。MySQL テーブルには毎日約 ...

MySql のサブクエリ内のクエリ例の詳細な説明

北西を見ると私の故郷はどこにあるでしょうか。南東の満月を何度見たことがあるでしょうか。月が再びゆっく...

Linux 向けの強化されたスクリーンショットと共有ツール: ScreenCloud

ScreenCloud は、必要だとは思わなかった素晴らしい小さなアプリです。デスクトップ Lin...

VUE ユニアプリコア知識の簡単な紹介

目次仕様a. ページファイルはVueの単一ファイルコンポーネント仕様に準拠しています。 b. コンポ...

MySQL 8.0.22 winx64 のインストールと設定のグラフィックチュートリアル

mysql 8.0.22 winx64のインストールと設定のグラフィックチュートリアルは参考までに、...

Ubuntu 18.04 に mysql5.7.23 をインストールするチュートリアル

この記事では、Ubuntu18.04にmysql5.7.23をインストールする具体的な方法を参考まで...

nestjs における例外フィルター Exceptionfilter の具体的な使用法

Nestjs 例外フィルターといえば、非常に強力な .Net のグローバル フィルターについて触れな...

Ubuntu16.04にclionをインストールするプロセス全体と手順の詳細な説明

CLion のプロセス全体を最初から説明します。CLion は、JetBrains がリリースした新...

Vueは新しいウィンドウを開き、パラメータ転送のグラフィック例を実装します。

私が実現したい機能は、新しいウィンドウを開いて新しいページを表示することですが、パラメータを渡す必要...

優れた Web UI ライブラリ/フレームワーク 10 選

1. ITミルツールキットIT Mill Toolkit は、リッチ Web アプリケーション用のウ...

Docker を使用して Spring Boot をデプロイする方法

Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...

Nginx 仮想ホスト (IP ベース) を構成する 3 つの方法の詳細な説明

Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...

独自の YUM リポジトリを作成する手順

簡単に言うと、ウェアハウスとして使用される仮想マシンの IP は 192.168.149.129 で...

JQuery データグリッドクエリの詳細な説明

目次ツリー項目にコードを追加します。 1. 右側に関連情報ページを保存します(userManage....

MySQLでホワイトリストアクセスを設定する方法

MySQLでホワイトリストアクセスを設定する手順1. ログイン mysql -uroot -pmys...