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

Agent实验员

2025-06-18 15:38

阅读 596

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

你可能听说过 JavaScript，它是网页上运行的编程语言。那么什么是 Vue.js（简称为 Vue） 呢？我们可以把它理解成一种“魔法工具”，让 JavaScript 更容易地控制和更新网页的内容。

简单来说：

Vue 是一个用于构建用户界面的 渐进式框架
它可以让你用更少的代码做出更复杂的交互效果
特别适合做动态网页应用（比如：购物车、在线表单、数据可视化等）

如果你希望用最简单的方法把网页变得“活起来” —— 例如点击按钮就能显示新内容，或者输入文字时页面能实时变化 —— 那么 Vue 就非常适合你！

二、环境准备：如何开始使用 Vue

1. 准备工具

在我们写 Vue 程序之前，需要准备好以下工具：

一台电脑
文本编辑器（推荐使用 Visual Studio Code）
浏览器（Chrome 或 Edge）

不需要安装复杂的软件，我们可以从最简单的 HTML 文件开始！

2. 第一个 Vue 程序（无须安装 Vue）

我们可以先通过引入 Vue 的 CDN 链接来快速体验 Vue 的基本功能。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>第一个 Vue 页面</title>
  <!-- 引入 Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <!-- 视图部分 -->
  <div id="app">{{ message }}</div>

  <!-- Vue 脚本部分 -->
  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          message: '你好，Vue！'
        };
      }
    }).mount('#app');
  </script>
</body>
</html>

👉 运行方法：
将以上代码保存为 index.html，然后在浏览器中打开它，你会看到屏幕上显示一句话：你好，Vue！

3. 使用开发工具（可选）

如果你想进一步开发 Vue 应用，可以用如下方式搭建正式开发环境：

安装 Node.js 和 npm

下载地址：https://nodejs.org/
安装后可以在命令行中执行 node -v 和 npm -v 查看是否成功

使用 Vue CLI 创建项目（高级）

# 安装 Vue CLI
npm install -g @vue/cli

# 创建项目
vue create my-project

# 进入项目并启动
cd my-project
npm run serve

访问 http://localhost:8080 即可看到你的第一个 Vue 应用！

📌 提示：对于初学者，建议从上面第2小节的简单 HTML 模式开始学习，熟悉后再升级到完整项目结构。

三、Vue 核心概念通俗讲解

1. 数据驱动视图（Data Driven View）

在传统的 HTML 页面中，如果要修改一个文本内容，你需要手动去改 HTML 代码。而在 Vue 中，你可以通过修改 JavaScript 中的数据来自动更新网页。

我们来看个例子：

示例：

<div id="app">今天是：{{ today }}</div>
<script>
  createApp({
    data() {
      return {
        today: '星期四'
      };
    }
  }).mount('#app');
</script>

✅ 如果你想改成“星期五”，只需要修改 today 的值：

today: '星期五'

页面会自动刷新，不需要手动操作 DOM！

2. 数据绑定指令

Vue 提供了一些“特殊语法”来帮助我们绑定数据、监听事件，它们通常以 : 或 @ 开头。

指令	作用	示例
`{{ 数据 }}`	插值表达式	显示变量内容
`v-text` / `v-html`	更新文本内容	`<p v-text="text"></p>`
`v-model`	双向绑定表单元素	`<input v-model="name">`
`v-on`	监听事件	`<button v-on:click="sayHi">点击我</button>`

示例代码：

<input v-model="username" placeholder="请输入名字">
<p>你输入的是：{{ username }}</p>

只要你输入内容，下方的文字也会随之改变！

3. 组件（Component）

组件就像是一个个乐高积木。你可以把一些重复使用的结构封装成组件，这样就可以反复调用。

比如，我们可以创建一个按钮组件：

const MyButton = {
  template: `<button @click="onClick">点击次数：{{ count }}</button>`,
  data() {
    return {
      count: 0
    };
  },
  methods: {
    onClick() {
      this.count++;
    }
  }
};

然后在主页面中使用这个组件：

createApp({
  components: {
    MyButton
  }
}).mount('#app');

最后在 HTML 中调用它：

<my-button></my-button>

每次点击都会记录点击次数 ✅

4. 生命周期（LifeCycle）

每个 Vue 实例或组件都有自己的“生命周期”阶段，就像人的一生一样有出生、成长、结束的过程。

常用生命周期钩子函数：

方法名	用途
`onBeforeMount()`	实例即将渲染前
`onMounted()`	实例渲染完成后（DOM 已生成）
`onBeforeUnmount()`	销毁前
`onUnmounted()`	实例已销毁

示例：

createApp({
  mounted() {
    alert('页面加载完成！');
  }
}).mount('#app');

每当你打开这个页面，就会弹出一个提示框！

四、实战项目：做一个简单的待办事项列表

