ホームページ >ウェブフロントエンド >jsチュートリアル >Vue.js のシンプルな To-Do リストアプリケーションのステップバイステップガイド

Vue.js のシンプルな To-Do リストアプリケーションのステップバイステップガイド

王林オリジナル: 2024-09-05 06:35:09568ブラウズ

Simple To-Do List Application in Vue.js Step-by-Step Guide

このガイドでは、Vue.js 3 を使用して基本的な To-Do リストアプリケーションを構築する手順を説明します。このチュートリアルが終わるまでに、データバインディング、イベントの処理方法を理解できるようになります。 Vue.js での処理と動的レンダリング

前提条件

HTML、CSS、JavaScript の基本的な知識
Node.js と npm がコンピューターにインストールされています。
Vue CLIがインストールされています。そうでない場合は、npm install -g @vue/cli を実行してインストールできます。

ステップ 1: プロジェクトのセットアップ

新しい Vue.js プロジェクトを作成する: ターミナルを開き、次のコマンドを実行して新しい Vue.js 3 プロジェクトを作成します。

vue create todo-app

プロジェクトディレクトリに移動します:

cd todo-app

開発サーバーを実行します: Vue 開発サーバーを起動します:

npm run serve

これにより、ブラウザで http://localhost:8080 にあるデフォルトの Vue.js スターターテンプレートが開きます。

ステップ 2: アプリケーションの構造化

デフォルトのテンプレートをクリーンアップする: src/App.vue を開き、デフォルトのテンプレート、スクリプト、スタイルの内容を削除します。それらを次のコードに置き換えます:

<template>
  <div id="app">
    <h1>Vue.js To-Do List</h1>
    <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <button @click="addTask">Add Task</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <input type="checkbox" v-model="task.completed" />
        <span :class="{ 'completed-task': task.completed }">{{ task.text }}</span>
        <button @click="removeTask(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ text: this.newTask, completed: false });
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.completed-task {
  text-decoration: line-through;
  color: grey;
}
input {
  margin-bottom: 10px;
  padding: 5px;
}
button {
  margin-left: 5px;
  padding: 5px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
}
</style>

ステップ 3: コードを理解する

テンプレートセクション:

: この入力フィールドは、v-model を使用して newTask データプロパティにバインドされ、双方向のデータバインディングが可能になります。 @keyup.enter="addTask" は、Enter キーをリッスンして addTask メソッドをトリガーします。

: このボタンをクリックすると、addTask メソッドがトリガーされます。

: タスクの完了ステータスを切り替えるチェックボックス。

{{ task.text }} :span 要素にはタスクのテキストが表示されます。 :class ディレクティブは、タスクが完了したかどうかに基づいて、completed-task CSS クラスを条件付きで適用します。

: タスクをリストから削除するボタン

スクリプトセクション:

data() メソッド:
newTask: 追加される新しいタスクの値を保持する文字列。
タスク: すべてのタスクを保持する配列。各タスクはテキストと完了したプロパティを持つオブジェクトとして表されます。

メソッドオブジェクト:
addTask(): このメソッドは、newTask をタスク配列に追加し、newTask 入力フィールドをクリアします。
RemoveTask(index): このメソッドは、インデックスに基づいてタスク配列からタスクを削除します。

スタイルセクション:

完了したタスクに取り消し線を引く .completed-task クラスを使用して、ToDo リストのスタイルを設定するための基本 CSS。

タスクをローカルストレージに保存する: ブラウザのローカルストレージにタスクを保存することで、アプリを強化できます。これにより、ページがリロードされてもタスクが保持されます。

mounted() {
  this.tasks = JSON.parse(localStorage.getItem('tasks')) || [];
},
methods: {
  addTask() {
    if (this.newTask.trim() !== '') {
      this.tasks.push({ text: this.newTask, completed: false });
      this.newTask = '';
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }
  },
  removeTask(index) {
    this.tasks.splice(index, 1);
    localStorage.setItem('tasks', JSON.stringify(this.tasks));
  }
}

タスクの編集:

<template>
  <div id="app">
    <h1>Vue.js To-Do List</h1>
    <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <button @click="addTask">Add Task</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <input type="checkbox" v-model="task.completed" />

        <span v-if="!task.isEditing" :class="{ 'completed-task': task.completed }">{{ task.text }}</span>
        <input v-else v-model="task.text" @keyup.enter="saveTask(task)" @blur="saveTask(task)" />

        <button v-if="!task.isEditing" @click="editTask(task)">Edit</button>
        <button @click="removeTask(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ text: this.newTask, completed: false, isEditing: false });
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    },
    editTask(task) {
      task.isEditing = true;
    },
    saveTask(task) {
      task.isEditing = false;
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.completed-task {
  text-decoration: line-through;
  color: grey;
}
input {
  margin-bottom: 10px;
  padding: 5px;
}
button {
  margin-left: 5px;
  padding: 5px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
}
</style>

Font Awesome をインストールする

まず、プロジェクトに Font Awesome を含めます。 CDN を使用している場合は、このリンクを HTML ファイルに追加するか、index.html の

** アイコンを使用してテンプレートを更新します
**

次に、タスクを編集、削除、完了するための Font Awesome アイコンを追加しましょう。

<template>
  <div id="app" class="container">
    <h1>Vue.js To-Do List</h1>
    <div class="input-container">
      <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
      <button @click="addTask" class="btn btn-add"><i class="fas fa-plus"></i></button>
    </div>
    <ul>
      <li v-for="(task, index) in tasks" :key="index" :class="{ completed: task.completed }">
        <input type="checkbox" v-model="task.completed" id="checkbox" />

        <span v-if="!task.isEditing" class="task-text">{{ task.text }}</span>
        <input v-else v-model="task.text" @keyup.enter="saveTask(task)" @blur="saveTask(task)" class="edit-input" />

        <div class="actions">
          <button v-if="!task.isEditing" @click="editTask(task)" class="btn btn-edit"><i class="fas fa-edit"></i></button>
          <button @click="removeTask(index)" class="btn btn-delete"><i class="fas fa-trash-alt"></i></button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ text: this.newTask, completed: false, isEditing: false });
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    },
    editTask(task) {
      task.isEditing = true;
    },
    saveTask(task) {
      task.isEditing = false;
    }
  }
};
</script>

<style>
body {
  background-color: #f4f7f6;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  padding: 20px;
  max-width: 400px;
  width: 100%;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

.input-container {
  display: flex;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 5px;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #45a049;
}

.btn-add {
  background-color: #28a745;
}

.btn-edit {
  background-color: #ffc107;
}

.btn-delete {
  background-color: #dc3545;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f8f9fa;
}

li.completed .task-text {
  text-decoration: line-through;
  color: #888;
}

li:hover {
  background-color: #e9ecef;
}

.actions {
  display: flex;
}

.actions .btn {
  margin-left: 5px;
}

.edit-input {
  flex: 1;
  margin-right: 10px;
}
</style>

以上がVue.js のシンプルな To-Do リストアプリケーションのステップバイステップガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css ajax html npm String Array Object if for checkbox include Directory using class Property Event delete JS default this href input ul http https

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ウェブサイトのパフォーマンスを向上させるための必須の WordPress プラグイン次の記事：ウェブサイトのパフォーマンスを向上させるための必須の WordPress プラグイン

続きを見る

Vue.js のシンプルな To-Do リスト アプリケーションのステップバイステップ ガイド

ステップ 2: アプリケーションの構造化

ステップ 3: コードを理解する

Font Awesome をインストールする

関連記事

Vue.js のシンプルな To-Do リストアプリケーションのステップバイステップガイド