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

文章目录

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

示例代码回顾

<!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 库

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

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

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

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

“root” 容器的作用将在下文详述。

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

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

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

<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 的数据绑定、指令等特性。

✅ 示例说明：

<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}} 没有被渲染？

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

❓ 原因分析：

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

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

四、其他重要细节说明

1. Vue.config.productionTip = false

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

2. data 的作用与限制

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 实例，具有自己的模板、数据、方法等。

例如：

// 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 }}

✅ 正确示例：

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

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

<!-- 以下写法会报错 -->
  {{ 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）时，通知所有依赖它的视图进行更新。
示例验证：
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. 定义容器 
 → 提供渲染区域
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 的高级特性，构建出功能丰富、用户体验优秀的前端应用！

posted @ 2026-01-13 09:49  yangykaifa  阅读(21)  评论(0)    收藏  举报