目录

1. Vue 简介

1.1. 官网​编辑

1.2. 介绍与描述

1. Vue.js 是什么？

2. Vue 的特点

1.3. Vue 的特点

1️⃣ 轻量级 & 易上手

1.4. 与其它 JS 框架的关联

1️⃣ Vue 与 React 的对比

📌 结论

2️⃣ Vue 与 Angular 的对比

📌 结论

3️⃣ Vue 与 jQuery 的对比

📌 结论

4️⃣ 什么时候选择 Vue？

2. 初识 Vue

1️⃣ Vue 的基本概念

Vue 的特点

2️⃣ Vue 开发环境搭建

（1）引入 Vue

📌 但是这里还是提供一种原始的Vue引入办法：直接获取vue.js文件

3️⃣ 第一个 Vue 示例

4️⃣ vue的模板语法：

总结不易~ 本章节对我有很大的收获， 希望对你也是！！！

1. Vue 简介

1.1. 官网

1. 英文官网: https://vuejs.org/
2. 中文官网: https://cn.vuejs.org/

1.2. 介绍与描述

1. Vue.js 是什么？

Vue.js（读作 /vjuː/，类似于 "view"）是一个渐进式的 JavaScript 框架，用于构建用户界面。它的核心是响应式数据绑定和组件系统，适用于单页面应用（SPA，Single Page Application）开发，也可以作为大型项目的前端框架。

2. Vue 的特点

  • ✅ 轻量级：Vue 仅有几十 KB，运行速度快。
  • ✅ 数据驱动：基于 MVVM（Model-View-ViewModel）模式，数据变化时 UI 自动更新。
  • ✅ 组件化：可复用的组件结构，使代码更易维护。
  • ✅ 指令系统：如 v-bind、v-if、v-for 让模板更简洁。
  • ✅ 虚拟 DOM：提升渲染性能，减少真实 DOM 操作。
  • ✅ 双向数据绑定：使用 v-model 让数据和视图同步。
  • ✅ 生态丰富：配合 Vue Router（路由）、Vuex（状态管理）可构建完整应用。

  • 2014 年：尤雨溪（Evan You）发布 Vue.js 1.0

  • 2016 年：Vue 2.0 发布，加入虚拟 DOM 和更强的组件系统

  • 2020 年：Vue 3.0 发布，采用 Composition API，优化性能

  • 目前：Vue 在 GitHub 上拥有超 200k+ 星，广泛应用于 Web 开发

1.3. Vue 的特点

1️⃣ 轻量级 & 易上手

✅ Vue.js 只有几十 KB，加载快，运行效率高。
✅ 语法简洁，基于 HTML 和 JavaScript，无需额外学习复杂概念。
✅ 提供渐进式学习方式，可从简单页面增强，到构建大型前端应用。

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

👉 只需引入 Vue.js，就能快速上手！

🚀 Vue 的核心特点：

特点 说明
🏗 轻量级 体积小、易上手
🔄 响应式 数据双向绑定，自动更新视图
🏗 组件化 代码复用，易维护
🔥 指令系统 提供 v-if、v-for 等指令
⚡ 虚拟 DOM 提升性能，减少真实 DOM 操作
🌎 生态完善 Vue Router、Vuex、Vue CLI 支持

1.4. 与其它 JS 框架的关联

1️⃣ Vue 与 React 的对比

对比维度 Vue React
数据绑定 双向绑定 (v-model) 单向数据流 (setState)
模板语法 基于 HTML 的模板 (template) JSX 语法（类似 JavaScript）
组件通信 props + emit，Vuex 管理全局状态 props 传递，Context API 或 Redux 管理状态
渲染方式 依赖 Vue 的模板编译 依赖 JSX 运行时
虚拟 DOM 内部优化更高效 需要手动优化（如 shouldComponentUpdate）
生态系统 Vue Router, Vuex React Router, Redux
适用场景 适用于快速开发中小型项目 适用于大型复杂项目

📌 结论

✅ Vue 适合更偏向 HTML 的开发者，更容易上手，代码更直观。
✅ React 适合更偏向 JavaScript 的开发者，适用于更复杂的应用场景。

2️⃣ Vue 与 Angular 的对比

对比维度 Vue Angular
数据绑定 双向绑定 (v-model) 双向绑定 ([(ngModel)])
模板语法 HTML 模板 (template) 基于 TypeScript 的 HTML 模板
架构 轻量级，渐进式框架 完整的企业级前端框架
指令 v-if, v-for, v-bind 等 *ngIf, *ngFor, [property] 等
依赖管理 Vue CLI 简单易用 需要使用 Angular CLI 进行管理
生态系统 Vuex, Vue Router RxJS, Angular Router
适用场景 适用于中小型项目，前端页面交互 适用于大型企业级应用，如后台管理系统

📌 结论

✅ Vue 更轻量级，适合个人开发和快速构建项目。
✅ Angular 更适合大型企业应用，结构严谨，但学习成本较高。

3️⃣ Vue 与 jQuery 的对比

对比维度 Vue jQuery
开发模式 组件化开发 手动操作 DOM
数据绑定 自动双向绑定 需要手动更新 DOM
事件处理 Vue 事件监听 (@click) $('#id').on('click', function() {...})
适用场景 适用于现代前端开发 适用于简单的 DOM 操作，如表单校验
性能 虚拟 DOM 高效更新 直接操作 DOM，性能较低

📌 结论

