0
0
0

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

独立开发小站
2025-06-13 02:33
阅读 291

开篇：Vue 是什么？能做什么？

开篇：Vue 是什么？能做什么？

同学们好！如果你是前端开发的初学者，那么你来对地方了。今天我们要学习的是一个非常流行的 JavaScript 框架 —— Vue.js（简称 Vue）。

通俗理解一下 Vue：

想象你在做一张“填字游戏”，传统方式是手动查找答案、填写到对应位置。而使用 Vue 后，就像你有一个智能助手，当你输入一个字时，它会自动帮你填上相关的部分，甚至还能知道什么时候该重新计算或者更新内容。

在编程领域里，这叫“响应式数据绑定”。也就是说，当你的数据发生变化时，页面上显示的内容也会自动更新，不需要你去手动操作 DOM（HTML元素）。

Vue 能干什么？

  • 构建用户交互界面（比如表单提交、按钮点击、动态内容展示等）
  • 开发单页应用（SPA），例如后台管理系统、电商前台、博客平台
  • 与后端 API 结合，实现前后端分离开发

✅ 总结一句话：Vue 让你用更少的代码写更复杂的前端功能。

环境准备：搭建你的第一个 Vue 项目环境

环境准备：搭建你的第一个 Vue 项目环境

要开始编写 Vue 项目，我们先从最简单的方式入手 —— 使用在线编辑器，后面再过渡到本地开发。

第一步：在线体验 Vue —— 用 Codepen 快速上手

推荐网站：https://codepen.io

  1. 打开 Codepen，新建一个项目
  2. 在 HTML 区域引入 Vue：
<div id="app">{{ message }}</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  1. 在 JS 区域写 Vue 代码：
const { createApp } = Vue;

createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
}).mount('#app');
  1. 查看效果：页面会显示 Hello, Vue!，你也可以试着修改 message 的值，看看会不会自动更新。

💡 提示：在线编辑器适合新手快速试手，但不适合长期开发。

第二步：安装本地开发环境（建议使用 VSCode）

工具清单：

安装 Vue CLI：

打开终端（Windows 可以用 CMD 或 PowerShell，Mac 用 Terminal），输入：

npm install -g @vue/cli

然后创建一个新的 Vue 项目：

vue create my-first-vue-app

选择默认配置，等待项目生成完成后：

cd my-first-vue-app
npm run serve

浏览器打开 http://localhost:8080，就能看到欢迎页面了！

核心概念：一文讲清 Vue 中的关键知识点（附例子）

核心概念：一文讲清 Vue 中的关键知识点（附例子）

现在让我们进入 Vue 的核心世界。以下是一些最基础、最重要的概念和术语。

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

这是 Vue 的核心特性之一。

我们来看看这个结构：

const app = createApp({
  data() {
    return {
      name: "小明"
    };
  }
});

这段代码定义了一个 name 的变量，它的值是 "小明"。

接下来我们可以这样在 HTML 页面中使用它：

<div id="app">你好，{{ name }}！</div>

Vue 会自动将 name 显示为 “小明”。

你可以试试在开发者控制台运行这段代码，然后执行：

app.$data.name = "小红";

你会发现页面中的名字变成了“小红”！

✅ 这就是 Vue 最基本的能力：当你修改数据的时候，页面内容会自动变化

2. 方法（Methods）

方法是用来处理一些逻辑或事件操作的地方。

举个简单的例子：

createApp({
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}).mount('#app');

对应的 HTML：

<div id="app">
  <p>当前数字：{{ count }}</p>
  <button @click="increment">加1</button>
</div>

解释：

  • methods 中定义了一个叫做 increment() 的方法
  • 当点击按钮时，调用了这个方法
  • 它的作用是让 count 增加1
  • 因为是响应式的数据，所以页面也会自动刷新

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

有时候你想根据某个条件决定是否显示某些内容，可以用 v-if 或 v-show。

举个例子：

createApp({
  data() {
    return {
      show: true
    };
  }
}).mount('#app');

HTML 内容：

<div id="app">
  <p v-if="show">我现在显示着呢</p>
  <p v-show="!show">我不显示</p>
  <button @click="show = !show">切换显示状态</button>
</div>

区别简要说明：

  • v-if 是完全“删除/添加”元素
  • v-show 只是切换 CSS 的 display 属性

4. 列表渲染 v-for

如果你想循环展示一组数据，可以使用 v-for。

例子：

