0
0
0

零基础入门 Vue.js 开发指南

木木在敲代码
2025-12-13 03:18
阅读 783

作者：一名工作5年的后端开发，但热爱把前端讲明白

大家好！我是一名干了5年后端的老程序员。虽然主业是写 Java 和 Python，但我一直觉得——一个真正懂技术的人，应该能把复杂的东西讲简单。Vue.js 就是这样一个值得讲清楚的前端框架。

今天这篇教程，就是专门写给完全零基础的朋友的。不管你有没有写过 HTML、CSS 或 JavaScript，只要愿意动手敲代码，就能跟着走完这条入门之路。我当初学 Vue 的时候踩过很多坑，也见过太多新手被术语吓退。所以这篇文章的目标只有一个：让你在没有任何基础的情况下，也能亲手做出一个能跑的 Vue 应用。

一、Vue.js 是什么？能用来做什么？

简单说，Vue.js 是一个用来构建用户界面的 JavaScript 框架。

  • 用户界面：就是你每天看到的网页、App 页面，比如登录框、商品列表、聊天窗口。
  • 框架：你可以把它想象成一套“积木工具箱”，它帮你自动处理很多重复、繁琐的事情，让你专注做业务逻辑。

举个例子：
你想做一个“待办事项”列表（To-Do List），用户可以添加任务、标记完成、删除任务。
如果不用 Vue，你得手动操作 DOM（网页元素），写一堆 document.getElementById 这样的代码，又啰嗦又容易出错。
而用了 Vue，你只需要告诉它：“我的数据是哪些”，它就会自动更新页面——这就是 数据驱动视图 的思想。

✅ 核心优势：声明式渲染、组件化开发、响应式数据绑定。

二、环境准备：5分钟搭好开发环境

别担心！Vue 的入门门槛其实很低。我们不需要安装复杂的软件，只需要三个东西：

必备工具清单

工具 作用 是否必须
浏览器（Chrome / Edge） 运行和调试网页 ✅ 必须
代码编辑器（推荐 VS Code） 写代码的地方 ✅ 必须
Node.js（可选，但建议装） 运行 Vue CLI 和打包工具 ⚠️ 初学可跳过，但后面会用到

📌 新手提示：如果你现在还没装任何工具，先去官网下载 VS Code 和 Node.js（选 LTS 版本）。

方式一：最简单的开始 —— 直接用 <script> 引入（适合零基础）

这是最轻量的方式，连 Node.js 都不用装！

  1. 新建一个文件夹，比如叫 my-vue-app
  2. 在里面新建一个文件 index.html
  3. 把下面的代码复制进去：
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的第一个 Vue 应用</title>
  <!-- 引入 Vue.js -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app');
  </script>
</body>
</html>
  1. 双击打开 index.html，你会看到页面上显示：Hello Vue!

🎉 恭喜！你已经运行了第一个 Vue 程序！

💡 为什么这么简单？
因为我们直接从网络加载 Vue（通过 <script src="...">），就像引用一个外部 JS 文件一样。这种方式叫 CDN 引入，适合学习和小项目。

方式二：专业开发方式 —— 使用 Vue CLI（后续进阶用）

等你熟悉基础后，建议使用官方脚手架工具 Vue CLI 或 Vite 来创建项目。但现在先不着急，我们先把基础打牢。

三、核心概念：用大白话讲清楚 Vue 的三大支柱

Vue 有三个核心概念，我用“做饭”来打比方：

1. 响应式数据（Reactive Data）—— “食材变了，菜就变”

在 Vue 中，你定义的数据（比如 message）是“活”的。一旦它变了，页面会自动更新。

data() {
  return {
    count: 0
  }
}

然后在模板里写：

<p>你点了 {{ count }} 次</p>
<button @click="count++">点我加1</button>

你每点一次按钮，count 自动 +1，页面上的数字也立刻更新——你不用手动改 HTML！

🔍 我当初学的时候：总以为要像 jQuery 那样 $("#text").text(newVal)，结果发现 Vue 完全自动同步，惊呆了！

2. 指令（Directives）—— “给 HTML 加魔法咒语”

指令是以 v- 开头的特殊属性，比如：

指令 作用 示例
v-bind 动态绑定属性 <img v-bind:src="imageUrl">
v-on 绑定事件 <button v-on:click="handleClick">
v-if 条件渲染 <p v-if="isVisible">显示这段</p>
v-for 循环渲染 <li v-for="item in list">{{ item }}</li>

为了方便，Vue 还提供了缩写：

  • v-bind:src → :src
  • v-on:click → @click

3. 组件（Components）—— “乐高积木”

组件就是可复用的 UI 单元。比如你可以做一个 <TodoItem> 组件，然后在页面里用三次，每次显示不同的任务。

// 定义一个组件
const TodoItem = {
  props: ['task'],
  template: `<li>{{ task.text }}</li>`
}

// 在主应用中使用
createApp({
  components: { TodoItem },
  data() {
    return {
      tasks: [
        { text: '买牛奶' },
        { text: '写代码' }
      ]
    }
  }
})

模板中：

<ul>
  <todo-item v-for="task in tasks" :task="task"></todo-item>
</ul>

💡 开发心得：组件化是 Vue 最强大的地方。把页面拆成小块，每个块独立开发、测试、复用，团队协作效率翻倍！

四、实战项目：做一个“简易待办事项”应用

