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

GC观察员

2025-06-25 13:34

阅读 683

开篇：Vue 是什么？我能用它做什么？

你可能听说过 React、Angular，而 Vue 也是一个非常流行的 JavaScript 框架。它的目标是让网页开发更简单、高效。

你可以用 Vue 来构建交互丰富的网页应用，比如管理系统、电商网站、数据仪表盘，甚至手机 App（通过 Vue 的扩展库如 Vue Native）。

✅ Vue 的三大优势：

容易上手：语法简洁，学习曲线低。
渐进式结构：可以一点点地引入到已有项目中，不需要一开始就大改。
生态完善：社区活跃，配套工具丰富，文档清晰。

环境准备：开始写你的第一个 Vue 程序！

在写代码之前，我们需要搭建一个基本的开发环境。别担心，我们不会一下子搞复杂的东西。

方法一：使用 CDN 引入（适合初学者快速体验）

这是最简单的做法，直接在 HTML 文件中引入 Vue。

步骤：

打开任意文本编辑器（推荐 VSCode）。
创建一个文件，比如叫 index.html。
输入以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个 Vue 页面</title>
  <!-- 引入 Vue -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">{{ message }}</div>

  <script>
    const { createApp } = Vue;

    // 创建 Vue 应用
    const app = createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    });

    // 挂载到页面上的 #app 元素
    app.mount('#app');
  </script>
</body>
</html>

双击这个文件打开浏览器，你应该看到“Hello Vue!”被显示出来。

✅ 提示：这就是 Vue 的第一个程序了！你已经成功把数据绑定到了页面上。

核心概念：理解 Vue 的几个关键词

为了写出更复杂的 Vue 页面，你需要了解这几个核心概念。

1. 数据绑定 —— 把变量显示到页面上

上面例子中 {{ message }} 就是数据绑定的基本形式。

示例：

<div id="app">姓名：{{ name }}</div>
<script>
const app = Vue.createApp({
  data() {
    return {
      name: "小明"
    };
  }
});
app.mount('#app');
</script>

当你修改 name 的值，页面会自动更新。

2. 方法（methods）—— 让用户和页面互动

你可以定义方法来响应用户的操作，比如点击按钮。

示例：

<div id="app">
  <button @click="sayHello">点我打招呼</button>
  <p>{{ greeting }}</p>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      greeting: ''
    };
  },
  methods: {
    sayHello() {
      this.greeting = '你好，很高兴见到你！';
    }
  }
});
app.mount('#app');
</script>

💡 解释：

@click="sayHello" 表示当按钮被点击时，执行 sayHello 方法。
this 表示当前 Vue 实例的数据。

3. 条件渲染 v-if 和 v-show

你可以根据条件决定是否显示某些内容。

示例：

<div id="app">
  <input type="checkbox" v-model="isVisible"> 显示隐藏内容
  <p v-if="isVisible">这段文字只有在复选框勾选时才显示。</p>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      isVisible: false
    };
  }
});
app.mount('#app');
</script>

📌 区别：

v-if 是真正的删除或添加 DOM。
v-show 是通过 CSS 控制显示和隐藏。

4. 列表渲染 v-for

如果你有一组数据，可以用 v-for 来循环展示它们。

示例：

<ul id="app">
  <li v-for="item in items">{{ item }}</li>
</ul>

<script>
const app = Vue.createApp({
  data() {
    return {
      items: ['苹果', '香蕉', '橙子']
    };
  }
});
app.mount('#app');
</script>

输出结果就是三个水果名称组成的列表。

实战项目：做一个待办事项（Todo List）

我们要动手做个简单的 Todo List（待办清单），这是学习任何前端框架的经典练习。

第一步：创建页面结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的待办清单</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h2>我的待办清单</h2>
    
    <input v-model="newTask" placeholder="输入新任务" />
    <button @click="addTask">添加</button>

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

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

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

功能说明：

功能	实现方式
添加任务	监听按钮点击，将输入框内容加入数组
显示任务	用 `v-for` 循环展示数组内容
删除任务	给每个任务绑定删除事件，用 `splice` 删除数组项

