【愚公系列】《循序渐进Vue.js 3.x前端开发实践》008-Vue 模板与应用：实现待办任务列表应用
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。博客内容.NET、...
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在日常生活中，待办任务列表是我们管理时间和提升效率的重要工具。而在前端开发中，实现这样一个功能简单而又有趣的应用，正是学习和熟悉Vue.js的绝佳机会。
Vue.js以其灵活的组件化设计和直观的数据绑定，使得构建动态应用变得轻而易举。在本篇文章中，我们将带您逐步实现一个待办任务列表应用，深入探讨Vue模板的使用和应用场景。通过实例化的讲解，您将学习到如何创建、修改和删除任务，并掌握如何利用Vue的响应式特性来提升用户体验。
无论您是Vue的新手，还是希望巩固基础的开发者，这篇文章都将为您提供实用的技巧和清晰的指导。让我们一同动手实践，打造属于自己的待办任务列表应用吧！
🚀一、实现待办任务列表应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办任务列表</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
<!-- 输入框元素，用来新建待办任务 -->
<form @submit.prevent="addTask">
<span>新建任务</span>
<input
v-model="taskText"
placeholder="请输入任务..."
/>
<button>添加</button>
</form>
<!-- 有序列表，使用v-for来构建 -->
<ol>
<li v-for="(item, index) in todos">
{{item}}
<button @click="remove(index)">
删除任务
</button>
<hr/>
</li>
</ol>
</div>
<script>
const {createApp, ref} = Vue
const config = {
setup() {
const todos = ref([])
const taskText = ref("")
const addTask = () => {
if (taskText.value.length == 0) {
alert("请输入任务")
return
}
todos.value.push(taskText.value)
taskText.value = ""
}
const remove = (index) => {
todos.value.splice(index, 1)
}
return {todos, taskText, addTask, remove}
}
}
createApp(config).mount("#Application")
</script>
</body>
</html>
这个代码是一个使用 Vue 3 创建的简单待办任务列表应用，用户可以通过输入框添加任务，并可以删除已添加的任务。
🔎1.HTML 结构
<!DOCTYPE html>：声明文档类型为 HTML5。<html lang="en">...</html>：指定网页的语言为英语。<meta charset="UTF-8">：声明文档使用的字符编码为 UTF-8。<meta http-equiv="X-UA-Compatible" content="IE=edge">：用于确保在 Internet Explorer 浏览器中，以最新的渲染模式渲染页面。<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口，确保在移动设备上有更好的显示效果。<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>：引入 Vue 3 的全局脚本。
🔎2.Vue 应用部分
🦋2.1 #Application div
这个 div 是 Vue 应用的根元素，Vue 实例会挂载在这个 id="Application" 的元素上。
🦋2.2 表单部分
<form @submit.prevent="addTask">
<span>新建任务</span>
<input v-model="taskText" placeholder="请输入任务..." />
<button>添加</button>
</form>
- 表单中有一个输入框和一个按钮，用于输入和添加任务。
v-model="taskText"：将输入框的值与taskText绑定，输入的值会被实时保存到taskText中。@submit.prevent="addTask"：当表单提交时，调用addTask方法，并使用.prevent修饰符阻止页面刷新。
🦋2.3 任务列表
<ol>
<li v-for="(item, index) in todos">
{{item}}
<button @click="remove(index)">删除任务</button>
<hr/>
</li>
</ol>
v-for="(item, index) in todos"：遍历todos数组，每一项生成一个li列表项。{{item}}：显示当前任务的内容。@click="remove(index)"：点击“删除任务”按钮时，调用remove(index)方法，删除当前任务。
🔎3.Vue 应用的 JavaScript 逻辑
const {createApp, ref} = Vue
- 使用 Vue 3 的
createApp来创建应用，ref用于声明响应式数据。
🦋3.1 响应式数据
const todos = ref([])
const taskText = ref("")
todos：一个空数组，存储待办任务。taskText：用于保存用户输入的任务文本。
🦋3.2 方法
const addTask = () => {
if (taskText.value.length == 0) {
alert("请输入任务")
return
}
todos.value.push(taskText.value)
taskText.value = ""
}
addTask：添加任务的方法。- 检查
taskText的长度是否为 0，如果为空，则弹出提示“请输入任务”。 - 如果不为空，则将
taskText的内容添加到todos数组中，并将taskText清空。
- 检查
const remove = (index) => {
todos.value.splice(index, 1)
}
remove：删除任务的方法。- 使用
splice(index, 1)删除todos数组中对应index的任务。
- 使用
🦋3.3 创建 Vue 实例
createApp(config).mount("#Application")
通过 createApp(config) 创建 Vue 应用，并将其挂载到 #Application DOM 元素上。
🔎4.总结
- 用户可以通过输入框添加任务，任务将被存储在
todos数组中。 - 用户还可以点击按钮删除相应的任务。
- 整个应用是基于 Vue 3 的响应式系统构建的，通过
v-model实现双向绑定，通过事件处理器如@submit和@click实现交互。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）