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

♂陈静

2025-06-29 22:48

阅读 370

一、开篇：什么是 Vue.js？它用来做什么？

Vue.js 是一个用于构建用户界面的 JavaScript 框架。你可以把它看作是一个工具，帮助你更轻松地编写交互式网页。

简单来说：

不使用框架：你需要自己处理很多细节（比如页面数据变化后手动刷新界面）。
使用 Vue.js：它会自动帮你管理这些内容，让你专注于逻辑和功能开发。

Vue 主要用于前端开发，适合做单页应用（SPA），例如管理系统、后台控制面板、移动端网页等。

二、环境准备：开始写第一行 Vue 代码

第一步：安装 VS Code（代码编辑器）

打开浏览器，访问 https://code.visualstudio.com/
点击下载适合自己系统的版本
安装完成后打开 VS Code

📌 提示：VS Code 是开发者中最流行的代码编辑器之一，免费且功能强大。

第二步：创建项目文件夹

在电脑上新建一个文件夹，比如 my-vue-project
用 VS Code 打开这个文件夹

第三步：引入 Vue

最简单的做法是在 HTML 文件中直接通过 CDN 引入 Vue：

在 VS Code 中新建一个文件：index.html
写入以下内容：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>我的第一个 Vue 页面</title>
  <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>

右键点击 index.html 文件 → 使用默认程序打开（推荐 Chrome 浏览器）
页面应显示：Hello, Vue!

✅ 到这里为止，你已经成功运行了你的第一个 Vue 程序！

三、核心概念详解（带代码示例）

CSS动画效果展示-1

三、核心概念详解（带代码示例）

1. 数据绑定：让 HTML 自动更新

我们刚才看到的 {{ message }} 就是最简单的数据绑定方式 —— 数据变了，页面也会自动变。

示例：实时更新内容

<div id="app">
  <input v-model="message" placeholder="输入内容试试">
  <p>当前内容是：{{ message }}</p>
</div>

<script>
  const { createApp } = Vue;

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

📌 解释：

v-model 是 Vue 的一个指令，表示“双向绑定”
输入框中的内容会自动同步到变量 message，反过来也一样

2. 方法与事件处理：响应用户的操作

我们可以在 Vue 中定义方法，并通过按钮点击来调用它们。

示例：点击按钮改变文本

<div id="app">
  <p>{{ message }}</p>
  <button @click="changeMessage">点击我</button>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        message: '原始内容'
      };
    },
    methods: {
      changeMessage() {
        this.message = '内容被改变了！';
      }
    }
  }).mount('#app');
</script>

📌 解释：

@click 表示监听“点击”事件
methods 是存放函数的地方
this.message 表示访问 data 中的 message 值

3. 条件渲染：根据条件展示不同内容

有时候我们希望某些内容只在特定条件下才显示出来。

示例：根据状态显示不同信息

<div id="app">
  <p v-if="isLoggedIn">欢迎回来，用户！</p>
  <p v-else>请先登录</p>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        isLoggedIn: false
      };
    }
  }).mount('#app');
</script>

📌 解释：

v-if 和 v-else 类似于 JavaScript 中的 if...else 结构
修改 isLoggedIn 的值即可切换显示效果

4. 列表渲染：循环展示多个数据项

如果你有一组数据想要展示成列表，可以用 v-for。

示例：展示水果列表

<div id="app">
  <ul>
    <li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
  </ul>
</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        fruits: ['苹果', '香蕉', '橘子']
      };
    }
  }).mount('#app');
</script>

📌 解释：

v-for 是循环结构，类似 JS 中的 for 循环
:key 是必须属性，用来告诉 Vue 每个元素是唯一的

四、实战项目：做一个待办事项清单（To-do List）

我们将把前面学过的知识点综合运用，做一个可以添加、删除、修改任务的小程序。

实现目标：

展示任务列表
支持新增任务
支持删除任务

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>待办事项清单</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>我的待办事项</h1>
    
    <input v-model="newItem" @keyup.enter="addTodo" placeholder="输入新任务">
    <button @click="addTodo">添加</button>
    
    <ul>
      <li v-for="(item, index) in items" :key="item">
        {{ item }}
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          newItem: '',
          items: ['学习 Vue', '练习编程', '阅读文档']
        };
      },
      methods: {
        addTodo() {
          if (this.newItem.trim()) {
            this.items.push(this.newItem);
            this.newItem = '';
          }
        },
        removeItem(index) {
          this.items.splice(index, 1);
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

🎉 运行效果说明：

输入框回车或点击“添加”按钮可增加任务
每个任务后有一个“删除”按钮，点击可移除该项
默认列出几个初始任务

五、常见问题解答

Q1：为什么页面没反应，或者报错？

✅ 检查是否正确引入了 Vue.js（路径对吗？）
✅ 查看浏览器控制台是否有错误信息（按 F12 打开控制台）
✅ 检查 Vue 版本是否为最新的 3.x（有些教程可能是 2.x 的语法）

Q2：v-model 和 v-bind 有什么区别？

v-model 是双向绑定，常用于输入框等控件
v-bind 是单向绑定，用于给 HTML 元素设置属性，如 :class="..."、:src="..."

Q3：data 是什么意思？

data() 是返回一个对象，里面放的是 Vue 组件中所有需要被自动追踪的状态（变量）
当这些变量变化时，页面上对应的显示也会自动更新

Q4：this 是什么？

在 Vue 中，this 指代组件实例本身
通过 this.xxx 可以访问 data、methods、props 等

六、学习建议

恭喜你已经完成了 Vue.js 的入门学习！

接下来你可以尝试：

继续学习 Vue 核心特性：
- 模板语法进阶
- 计算属性（computed）
- 监听属性（watch）
- 生命周期钩子（mounted、created 等）
了解 Vue Router：
- 实现多页面跳转
- 构建完整的单页应用
尝试 Vuex / Pinia：
- 学习如何管理大型项目的全局状态
使用 Vue CLI 创建项目：
- 接触现代前端开发流程（Webpack、Babel、ES6+）
- 安装命令：npm install -g @vue/cli
参考官方文档：
- 中文官方文档地址：https://cn.vuejs.org/

总结

Vue.js 是一个非常适合初学者上手的前端框架。它的语法简洁、文档清晰、社区活跃。只要你愿意动手实践，一步步跟着教程练习，很快就能独立完成自己的小项目。

持续练习 + 遇到问题善用搜索和文档，你就已经在成为 Vue 工程师的路上了！💪

标签:技术分享项目

最热最新

暂无评论

为你推荐

暂无相关推荐

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

一、开篇：什么是 Vue.js？它用来做什么？

二、环境准备：开始写第一行 Vue 代码

第一步：安装 VS Code（代码编辑器）

第二步：创建项目文件夹

第三步：引入 Vue

三、核心概念详解（带代码示例）

1. 数据绑定：让 HTML 自动更新

示例：实时更新内容

2. 方法与事件处理：响应用户的操作

示例：点击按钮改变文本

3. 条件渲染：根据条件展示不同内容

示例：根据状态显示不同信息

4. 列表渲染：循环展示多个数据项

示例：展示水果列表

四、实战项目：做一个待办事项清单（To-do List）

实现目标：

完整代码如下：

五、常见问题解答

Q1：为什么页面没反应，或者报错？

Q2：v-model 和 v-bind 有什么区别？

Q3：data 是什么意思？

Q4：this 是什么？

六、学习建议

总结

评论 0

为你推荐

精选内容