常见问题解答（FAQ）

❓ Q1：为什么用 Vue 而不是原生 JS 或 jQuery？

Vue 自动处理数据和界面的同步，你不用手动操作 DOM。
结构更清晰，利于团队协作和维护。

❓ Q2：为什么用了 `this`？

在 Vue 中，this 指向当前实例对象，它是访问所有属性和方法的关键。

❓ Q3：如何查看 Vue 版本？

打开浏览器控制台（按 F12），输入：

Vue.version

❓ Q4：为什么用 `v-model`？

v-model 是双向绑定指令，用于输入框和数据之间的实时同步。

学习建议：下一步怎么学？

恭喜你完成第一个 Vue 项目！接下来你可以沿着这些方向继续学习：

🔹 进阶路线图：

推荐学习路径	内容简介
组件化开发	学习 Vue 最重要的功能之一：组件（component），让你能拆分页面、复用逻辑
Vue Router	构建多页面应用，实现页面跳转与导航
Vuex / Pinia	学习状态管理，多个组件之间共享数据
Axios & API 请求	向后端获取数据，在 Vue 中调用接口
Vue CLI / Vite 工具链	学习使用脚手架工具搭建更专业的项目结构

📚 推荐资源：

Vue 中文官网
B站搜索“Vue入门教程”有很多新手友好的讲解视频
MDN Web Docs 学习 HTML/CSS/JS 基础知识（对掌握 Vue 至关重要）

总结

这篇教程从零开始介绍了 Vue.js 的安装、基本语法和实战项目，并给出常见问题的解决方法。希望你能感受到 Vue 是多么好用又有趣的前端框架。

坚持实践是学好编程的关键。现在就动手写一个自己的小程序吧，哪怕只是一个记事本或者天气查询小工具，你就会越来越熟练！

祝你早日成为 Vue 开发高手 🚀！

标签:综合教程区块链Javascript

最热最新

暂无评论

为你推荐

暂无相关推荐

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

开篇：Vue 是什么？我能用它做什么？

✅ Vue 的三大优势：

环境准备：开始写你的第一个 Vue 程序！

方法一：使用 CDN 引入（适合初学者快速体验）

步骤：

核心概念：理解 Vue 的几个关键词

1. 数据绑定 —— 把变量显示到页面上

示例：

2. 方法（methods）—— 让用户和页面互动

示例：

3. 条件渲染 v-if 和 v-show

示例：

4. 列表渲染 v-for

示例：

实战项目：做一个待办事项（Todo List）

第一步：创建页面结构

功能说明：

常见问题解答（FAQ）

❓ Q1：为什么用 Vue 而不是原生 JS 或 jQuery？

❓ Q2：为什么用了 `this`？

❓ Q3：如何查看 Vue 版本？

❓ Q4：为什么用 `v-model`？

学习建议：下一步怎么学？

🔹 进阶路线图：

总结

评论 0

为你推荐

精选内容

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

开篇：Vue 是什么？我能用它做什么？

✅ Vue 的三大优势：

环境准备：开始写你的第一个 Vue 程序！

方法一：使用 CDN 引入（适合初学者快速体验）

步骤：

核心概念：理解 Vue 的几个关键词

1. 数据绑定 —— 把变量显示到页面上

示例：

2. 方法（methods）—— 让用户和页面互动

示例：

3. 条件渲染 v-if 和 v-show

示例：

4. 列表渲染 v-for

示例：

实战项目：做一个待办事项（Todo List）

第一步：创建页面结构

功能说明：

常见问题解答（FAQ）

❓ Q1：为什么用 Vue 而不是原生 JS 或 jQuery？

❓ Q2：为什么用了 this？

❓ Q3：如何查看 Vue 版本？

❓ Q4：为什么用 v-model？

学习建议：下一步怎么学？

🔹 进阶路线图：

总结

评论 0

为你推荐

相关推荐

精选内容

❓ Q2：为什么用了 `this`？

❓ Q4：为什么用 `v-model`？