前言
Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。相比于传统的前端开发方式，Vue.js 使用了单文件组件的概念，将 HTML、CSS 和 JavaScript 拆分到各自的文件中，使得代码更加模块化和可维护。
本文将通过实例向您展示如何使用 Vue.js 单文件组件构建一个简单的待办事项应用。
技术背景
在开始构建应用之前，我们需要确保已经安装了以下技术库：
步骤一：初始化项目
首先，我们需要使用 Vue CLI 创建一个新的 Vue.js 项目。打开终端并输入以下命令：
vue create todo-app
然后按照提示进行选择，例如选择默认配置（default preset）。等待项目创建完成后，进入项目目录：
cd todo-app
步骤二：创建待办事项组件
在 src/components 目录下创建一个新的文件 TodoList.vue，使用以下代码作为初始内容：
<template>
<div>
<h1>Todo List</h1>
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
todos: [
{ id: 1, text: 'Buy groceries' },
{ id: 2, text: 'Clean the house' },
{ id: 3, text: 'Walk the dog' }
]
};
}
};
</script>
<style scoped>
h1 {
color: #333;
}
li {
margin-bottom: 10px;
}
</style>
这是一个简单的待办事项组件，其中使用了 Vue.js 的模板语法（template syntax）和组件选项（component options）。组件的功能是渲染一个待办事项列表。
步骤三：在 App 组件中使用待办事项组件
在 src/App.vue 文件中删除默认生成的代码，并使用以下代码替换：
<template>
<div class="container">
<TodoList />
</div>
</template>
<script>
import TodoList from './components/TodoList.vue';
export default {
name: 'App',
components: {
TodoList
}
};
</script>
<style>
.container {
max-width: 600px;
margin: 0 auto;
}
</style>
这个代码片段中，我们首先导入了之前创建的 TodoList 组件，然后在 components 选项中注册了这个组件。接下来，在模板中使用了 TodoList 组件。
步骤四：启动应用
打开终端并运行以下命令来启动 Vue.js 应用：
npm run serve
然后在浏览器中访问 http://localhost:8080，您将会看到一个带有预置待办事项的列表。
总结
通过本文的步骤，您已经学会了如何使用 Vue.js 单文件组件构建一个简单的待办事项应用。这只是 Vue.js 提供的众多功能之一。希望您能够继续深入学习并探索更多有关 Vue.js 的知识。
如果想要了解更多关于 Vue.js 的信息，请访问 Vue.js 官方网站。祝您在使用 Vue.js 开发应用时愉快！
本文来自极简博客，作者：心灵的迷宫，转载请注明原文链接：Vue.js 单文件组件实战：构建一个简单的待办事项应用
