跳到主要内容

第 1 节：环境搭建与第一个 Vue 应用

📚 本节目标​

  • 了解什么是 Vue
  • 学会用最简单的方式引入 Vue（CDN 方式）
  • 创建你的第一个 Vue 应用
  • 理解 Vue 实例的基本结构

一、什么是 Vue？​

Vue（读音类似"view"）是一个用来构建网页界面的 JavaScript 框架。

大白话解释：

  • 传统方式：你要手动用 JavaScript 操作 DOM（比如 document.getElementById()），代码很繁琐
  • 使用 Vue：你只需要关注数据，Vue 会自动帮你更新页面，写起来更简单、更直观

二、环境搭建（CDN 方式）​

什么是 CDN？​

CDN 就是一个网络链接，通过它可以直接引入 Vue，无需下载、无需安装，适合新手快速上手。

操作步骤​

第 1 步：创建一个 HTML 文件

  • 在你的电脑上新建一个文件夹（比如叫 vue-learning）
  • 在文件夹里新建一个文件，命名为 index.html

第 2 步：用文本编辑器打开 index.html（推荐用 VS Code、Sublime Text 或记事本）

第 3 步：复制下面的完整代码到文件中

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个 Vue 应用</title>
</head>
<body>
    <!-- 这是 Vue 要控制的区域 -->
    <div id="app">
        <h1>{{ message }}</h1>
    </div>

    <!-- 通过 CDN 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    
    <!-- 你的 Vue 代码写在这里 -->
    <script>
        // 使用 Vue 的 createApp 方法创建一个应用
        const { createApp } = Vue;

        // 创建 Vue 应用实例
        createApp({
            // data 函数：定义数据
            data() {
                return {
                    message: '你好，Vue！'  // 定义一个叫 message 的数据
                }
            }
        }).mount('#app');  // 挂载到 id 为 app 的元素上
    </script>
</body>
</html>

第 4 步：保存文件，然后用浏览器打开 index.html

三、代码详解（逐行解释）​

HTML 部分​

<div id="app">
    <h1>{{ message }}</h1>
</div>
  • <div id="app">：这是 Vue 控制的区域（像一个"舞台"）
  • {{ message }}：插值表达式，两个花括号包裹数据名，Vue 会自动把 message 的值显示在这里

JavaScript 部分​

const { createApp } = Vue;  // 从 Vue 对象中取出 createApp 方法
  • 这是一种叫"解构赋值"的写法，等同于 const createApp = Vue.createApp;
createApp({
    data() {
        return {
            message: '你好,Vue!'
        }
    }
}).mount('#app');

拆解说明：

  1. createApp({ ... })：创建一个 Vue 应用，花括号里是配置项
  2. data() { return { ... } }：定义数据的地方
    • 必须是一个函数
    • 函数要返回一个对象，对象里就是你的数据
  3. message: '你好,Vue!'：定义了一个叫 message 的数据，值是一段文字
  4. .mount('#app')：把 Vue 应用"挂载"到 HTML 中 id="app" 的元素上

四、预期效果​

打开浏览器后,你应该看到页面上显示：

你好,Vue!

五、试一试：修改数据​

把代码中的 message: '你好,Vue!' 改成 message: '我是 Vue 新手！'，保存后刷新浏览器，看看页面有什么变化。

预期效果：页面显示变成了"我是 Vue 新手！"

六、核心概念总结​

概念通俗解释代码中的体现
Vue 实例一个 Vue 应用的"大脑"createApp({ ... })
data存放数据的地方data() { return { message: '...' } }
插值表达式在 HTML 中显示数据的语法{{ message }}
mount把 Vue 实例和 HTML 元素连接起来.mount('#app')

七、新手常见错误​

❌ 错误 1：忘记引入 Vue​

<!-- 少了这一行 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

现象：浏览器控制台报错 Vue is not defined

❌ 错误 2：data 没写成函数​

// 错误写法
data: {
    message: '你好'
}

// 正确写法
data() {
    return {
        message: '你好'
    }
}

❌ 错误 3：mount 的选择器写错​

.mount('#app')   // ✅ 正确：id 选择器用 #
.mount('app')    // ❌ 错误：少了 #

八、练习题​

练习 1：修改显示内容​

把页面上的文字改成"欢迎来到 Vue 的世界！"

点击查看答案
data() {
    return {
        message: '欢迎来到 Vue 的世界！'
    }
}

练习 2：添加新的数据​

在页面上再显示一行文字，内容是你的名字。

提示：

  1. 在 data() 里再定义一个数据（比如叫 name）
  2. 在 HTML 中用 {{ name }} 显示它
点击查看答案
<div id="app">
    <h1>{{ message }}</h1>
    <p>我的名字：{{ name }}</p>
</div>

<script>
    const { createApp } = Vue;
    
    createApp({
        data() {
            return {
                message: '你好,Vue!',
                name: '小明'  // 新增的数据
            }
        }
    }).mount('#app');
</script>

九、本节重点回顾​

✅ Vue 通过 CDN 引入最简单，一行代码搞定
✅ createApp() 创建 Vue 实例
✅ data() 函数返回数据对象
✅ {{ }} 插值表达式在 HTML 中显示数据
✅ .mount() 把 Vue 实例挂载到页面元素上

🎉 恭喜你完成第一节课！

下一节我们将学习：模板语法 —— 学会更多在 HTML 中使用数据的方法（v-text、v-html、v-bind 等指令）。