createApp({
  data() {
    return {
      items: ["苹果", "香蕉", "橙子"]
    };
  }
}).mount('#app');

HTML：

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

结果：

  • 页面上会显示三个列表项：苹果、香蕉、橙子
  • 你可以尝试往 items 数组中添加新内容，如 this.items.push("葡萄")，看看页面如何变化

5. 数据双向绑定 v-model

有些时候，你希望用户输入的内容能实时影响数据，反之亦然。这就是“双向绑定”。

常用场景：输入框输入搜索文字、填写表单

createApp({
  data() {
    return {
      userInput: ""
    };
  }
}).mount('#app');

HTML：

<div id="app">
  你输入的内容是：{{ userInput }}
  <input v-model="userInput" placeholder="在这里输入..." />
</div>

这样用户每输入一个字，上面的文字就会同步更新！

实战项目：做一个简易待办事项（TodoList）

实战项目：做一个简易待办事项（TodoList）

我们现在来做一个实用的小项目：待办事项管理器

功能点：

  • 输入一个任务
  • 添加到列表中
  • 删除某一项任务
  • 清空所有任务

步骤 1：初始化数据

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);
    },
    clearTasks() {
      this.tasks = [];
    }
  }
});

app.mount("#app");

步骤 2：编写 HTML 页面

<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="removeTask(index)">删除</button>
    </li>
  </ul>

  <!-- 清除按钮 -->
  <button @click="clearTasks">清除全部</button>
</div>

步骤 3：测试功能

你可以把这个项目放在你自己的 Codepen 或 VSCode 项目中，运行并测试添加、删除、清空功能是否正常。

恭喜你！你已经完成了人生第一个 Vue 应用 😎

新手常见问题解答

下面是一些很多刚学 Vue 的人常问的问题，我为你整理了解答：

❓ 为什么 Vue 变量前面要用 this.？

在 Vue 的 methods 中，this 表示的是当前 Vue 实例本身，所以你要通过 this.xxx 来访问你在 data() 中定义的变量。

❓ 我写的代码没反应怎么办？

检查以下几点：

  • 是否正确挂载了 #app
  • Vue 脚本是否加载成功
  • 浏览器是否有报错信息（按 F12 打开控制台查看）

❓ v-if 和 v-show 有什么区别？

简单说：

  • v-if 是条件判断，如果为 false，则 DOM 元素不存在
  • v-show 则是控制元素显示隐藏（始终存在，只是隐藏了）

一般动态切换次数频繁用 v-show，否则用 v-if

❓ Vue 如何监听数组的变化？

Vue 可以监听数组的变更，但不要直接通过索引修改数组内容，应该使用数组的方法：

this.tasks.push("新任务"); // 推荐 ✔️
this.tasks[0] = "新的值";   // 不推荐 ✖️

如果必须修改特定索引，请使用：

this.$set(this.tasks, index, newValue);

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

你现在已经有能力写出一些简单的 Vue 页面啦！那接下来该怎么继续学习呢？

🚀 进阶学习路线建议：

  1. 学习 Vue 组件（Component）：

    • 把一个项目拆成多个组件
    • 比如 Header、Content、Footer 各是一个组件

  2. 使用路由（Vue Router）：

    • 实现多页面跳转
    • 创建 SPA（单页应用）

  3. 使用 Vuex / Pinia：

    • 状态管理工具，用于共享数据

  4. 学习生命周期钩子函数：

    • created、mounted、updated 等等

  5. 接口请求（Axios / Fetch）：

    • 向服务器请求数据，并展示在页面上

  6. 项目实战：

    • 做一个小商城、记账本、天气预报等完整项目

  7. 学习 Vue 3 Composition API：

    • 使用 setup() 方式编写代码，更加灵活清晰

🧰 推荐学习资源：

总结

学到这里，你已经掌握了 Vue 最基础的核心知识和项目实践能力。虽然还有很多进阶内容等着你，但请记住：

🔥 编程不是背代码，而是不断动手、思考和解决问题的过程。

坚持下去，你一定会成为一名优秀的前端开发者！

🎯 目标达成 ✅
✅ 你会用 Vue 写出响应式页面
✅ 你能完成一个 TodoList 实战项目
✅ 你清楚下一步该学什么

加油吧，少年！你的前端之路才刚刚开始 😎

标签:JavascriptReactSpringboot

评论 0

最热最新
暂无评论

为你推荐

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

相关推荐

暂无相关推荐

精选内容

暂无精选内容