vue3入门项目代码
时间: 2023-08-16 22:15:48 浏览: 49
当然,我可以提供一个简单的 Vue 3 入门项目代码示例。这是一个基本的待办事项列表应用程序,你可以在其中添加和删除待办事项。
首先,确保你已经安装了最新版本的 Vue CLI。然后,创建一个新的 Vue 3 项目:
```
vue create todo-app
```
选择默认的 preset 或手动选择需要的特性。
进入项目目录:
```
cd todo-app
```
现在,我们可以开始编写代码。
打开 `src/App.vue` 文件,删除默认的模板内容,并替换为以下代码:
```html
<template>
<div>
<h1>Todo App</h1>
<input v-model="newTodo" placeholder="Add a new todo">
<button @click="addTodo">Add</button>
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="removeTodo(index)">Delete</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
todos: [],
newTodo: ''
};
},
methods: {
addTodo() {
if (this.newTodo) {
this.todos.push(this.newTodo);
this.newTodo = '';
}
},
removeTodo(index) {
this.todos.splice(index, 1);
}
}
};
</script>
<style>
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
</style>
```
这段代码定义了一个包含输入框、添加按钮和待办事项列表的组件。`todos` 数组用于存储待办事项,`newTodo` 是用于绑定输入框的 v-model。点击添加按钮时,会将新的待办事项添加到 `todos` 数组中,并清空输入框的内容。点击删除按钮时,会从 `todos` 数组中删除相应的待办事项。
保存文件后,你可以在终端中运行以下命令启动项目:
```
npm run serve
```
然后在浏览器中打开 `http://localhost:8080`,你将看到一个简单的待办事项列表应用程序。
这只是一个入门示例,你可以根据自己的需求进行扩展和修改。希望对你有帮助!