现在，我们把上面的知识串起来，做一个真正的应用！

第一步：搭建基础结构

新建 todo.html，内容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>待办事项</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; }
    input { padding: 8px; width: 70%; }
    button { padding: 8px 12px; }
    ul { list-style: none; padding: 0; }
    li { padding: 8px; border-bottom: 1px solid #eee; }
    .completed { text-decoration: line-through; color: #999; }
  </style>
</head>
<body>
  <div id="app">
    <h1>我的待办事项</h1>
    
    <!-- 输入新任务 -->
    <div>
      <input v-model="newTask" @keyup.enter="addTask" placeholder="输入任务...">
      <button @click="addTask">添加</button>
    </div>

    <!-- 任务列表 -->
    <ul>
      <li v-for="(task, index) in tasks" 
          :key="index"
          :class="{ completed: task.done }"
          @click="toggleDone(index)">
        {{ task.text }}
        <button @click.stop="removeTask(index)">×</button>
      </li>
    </ul>

    <p>共 {{ tasks.length }} 项，已完成 {{ completedCount }} 项</p>
  </div>

  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          newTask: '',
          tasks: [
            { text: '学习 Vue', done: true },
            { text: '写一篇教程', done: false }
          ]
        }
      },
      computed: {
        completedCount() {
          return this.tasks.filter(t => t.done).length;
        }
      },
      methods: {
        addTask() {
          if (this.newTask.trim()) {
            this.tasks.push({ text: this.newTask, done: false });
            this.newTask = '';
          }
        },
        toggleDone(index) {
          this.tasks[index].done = !this.tasks[index].done;
        },
        removeTask(index) {
          this.tasks.splice(index, 1);
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

第二步：功能说明

  • v-model="newTask"：实现输入框和数据双向绑定
  • @keyup.enter：按回车键触发添加
  • v-for：循环渲染任务列表
  • :class="{ completed: task.done }"：根据 done 状态切换样式
  • @click.stop：阻止点击事件冒泡（避免同时触发 toggle 和 remove）
  • computed：自动计算已完成数量，无需手动更新

✅ 试试看：双击打开这个 HTML 文件，添加、完成、删除任务，看看页面是不是实时更新？

五、新手常见问题解答（FAQ）

❓ 1. 为什么我的 {{ message }} 显示不出来，反而看到花括号？

  • 原因：Vue 实例没有正确挂载到 #app 元素。
  • 解决：检查 mount('#app') 中的 ID 是否和 HTML 中 <div id="app"> 一致。

❓ 2. 修改了数据，但页面没更新？

  • 可能原因：
    • 直接通过索引修改数组（如 this.list[0] = newValue）
    • 直接添加新属性（如 this.obj.newProp = value）
  • 解决：使用 this.$set（Vue 2）或确保使用响应式 API（Vue 3 中一般不会出现）

💡 避坑指南：尽量用 push, splice, filter 等方法操作数组，不要直接赋值索引。

❓ 3. 我该学 Vue 2 还是 Vue 3？

  • 答案：直接学 Vue 3！它是最新版本，语法更简洁，性能更好，社区支持也更强。
  • Vue 3 的组合式 API（Composition API）虽强大，但初学用选项式 API（Options API，本文用的方式）完全够用。

❓ 4. 能把代码上传到 GitHub 吗？

当然可以！而且强烈建议你这么做。

上传步骤：

  1. 注册 GitHub
  2. 安装 Git（git-scm.com）
  3. 在项目文件夹执行：
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/你的用户名/项目名.git
git push -u origin main

🌟 开发心得：我所有练习项目都上传 GitHub。不仅备份代码，还能展示给未来的雇主看。哪怕只是个小待办事项，也是你成长的足迹！

六、下一步学习建议

恭喜你已经迈出了第一步！接下来该怎么走？

学习路径推荐

阶段 学习内容 推荐资源
基础巩固 Vue 官方文档“基础”章节 vuejs.org/guide
进阶开发 Vue Router（路由）、Pinia（状态管理） 官方文档 + B站视频
工程化 使用 Vite 创建项目、组件通信、Axios 请求 《Vue 3 企业级应用开发实战》
项目实战 做一个博客系统、电商首页 GitHub 上找开源项目模仿

两个关键习惯

  1. 每天写代码：哪怕只改一行，也要保持手感。
  2. 多读官方文档：Vue 的文档是我见过最友好的，图文并茂，例子丰富。

结语

写这篇教程，是因为我相信：技术不应该有门槛。
Vue 的设计哲学就是“渐进式”——你可以从一行 <script> 开始，慢慢成长为全栈开发者。

我当初学的时候，也是一边查文档一边报错，但只要坚持动手，三个月后就能接真实项目了。

现在，轮到你了。
打开 VS Code，新建一个 HTML 文件，把上面的待办事项代码敲一遍。
遇到问题？没关系，那是你在进步的信号。

记住：每一个大神，都曾是个连 {{}} 都看不懂的新手。

加油！你的 Vue 之旅，从今天开始 🚀

P.S. 如果你觉得这篇教程有帮助，不妨把它 star 到你的 GitHub 收藏夹，或者分享给同样想学前端的朋友。

标签:GitHub工具开发心得

评论 0

最热最新
暂无评论

为你推荐

暂无相关推荐
匿名用户Lv.1
0
影响力
0
文章
0
粉丝

相关推荐

暂无相关推荐

精选内容

暂无精选内容