当前位置：首页 > news >正文

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

news 2026/8/7 2:41:04

文章目录

- 🌟 示例代码回顾
- 🔍 一、Vue 模板调用的过程详解
- - ✅ 步骤 1：引入 Vue 库
  - ✅ 步骤 2：准备一个 DOM 容器（`el`）
  - ✅ 步骤 3：创建 Vue 实例并挂载
  - - 🔹 解析 `new Vue({})`
    - 🔹 数据绑定过程（插值语法）
  - ✅ 步骤 4：Vue 的响应式系统生效
- 🧱 二、容器（`el`）的两个核心作用
- - ✅ 作用 1：**作为 Vue 实例的“服务范围”**
  - ✅ 作用 2：**承载 Vue 模板（Template）**
- 📌 三、为什么外部的 `大小{{name}}` 没有被渲染？
- - ❓ 原因分析：
- 🛠 四、其他重要细节说明
- - 1. `Vue.config.productionTip = false`
  - 2. `data` 的作用与限制
  - 3. 插值语法 `{{ }}` 的局限性
- ✅ 总结：Vue Hello 案例完整流程图
- 🎯 学习收获总结
- 🚀 下一步建议
- 📚 结语

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

🌟 示例代码回顾

<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>初识Vue</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 初识Vue： 1. 想使用Vue.js，就必须创建一个Vue实例，且要传入一个配置对象； 2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3. root容器里的代码被称为【Vue模板】。 --><!-- 准备好一个容器--><divid="root"><h1>Hello， {{name}}</h1><h1>我的年龄是，{{age}}</h1></div><h2>大小{{name}}</h2><scripttype="text/javascript">// 关闭生产环境提示Vue.config.productionTip=false// 阻止 vue 在启动时生成生产提示。// 创建Vue实例newVue({el:'#root',data:{name:'张三123',age:23}})</script></body></html>

运行结果如下：

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

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

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

✅ 步骤 1：引入 Vue 库

<scripttype="text/javascript"src="../js/vue.js"></script>

这行代码从本地路径加载了 Vue.js 文件。
Vue 必须先被引入，才能在页面中使用new Vue()创建实例。

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

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

<divid="root"><h1>Hello， {{name}}</h1><h1>我的年龄是，{{age}}</h1></div>

<div id="root">是 Vue 所控制的“根容器”。
它的 ID 为root，后续 Vue 实例会通过el: '#root'来绑定这个元素。

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

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

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

✅ 示例说明：

<divid="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' } }}是非法的。
支持简单的运算、函数调用等。

✅ 总结：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 管理范围，承载模板
✅ 响应式	数据变化 → 视图自动更新