从0开始学vue：实现一个简单页面
Vue.js 是一个渐进式JavaScript框架，用于构建用户界面。下面我将带你从零开始学习Vue.js并创建一个简单的可运行页面。
1. 准备工作
首先，你需要了解几种学习Vue.js的方式：
方式一：使用CDN引入（最简单的方式）
<!DOCTYPE html>
<html>
<head><title>我的第一个Vue应用</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body><div id="app">{{ message }}</div><script>new Vue({el: '#app',data: {message: 'Hello Vue!'}});</script>
</body>
</html>
方式二：使用Vue CLI创建项目（推荐方式）
- 首先安装Node.js（包含npm）
- 安装Vue CLI：
npm install -g @vue/cli - 创建项目：
vue create my-first-vue-app - 进入项目目录并运行：
cd my-first-vue-app npm run serve
2. 创建一个简单的待办事项应用
创建Todo组件
在src/components目录下创建TodoList.vue文件：
<template><div class="todo-app"><h1>我的待办事项</h1><div class="add-todo"><input type="text" v-model="newTodo" @keyup.enter="addTodo"placeholder="输入待办事项..."><button @click="addTodo">添加</button></div><ul class="todo-list"><li v-for="(todo, index) in todos" :key="index" class="todo-item":class="{ completed: todo.completed }"><input type="checkbox" v-model="todo.completed"><span>{{ todo.text }}</span><button @click="removeTodo(index)" class="delete-btn">删除</button></li></ul><p v-if="todos.length === 0">暂无待办事项，添加一个吧！</p><p v-else>已完成 {{ completedCount }} / {{ todos.length }} 项</p></div>
</template><script>
export default {name: 'TodoList',data() {return {newTodo: '',todos: [{ text: '学习Vue.js', completed: false },{ text: '完成项目', completed: false },{ text: '购物', completed: true }]}},computed: {completedCount() {return this.todos.filter(todo => todo.completed).length;}},methods: {addTodo() {if (this.newTodo.trim() === '') return;this.todos.push({text: this.newTodo.trim(),completed: false});this.newTodo = '';},removeTodo(index) {this.todos.splice(index, 1);}}
}
</script><style scoped>
.todo-app {font-family: Arial, sans-serif;max-width: 600px;margin: 0 auto;padding: 20px;
}.todo-list {list-style: none;padding: 0;
}.todo-item {display: flex;align-items: center;padding: 10px;border-bottom: 1px solid #eee;
}.todo-item.completed {color: #888;text-decoration: line-through;
}.todo-item input {margin-right: 10px;
}.add-todo {display: flex;margin-bottom: 20px;
}.add-todo input {flex-grow: 1;padding: 8px;margin-right: 10px;
}.add-todo button {padding: 8px 16px;background-color: #42b983;color: white;border: none;border-radius: 4px;cursor: pointer;
}.delete-btn {margin-left: auto;background-color: #ff5252;color: white;border: none;border-radius: 4px;padding: 4px 8px;cursor: pointer;
}
</style>修改App.vue
更新src/App.vue文件以包含我们的Todo组件：
<template><div id="app"><TodoList /></div>
</template><script>
import TodoList from './components/TodoList.vue'export default {name: 'App',components: {TodoList}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>运行项目
npm run serve
4. 下一步学习建议
- 组件系统：学习如何创建可复用的Vue组件
- Vue Router：学习如何实现单页应用(SPA)的路由
- Vuex：学习状态管理
- 生命周期钩子：了解Vue实例的生命周期
- Vue 3：了解Vue的最新版本及其新特性
5. 完整项目结构（使用Vue CLI创建）
如果你使用Vue CLI创建项目，典型的项目结构如下：
my-project/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── assets/
│ ├── components/
│ │ └── HelloWorld.vue
│ ├── App.vue
│ └── main.js
├── package.json
└── README.md
希望这个简单的教程能帮助你开始Vue.js的学习之旅！