【Vue】03 Vue技术——Vue.js 入门学习笔记：Hello World 案例详解

JosieBook2025-12-18 15:49

文章目录

    • [🌟 示例代码回顾](#🌟 示例代码回顾)
    • [🔍 一、Vue 模板调用的过程详解](#🔍 一、Vue 模板调用的过程详解)
      • [✅ 步骤 1：引入 Vue 库](#✅ 步骤 1：引入 Vue 库)
      • [✅ 步骤 2：准备一个 DOM 容器（`el`）](#✅ 步骤 2：准备一个 DOM 容器（el）)
      • [✅ 步骤 3：创建 Vue 实例并挂载](#✅ 步骤 3：创建 Vue 实例并挂载)
        • [🔹 解析 `new Vue({})`](#🔹 解析 new Vue({}))
        • [🔹 数据绑定过程（插值语法）](#🔹 数据绑定过程（插值语法）)
      • [✅ 步骤 4：Vue 的响应式系统生效](#✅ 步骤 4：Vue 的响应式系统生效)
    • [🧱 二、容器（`el`）的两个核心作用](#🧱 二、容器（el）的两个核心作用)
      • [✅ 作用 1：**作为 Vue 实例的"服务范围"**](#✅ 作用 1：作为 Vue 实例的“服务范围”)
      • [✅ 作用 2：**承载 Vue 模板（Template）**](#✅ 作用 2：承载 Vue 模板（Template）)
    • [📌 三、为什么外部的 `大小{{name}}` 没有被渲染？](#📌 三、为什么外部的 大小{{name}} 没有被渲染？)
      • [❓ 原因分析：](#❓ 原因分析：)
    • [🛠 四、其他重要细节说明](#🛠 四、其他重要细节说明)
      • [1. `Vue.config.productionTip = false`](#1. Vue.config.productionTip = false)
      • [2. `data` 的作用与限制](#2. data 的作用与限制)
      • [3. 插值语法 `{{ }}` 的局限性](#3. 插值语法 {{ }} 的局限性)
    • [📌 五、对新增注释要点的深入解析](#📌 五、对新增注释要点的深入解析)
      • [1. **Vue 实例和容器是一一对应的**](#1. Vue 实例和容器是一一对应的)
      • [2. **真实开发中只有 Vue 实例，并且会配合着组件一起使用**](#2. 真实开发中只有 Vue 实例，并且会配合着组件一起使用)
      • [3. **`{{xxx}}` 中的 `xxx` 要写 JS 表达式，且可自动读取 `data` 中的所有属性**](#3. {{xxx}} 中的 xxx 要写 JS 表达式，且可自动读取 data 中的所有属性)
      • [4. **一旦 `data` 中的数据发生改变，页面中用到该数据的地方也会自动更新**](#4. 一旦 data 中的数据发生改变，页面中用到该数据的地方也会自动更新)
        • [工作原理简述（Vue 2）：](#工作原理简述（Vue 2）：)
        • 示例验证：
    • [✅ 总结：Vue Hello 案例完整流程图](#✅ 总结：Vue Hello 案例完整流程图)
    • [🎯 学习收获总结](#🎯 学习收获总结)
    • [🚀 下一步建议](#🚀 下一步建议)
    • [📚 结语](#📚 结语)

在学习 Vue.js 的过程中，第一个经典案例就是"Hello, Vue!"。本文将基于一个完整的 HTML 页面示例，详细讲解 Vue 实例的创建流程、模板调用机制、容器的作用 以及 数据绑定原理，帮助初学者全面理解 Vue 的基本工作方式。

🌟 示例代码回顾

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <!--
初识Vue:
1. 想让Vue工作，就必须创建一个Vue实例，要传入一个配置对象；
2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3. root容器里的代码被称为【Vue模板】；
4. Vue实例和容器是一一对应的；
5. 真实开发中只有Vue实例，并且会配合着组件一起使用；
6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
-->

<!--
注意区分：js表达式 和 js代码(语句)
-->

<!-- 
1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x = y ? 'a' : 'b'
-->

<!-- 
2. js代码(语句)：
(1). if(){}
(2). for(){}
-->

    <!-- 准备好一个容器-->
    <div id="root">
        <h1>Hello， {{name}}</h1>
        <h1>我的年龄是，{{age}}</h1>  
    </div>
    
    <h2>大小{{name}}</h2>

    <script type="text/javascript">
        // 关闭生产环境提示
        Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。
        
        // 创建Vue实例
        new Vue({
            el: '#root',
            data: {
                name: '张三123',
                age: 23
            }
        })
    </script>
</body>
</html>

运行结果如下：

复制代码 
Hello， 张三123
我的年龄是， 23
大小{{name}}

🔍 一、Vue 模板调用的过程详解

Vue 的核心思想是"声明式渲染 "，即通过模板（Template）与数据（Data）的绑定来实现视图自动更新。下面我们分步骤解析 Vue 模板是如何被调用和渲染的。

✅ 步骤 1：引入 Vue 库

html 复制代码 
<script type="text/javascript" src="../js/vue.js"></script>
  • 这行代码从本地路径加载了 Vue.js 文件。
  • Vue 必须先被引入，才能在页面中使用 new Vue() 创建实例。

⚠️ 注意：现代项目通常使用 CDN 或构建工具（如 Vite/webpack），但此处为入门教学，使用本地文件。

✅ 步骤 2：准备一个 DOM 容器（el）

html 复制代码 
<div id="root">
    <h1>Hello， {{name}}</h1>
    <h1>我的年龄是，{{age}}</h1>  
</div>
  • <div id="root"> 是 Vue 所控制的"根容器"。
  • 它的 ID 为 root，后续 Vue 实例会通过 el: '#root' 来绑定这个元素。

💡 "root" 容器的作用将在下文详述。

✅ 步骤 3：创建 Vue 实例并挂载

javascript 复制代码 
new Vue({
    el: '#root',
    data: {
        name: '张三123',
        age: 23
    }
})
🔹 解析 new Vue({})
  • new Vue()：创建一个新的 Vue 实例。
  • el: '#root'：指定 Vue 实例要接管哪个 DOM 元素（这里是 id="root" 的 div）。
  • data: { ... }：定义响应式数据，这些数据可以在模板中使用。
🔹 数据绑定过程（插值语法）

在模板中使用双大括号 {``{ }} 表达式：

html 复制代码 
<h1>Hello， {{name}}</h1>
  • Vue 会在初始化时扫描 #root 内的所有 {``{ }} 表达式。
  • 查找 data 中是否存在对应的属性（如 name）。
  • 如果存在，则将该属性的值插入到对应位置。
  • 最终渲染为：<h1>Hello， 张三123</h1>

✅ 这个过程称为 插值表达式渲染，是 Vue 模板最基础的语法之一。

✅ 步骤 4：Vue 的响应式系统生效

当 data 中的数据发生变化时（例如 name = '李四'），Vue 会自动重新渲染模板中所有依赖该数据的部分。

🔄 响应式机制确保了"数据驱动视图"的特性。

🧱 二、容器（el）的两个核心作用

在 Vue 中，el 指定的容器（如本例中的 #root）具有以下两个关键作用：

✅ 作用 1：作为 Vue 实例的"服务范围"

  • Vue 实例只会管理 el 所指向的容器及其子元素。
  • 只有在这个容器内的内容，才能使用 Vue 的数据绑定、指令等特性。

✅ 示例说明：

html 复制代码 
<div id="root">
    <h1>{{name}}</h1> <!-- ✅ 可以访问 data 中的 name -->
</div>

<h2>大小{{name}}</h2> <!-- ❌ 不在 #root 内，无法响应式渲染 -->

🎯 结果：只有 #root 内的 {``{name}} 被替换为"张三123"，而外部的 大小{``{name}} 仍保持原样（未被解析）。
✅ 所以，容器决定了 Vue 的作用域。

✅ 作用 2：承载 Vue 模板（Template）

  • 容器内部的 HTML 代码被称为 Vue 模板。
  • 模板必须符合标准 HTML 规范，但可以混入 Vue 特有的语法（如 {``{ }}、v-if、v-for 等）。
  • Vue 会编译并解析模板中的特殊语法，将其转换为真实的 DOM。

💡 术语解释：

  • Vue 模板：包含 Vue 语法的 HTML 片段。
  • 模板编译：Vue 将模板转化为虚拟 DOM 并进行渲染。

📌 三、为什么外部的 大小{``{name}} 没有被渲染？

这是很多初学者容易困惑的问题。

❓ 原因分析：

html 复制代码 
<h2>大小{{name}}</h2>
  • 这个标签 不在 #root 容器内。
  • 因此，它不属于当前 Vue 实例的管理范围。
  • Vue 不会扫描或处理其内部的 {``{name}}。
  • 浏览器会直接将其当作普通文本输出，不会做任何替换。

✅ 结论：只有在 el 指定的容器内的模板才会被 Vue 处理。

🛠 四、其他重要细节说明

1. Vue.config.productionTip = false

javascript 复制代码 
Vue.config.productionTip = false
  • 用于关闭 Vue 在开发环境下打印的提示信息（如："You are running Vue in development mode..."）。
  • 生产环境中建议开启，但学习阶段可关闭以减少干扰。

2. data 的作用与限制

javascript 复制代码 
data: {
    name: '张三123',
    age: 23
}
  • data 中的数据是响应式的。
  • 只能在 el 指定的容器中使用。
  • 若想在外部使用，需通过事件、方法或全局状态管理（如 Vuex）实现。

3. 插值语法 {``{ }} 的局限性

  • 仅支持表达式，不能写语句。
  • 例如：{``{ if (name) { return 'yes' } }} 是非法的。
  • 支持简单的运算、函数调用等。

以下是针对你新增注释内容的补充讲解部分，仅包含需要追加的内容，可直接接在原文末尾：

📌 五、对新增注释要点的深入解析

1. Vue 实例和容器是一一对应的

在当前示例中，我们通过 el: '#root' 将 Vue 实例绑定到 <div id="root"> 容器上。这意味着：

  • 一个 Vue 实例只能控制一个根 DOM 元素（即容器）。
  • 该容器内的所有子元素都属于此实例的管理范围。
  • 不能 将同一个 Vue 实例同时挂载到多个 DOM 元素上（如 #root1 和 #root2）。
  • 若需管理多个区域，应创建多个 Vue 实例，或更推荐地------使用单个根实例 + 组件嵌套的方式（见下一点）。

✅ 因此，"一一对应"强调的是：一个实例 → 一个根容器，这是 Vue 2 的基本设计约束。

2. 真实开发中只有 Vue 实例，并且会配合着组件一起使用

虽然入门案例中我们直接操作 DOM 容器，但在实际项目（尤其是 Vue 2/3 的工程化开发）中：

  • 通常只创建一个 顶层 Vue 实例（称为"根实例"），挂载到一个全局容器（如 <div id="app"></div>）。
  • 所有页面内容均由组件（Component） 构成，而不是直接在模板中写大量 HTML。
  • 组件是可复用的 Vue 实例，具有自己的模板、数据、方法等。

例如：

js 复制代码 
// main.js（典型工程结构）
new Vue({
  render: h => h(App) // App 是根组件
}).$mount('#app')

💡 这意味着：初学时接触的"模板写在 HTML 里"的方式，仅用于教学；真实项目几乎全部使用组件化开发。

3. {``{xxx}} 中的 xxx 要写 JS 表达式，且可自动读取 data 中的所有属性

插值语法 {``{ }} 内部必须是 JavaScript 表达式（Expression），而非语句（Statement）。它具备以下特性：

  • 可直接访问 data 中定义的所有属性（如 name, age）。
  • 支持简单运算：{``{ age + 1 }}
  • 支持三元运算符：{``{ sex === '男' ? '先生' : '女士' }}
  • 支持方法调用（若在 methods 中定义）：{``{ formatDate() }}
  • 支持字符串拼接：{``{ 'Hello, ' + name }}

✅ 正确示例：

html 复制代码 
<h1>{{ name.toUpperCase() }}</h1>
<p>{{ age > 18 ? '成年人' : '未成年人' }}</p>

❌ 错误示例（语句不能用）：

html 复制代码 
<!-- 以下写法会报错 -->
{{ if (age > 18) { 'adult' } }}
{{ for (let i=0; i<5; i++) { i } }}

🔒 Vue 模板编译器会拒绝解析语句，因为表达式必须有返回值，而语句没有。

4. 一旦 data 中的数据发生改变，页面中用到该数据的地方也会自动更新

这是 Vue 响应式系统（Reactivity System） 的核心能力。

工作原理简述（Vue 2）：
  • Vue 在实例初始化时，使用 Object.defineProperty() 对 data 中的每个属性进行劫持。
  • 当属性被读取（getter）时，建立依赖关系（谁用了这个数据）。
  • 当属性被修改（setter）时，通知所有依赖它的视图进行更新。
示例验证：
js 复制代码 
const vm = new Vue({
  el: '#root',
  data: {
    count: 0
  }
})

// 1秒后修改数据
setTimeout(() => {
  vm.count = 100 // 页面中所有 {{count}} 会立即变为 100
}, 1000)

✅ 这种"数据驱动视图"的模式，极大简化了 DOM 操作，开发者只需关注数据状态，无需手动操作 DOM。

这部分内容聚焦于你新增注释所涉及的核心机制，既解释了原理，也关联了实际开发场景，可作为原文的自然延伸。

✅ 总结：Vue Hello 案例完整流程图

复制代码 
1. 引入 Vue.js → 加载框架
2. 定义容器 <div id="root"> → 提供渲染区域
3. 创建 Vue 实例 → new Vue({})
   ├── el: '#root' → 绑定容器
   └── data: { name, age } → 定义数据
4. Vue 扫描模板 → 解析 {{name}}, {{age}}
5. 数据绑定 → 渲染最终 HTML
6. 响应式监听 → 数据变化 → 自动更新视图

🎯 学习收获总结

学习点 说明
✅ Vue 实例 使用 new Vue() 创建，必须传入配置对象
✅ 模板 在 el 指定的容器内，HTML + Vue 语法构成模板
✅ 数据绑定 使用 {``{ }} 实现数据插值
✅ 容器作用 限定 Vue 管理范围，承载模板
✅ 响应式 数据变化 → 视图自动更新
注释要点 核心含义 开发实践建议
实例与容器一一对应 一个 Vue 实例只管理一个根 DOM 元素 避免多容器挂载，优先使用组件拆分
真实开发用组件 项目以组件树构建，非原始模板 尽早学习单文件组件（.vue）
{``{}} 中写表达式 必须返回值，不能是语句 复杂逻辑移至 computed 或 methods
数据变更自动更新 响应式系统自动追踪依赖并更新 不要直接操作 DOM，信任数据流

🚀 下一步建议

  • 尝试修改 data 中的值，观察页面是否自动更新。
  • 添加更多数据（如 sex, job）并显示在模板中。
  • 学习使用 v-bind 和 v-model 指令增强交互能力。
  • 探索组件化开发，将模板拆分为独立组件。

📚 结语

通过这个简单的"Hello Vue"案例，我们不仅掌握了 Vue 的基本结构，更深入理解了 模板调用机制 和 容器的核心作用 。这正是 Vue.js 优雅之处：简洁的语法，强大的响应式系统，清晰的职责划分。

继续深入学习，你将逐步掌握 Vue 的高级特性，构建出功能丰富、用户体验优秀的前端应用！

相关推荐
li星野2 小时前
打工人日报#20251217
笔记
我想我不够好。2 小时前
电工作业中元件的作用
学习
协同生态2 小时前
天锐绿盾新版注册机【仅用于个人学习，禁止其他用途】
学习
Cuby!3 小时前
【AFDM与信号处理：论文阅读】仿射频分复用：扩展OFDM以实现场景灵活性和弹性
论文阅读·笔记·学习·信息与通信·信号处理
lionliu05193 小时前
JavaScript 变量声明最佳实践
前端·javascript·vue.js
计算机毕设VX:Fegn08953 小时前
计算机毕业设计|基于springboot + vue酒店管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
AAA阿giao3 小时前
从零开始学 React：用搭积木的方式构建你的第一个网页！
前端·javascript·学习·react.js·前端框架·vite·jsx
Arciab3 小时前
C++ 学习_流程控制
c++·学习
HyperAI超神经3 小时前
【vLLM 学习】vLLM TPU 分析
开发语言·人工智能·python·学习·大语言模型·vllm·gpu编程
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）05Neo4j（一） - Neo4j安装教程（Windows）06【AutoGLM部署】本地私有化部署AI手机Agent07Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09Open-AutoGLM Windows 安装部署教程10BongoCat - 跨平台键盘猫动画工具