Vue.js 案例

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。它是目前前端开发领域非常热门的技术之一，因为它易于上手，功能强大，且与其他库或已有项目整合度高。

下面是一个简单的 Vue 项目实战步骤，帮助你了解如何使用 Vue.js 来创建一个基本的应用程序。

项目实战：待办事项列表（Todo List）
1. 环境准备
首先，确保你的开发环境中已经安装了 Node.js 和 npm。然后，你可以通过 npm 安装 Vue CLI（Vue 的命令行工具），用于快速创建和管理 Vue 项目。

bash
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
2. 创建项目
使用 Vue CLI 创建一个新的 Vue 项目。

bash
vue create todo-list
按照提示选择或自定义配置选项。对于这个项目，你可以选择默认的配置。

3. 进入项目目录并运行
bash
cd todo-list
npm run serve
这将在本地启动一个开发服务器，并在浏览器中打开应用程序。

4. 编写代码
在 src/components 目录下创建一个新的 Vue 组件 TodoList.vue。

vue
<template>
<div>
<h1>Todo List</h1>
<input v-model="newTodo" placeholder="Add a new todo" />
<button @click="addTodo">Add Todo</button>
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="removeTodo(index)">Remove</button>
</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
newTodo: '',
todos: []
};
},
methods: {
addTodo() {
if (this.newTodo.trim() !== '') {
this.todos.push(this.newTodo);
this.newTodo = '';
}
},
removeTodo(index) {
this.todos.splice(index, 1);
}
}
};
</script>
5. 在 App 组件中使用 TodoList 组件
修改 src/App.vue 文件，引入并使用 TodoList 组件。

vue
<template>
<div id="app">
<TodoList />
</div>
</template>

<script>
import TodoList from './components/TodoList.vue';

export default {
components: {
TodoList
}
};
</script>
6. 测试和构建
你可以在本地开发服务器上测试你的 Todo List 应用程序。当你对应用程序感到满意时，你可以使用 Vue CLI 来构建生产版本的应用程序。