从0开始学vue：实现一个简单页面

从零开始学Vue实现简单页面

原创已于 2025-05-31 17:25:54 修改 · 1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #前端框架 #js

于 2025-05-31 11:00:00 首次发布

从0开始学vue 专栏收录该内容

10 篇文章

订阅专栏

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的学习之旅！