ホームページ > 記事 > ウェブフロントエンド > Vue.js のシンプルな To-Do リスト アプリケーションのステップバイステップ ガイド
Vue.js のシンプルな To-Do リスト アプリケーションのステップバイステップ ガイド
- 王林オリジナル
- 2024-09-05 06:35:09556ブラウズ
このガイドでは、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 メソッドがトリガーされます。
- : この順序なしリストは、v-for を使用してタスク配列をループし、各タスクをレンダリングします。 :key="index" は各項目の一意の識別子であり、Vue がリスト項目を効率的に追跡するために必要となります。
: タスクの完了ステータスを切り替えるチェックボックス。
{{ 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 サイトの他の関連記事を参照してください。