✅ Vue 更适用于现代单页应用（SPA），开发效率高。
✅ jQuery 适用于老旧系统维护、简单的页面交互，但不适合复杂的前端开发。

4️⃣ 什么时候选择 Vue？

✅ 需要快速开发一个前端项目（如个人博客、小型后台系统）。
✅ 需要双向数据绑定，减少手动 DOM 操作。
✅ 需要组件化开发，提高代码复用性。
✅ 适合初学者，语法简单，学习成本低。

1.1.5. Vue 周边库

Vue 作为一个渐进式框架，不仅核心功能强大，还拥有丰富的周边库来扩展其能力。常见的 Vue 生态系统库包括路由管理、状态管理、UI 组件库、工具库等，这些库帮助开发者构建更复杂、更高效的 Vue 应用。

  1. vue-cli: vue 脚手架
  2. vue-resource
  3. axios
  4. vue-router: 路由
  5. vuex: 状态管理
  6. element-ui: 基于 vue 的 UI 组件库(PC 端)

2. 初识 Vue

1️⃣ Vue 的基本概念

Vue 的核心思想是数据驱动视图（MVVM 模式），即：
📌 Model（数据） → View（视图），Vue 通过响应式数据绑定，自动更新页面内容。
📌 View（视图） → Model（数据），用户交互后，Vue 会自动修改数据并同步更新页面。

Vue 的特点

  • 双向数据绑定：通过 v-model 实现数据和视图的双向绑定。

  • 组件化：所有的 UI 结构都是组件，可以复用和组合。

  • 指令系统：使用 v-if、v-for 等指令，控制 DOM 渲染。

  • 响应式数据：Vue 通过 Proxy（Vue3）或 Object.defineProperty（Vue2）监听数据变化，自动更新视图。

  • 虚拟 DOM：Vue 采用虚拟 DOM，提高页面更新效率。

  • 渐进式框架：可以仅使用 Vue 作为视图层库，也可以结合 Vue Router、Vuex 构建完整的 SPA。

2️⃣ Vue 开发环境搭建

（1）引入 Vue

Vue 可以通过多种方式使用：

📌 CDN 方式（适合初学者）
只需在 HTML 文件中引入 Vue：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

这种方式适用于快速体验 Vue，无需复杂的构建环境。

📌 Vue CLI（适合项目开发）
Vue 提供了官方的 Vue CLI 脚手架工具，可以创建 Vue 项目：

# 安装 Vue CLI
npm install -g @vue/cli

# 创建 Vue 项目
vue create my-vue-app

# 进入项目目录
cd my-vue-app

# 运行开发环境
npm run serve

这种方式适用于大型项目开发，支持 Vue 组件化、Vue Router、Vuex 等功能。

📌 但是这里还是提供一种原始的Vue引入办法：直接获取vue.js文件

从官网直接下载vue.js文件后进行引入html文件内，这里我直接提供该文件后可以直接进行引用哦~

3️⃣ 第一个 Vue 示例

（1）基础示例：Hello 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="demo">
    <h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    //创建Vue实例
    new Vue({
      el: '#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
      data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
        name: 'atguigu',
        address: '北京'
      }
    })

  </script>
</body>

</html>

📌 解释：

  • {{ message }}：Vue 的数据绑定语法，称为插值表达式。

  • new Vue({ el: '#app', data: { message: 'Vue！' } })：

    • el 指定 Vue 作用的元素。

    • data 定义 Vue 管理的数据。

4️⃣ vue的模板语法：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>模板语法</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 
				Vue模板语法有2大类：
					1.插值语法：
							功能：用于解析标签体内容。
							写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
					2.指令语法：
							功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
							举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
									 且可以直接读取到data中的所有属性。
							备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

		 -->
  <!-- 准备好一个容器-->
  <div id="root">
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
    <hr />
    <h1>指令语法</h1>
    <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
    <a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  new Vue({
    el: '#root',
    data: {
      name: 'jack',
      school: {
        name: '我是哈哈',
        url: 'http://www.atguigu.com',
      }
    }
  })
</script>

</html>

这里再次特别注意：关于浏览器的插件安装可以专门对Vue代码进行专门的调试，这里可以直接进入谷歌浏览器商店可以自行下载，要注意的是，版本过低，浏览器已经不兼容了，版本过高却只兼容Vue3 所以对着我的版本下可以同时兼用Vue2 和 Vue3

这里就能看到浏览器的调试见面就会单独多一个Vue的调试：

到这里，就已经可以开始进行我们Vue代码的编写啦，这里给一个初学者经常能够用的模板：简直就是初学必备，再也不用担心一个一个字的手敲了！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../js/vue.js"></script>
  <title>Document</title>
</head>

<body>
  <div class="root">
    <h2>欢迎来到{{name}}学习</h2>
  </div>
</body>

<script>
  const vm = new Vue({
    el: '.root',
    data: {
      name: ""
    }
  })
</script>

</html>

总结不易~ 本章节对我有很大的收获， 希望对你也是！！！

# vue.js # javascript # 前端 # 开发语言 # 前端框架
Logo
EazyDevelop社区

一站式 AI 云服务平台

更多推荐

cover

国内低代码平台：2025 年国内主流平台盘点

avatar EazyDevelop社区
cover

从零开始搭建个人RAG知识库：RAGFlow+DeepSeek保姆级教程！

avatar EazyDevelop社区
cover

5分钟搞定！MySQL/PostgreSQL 到 Elasticsearch 的实时同步

avatar EazyDevelop社区