接下来我们将一步步做一个实用的小项目：待办事项清单（Todo List）

1. 功能目标

展示一个任务列表
支持添加新任务
支持删除任务

2. 完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Vue 待办清单</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>我的待办清单</h1>

    <input v-model="newTask" @keyup.enter="addTask" placeholder="添加新任务" />
    <button @click="addTask">添加</button>

    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task }}
        <button @click="removeTask(index)">删除</button>
      </li>
    </ul>
  </div>

  <script>
    const app = createApp({
      data() {
        return {
          newTask: '',
          tasks: []
        };
      },
      methods: {
        addTask() {
          if (this.newTask.trim() !== '') {
            this.tasks.push(this.newTask);
            this.newTask = '';
          }
        },
        removeTask(index) {
          this.tasks.splice(index, 1);
        }
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

3. 说明

v-model="newTask"：让输入框与变量双向绑定
@keyup.enter="addTask"：按下回车键也可以添加任务
v-for：遍历数组生成列表项
splice 方法用于删除指定位置的任务

✅ 运行效果：

你将在页面上看到一个输入框和一个任务列表，可以添加和删除任务！

五、常见问题解答（FAQ）

Q1：为什么用了 Vue 页面不更新？

✅ 答案：检查你的变量是否在 data() 中定义。Vue 只能响应在 data 中声明的变量的变化。

Q2：`{{}}` 显示错误怎么办？

✅ 答案：可能是拼写错误或未正确绑定变量，请确保变量名完全匹配，且不要漏掉引号等。

Q3：点击按钮没反应怎么办？

✅ 答案：检查是否忘记给方法加括号，或者事件名写错，如：@click="doSomething()"。

Q4：能不能直接操作 DOM？

✅ 答案：虽然 Vue 不鼓励直接操作 DOM，但在某些情况下仍可通过 ref 获取 DOM 元素。

六、下一步学习路径建议

你现在已经掌握了 Vue 的基础用法！接下来可以继续深入以下几个方向：

阶段	学习内容
初级	Vue 事件处理、计算属性、条件渲染
中级	Vue 组件通信、路由管理（Vue Router）、状态管理（Vuex/Pinia）
高级	TypeScript + Vue、Vue 3 Composition API、项目实战

七、总结

通过本文你已经了解了：

✅ Vue 是什么
✅ 如何搭建环境
✅ Vue 的核心概念：数据绑定、组件、生命周期
✅ 实战了一个完整的 todo 列表项目
✅ 常见问题解决技巧
✅ 后续学习方向建议

只要坚持动手实践，不断写项目练习，你很快就能掌握 Vue，并做出属于自己的炫酷网站！

🎉 祝你在 Vue 学习之路上越走越远！

标签:GitHubReact

最热最新

暂无评论

为你推荐

暂无相关推荐

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

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

二、环境准备：如何开始使用 Vue

1. 准备工具

2. 第一个 Vue 程序（无须安装 Vue）

示例代码：

3. 使用开发工具（可选）

安装 Node.js 和 npm

使用 Vue CLI 创建项目（高级）

三、Vue 核心概念通俗讲解

1. 数据驱动视图（Data Driven View）

示例：

2. 数据绑定指令

示例代码：

3. 组件（Component）

比如，我们可以创建一个按钮组件：

4. 生命周期（LifeCycle）

示例：

四、实战项目：做一个简单的待办事项列表

1. 功能目标

2. 完整代码

3. 说明

五、常见问题解答（FAQ）

Q1：为什么用了 Vue 页面不更新？

Q2：`{{}}` 显示错误怎么办？

Q3：点击按钮没反应怎么办？

Q4：能不能直接操作 DOM？

六、下一步学习路径建议

推荐学习路线：

推荐资源

七、总结

评论 0

为你推荐

精选内容

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

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

二、环境准备：如何开始使用 Vue

1. 准备工具

2. 第一个 Vue 程序（无须安装 Vue）

示例代码：

3. 使用开发工具（可选）

安装 Node.js 和 npm

使用 Vue CLI 创建项目（高级）

三、Vue 核心概念通俗讲解

1. 数据驱动视图（Data Driven View）

示例：

2. 数据绑定指令

示例代码：

3. 组件（Component）

比如，我们可以创建一个按钮组件：

4. 生命周期（LifeCycle）

示例：

四、实战项目：做一个简单的待办事项列表

1. 功能目标

2. 完整代码

3. 说明

五、常见问题解答（FAQ）

Q1：为什么用了 Vue 页面不更新？

Q2：{{}} 显示错误怎么办？

Q3：点击按钮没反应怎么办？

Q4：能不能直接操作 DOM？

六、下一步学习路径建议

推荐学习路线：

推荐资源

七、总结

评论 0

为你推荐

相关推荐

精选内容

Q2：`{{}}` 显示错误怎么办？