本指南将引导您使用 Vue.js 3 构建基本的待办事项列表应用程序。在本教程结束时，您将了解如何处理数据绑定、事件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
登录后复制
导航到项目目录：
运行开发服务器：启动Vue开发服务器：
这将在浏览器中打开默认的 Vue.js 入门模板，地址为 http://localhost:8080。
第 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 指令根据任务是否完成有条件地应用已完成任务 CSS 类。
<按钮@click="removeTask(index)">删除 ：从列表中删除任务的按钮
脚本部分：
data() 方法：
newTask：一个字符串，保存要添加的新任务的值。
任务：保存所有任务的数组，每个任务表示为具有文本和已完成属性的对象。
方法对象：
addTask()：此方法将 newTask 添加到任务数组中，然后清除 newTask 输入字段。
removeTask(index)：此方法根据索引从任务数组中删除任务。
风格部分：
用于设置待办事项列表样式的基本 CSS，并使用 .completed-task 类来删除已完成的任务。
将任务保留在本地存储中：您可以通过将任务保存在浏览器的本地存储中来增强应用程序，以便它们在页面重新加载时保留下来。
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。如果您使用 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 中的简单待办事项列表应用程序分步指南的详细内容。更多信息请关注PHP中文网其他相关文章！
