Vueはシンプルなメモ帳機能を実装します

Vueはシンプルなメモ帳機能を実装します

この記事では、参考までに、簡単なメモ帳機能を実装するためのVueの具体的なコードを紹介します。具体的な内容は次のとおりです。

プレビュー画像:

機能は次のとおりです。

(1)タスクを入力し、Enterキーを押してタスクリストに追加します(重複したタスクは入力できません)

(2)「削除」をクリックすると、対応するタスクが削除されます。

(3)「クリア」をクリックすると、すべてのタスクが削除されます。

(4)タスクの合計数は左下隅に同期して表示されます。

完全なコードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>メモ帳</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
 
        #todoアプリ{
            幅: 600ピクセル;
            背景色: rgba(19, 161, 114, 0.63);
            フォントファミリー: サンセリフ;
        }
 
        .header>h1 {
            パディング: 20px 0;
            テキスト配置: 中央;
            フォントサイズ: 40px;
            色: ホワイトスモーク;
        }
 
 
        .新しいタスク {
            表示: ブロック;
            幅: 500ピクセル;
            高さ: 50px;
            行の高さ: 50px;
            左パディング: 10px;
            マージン: 0 自動;
            フォントサイズ: 20px;
            アウトライン: なし;
            境界線: なし;
        }
 
        .todolist li {
            高さ: 30px;
            行の高さ: 30px;
            左パディング: 15px;
            マージン: 10px 0;
            フォントサイズ: 25px;
            色: 白;
        }
 
        .todolist .item {
            左マージン: 15px;
        }
 
        。破壊する、
        。クリア {
            幅: 50px;
            高さ: 30px;
            フロート: 右;
            色: 白;
            背景色: 透明;
            境界線: なし;
            フォントサイズ: 20px;
        }
 
        .フッター{
            幅: 600ピクセル;
            高さ: 30px;
            パディング: 10px 0;
            垂直位置合わせ: 中央;
        }
 
 
        .footer p {
            表示: インラインブロック;
            左パディング: 15px;
            色: 白;
            フォントサイズ: 20px;
        }
    </スタイル>
</head>
 
<本文>
    <セクション id="todoapp">
        <ヘッダークラ​​ス="ヘッダー">
            <h1>メモ帳</h1>
            <input type="text" v-model="newItem" class="newTask" placeholder="タスクを入力してください" @keyup.enter="add">
        </ヘッダー>
        <セクション>
            <ul class="todolist">
                <li v-for="(リスト内の項目、インデックス)">
                    <div>
                        <span>{{ インデックス + 1 }}</span>
                        <label class="item">{{ アイテム }}</label>
                        <button class="destroy" @click="del(index)">削除</button>
                    </div>
                </li>
            </ul>
        </セクション>
        <フッタークラス="フッター">
            <p class="count">
                アイテム: {{ list.length }}
            </p>
            <button class="clear" @click="clear" v-show="list.length != 0">クリア</button>
        </フッター>
    </セクション>
    <script src="./vue.js"></script>
    <スクリプト>
        constアプリ = 新しいVue({
            el: "#todoapp",
            データ: {
                リスト: [],
                新しいアイテム: ""
            },
            メソッド: {
                追加() {
                    if (this.newItem == "") {
                        戻る;
                    }
                    それ以外 {
                        if (!this.list.includes(this.newItem)) {
                            this.list.push(this.newItem);
                            this.newItem = "";
                        }
                        それ以外 {
                            alert("重複するイベントを追加しないでください!");
                            this.newItem = "";
                        }
                    }
                },
                del(インデックス) {
                    this.list.splice(インデックス、1);
                },
                クリア() {
                    このリスト = [];
                }
            }
        })
    </スクリプト>
</本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vuex 2.0 の詳細な調査と、vuejs 2.0 + vuex 2.0 を使用したメモ帳アプリケーションの構築
  • vue2.0+vuex+localStorage に基づくローカルメモ帳の例
  • メモ帳ケースのVue実装
  • Vueはシンプルなメモ帳を実装する
  • Vueは小さなメモ帳機能を実装しました
  • vue シンプルメモ帳開発の詳しい説明
  • Vue Notepadの例の詳細な説明
  • Vueはメモ帳機能を実装する
  • vue-cli+webpack メモ帳プロジェクトの作成
  • Vuex はメモ帳機能を実装します

<<:  IDEA は Docker プラグインを使用します (初心者向けチュートリアル)

>>:  低バージョンの Druid 接続プール + MySQL ドライバー 8.0 により、スレッドがブロックされ、パフォーマンスが制限される

推薦する

Link と @import の違いを詳しく見る

ページで CSS を使用する主な方法は、スタイル属性値をインラインで追加する方法、ページ ヘッダーで...

基本構造、ドキュメント タイプ、ヘッダー、本文などの一般的な HTML 要素の概要。

1. 基本構造:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBL...

HTML チュートリアル: 順序付きリスト

<br />原文: http://andymao.com/andy/post/103.h...

nginx で Vue プロジェクトをデプロイする方法

今日は nginx サーバーを使用するのですが、vue プロジェクトをサーバーにデプロイする必要もあ...

建国記念日が近づいています。JS を使用して、建国記念日風のアバターを生成する小さなツールを実装します。実装プロセスの詳細な説明

目次1. ページレイアウト2. 画像のアップロードと表示3. キャンバスを初期化する4. テンプレー...

CSS3.0 でネオンボタンアニメーション効果を実装するためのサンプルコード

今日は、CSS 3.0 で実装されたネオン ボタン アニメーション効果を紹介します。効果は次のとおり...

VUE + OPENLAYERSがリアルタイムポジショニング機能を実現

目次序文1. ラベルスタイルを定義する2. GeoJSONデータのシミュレーション3. Vercto...

あるテーブルのデータの列を別のテーブルの列にコピーするMySQLメソッド

mysql 1 つのテーブル列を別のテーブルにコピーする場合によっては、フィールドから別の新しいフィ...

HTML タグ マーキーを使用してスクロール効果を実現する簡単な方法 (必読)

ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...

ページネーションの例とベストプラクティス

<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...

Dockerは同じIPネットワークセグメントとの接続を実現する

最近、Docker とホストが同じネットワーク セグメント上で通信する問題を解決し、そのプロセス全体...

Linuxのwhichコマンドの具体的な使い方

Linux でファイルを見つけたいのに、その場所がわからないことがよくあります。次のコマンドを使用し...

LinuxにVSCodeをダウンロードしてインストールし、プログラミングを使用して現在の時刻を出力する

rpmコマンドがソフトウェアのインストールに使用するパラメータはどれですか: -i rpm コマンド...

HTMLページでチェックボックスを操作する方法

チェックボックスは Web ページで非常によく使用されます。e コマースの Web サイトでもプラッ...

Linuxはバイナリモードを使用してmysqlをインストールします

この記事では、LinuxにバイナリモードでMySQLをインストールする具体的な手順を参考までに紹介し...