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

Vue 概述以及基本使用

news 2025/10/21 7:15:00

概述

前端技术的发展

从静态走向动态

早期的 HTML 作为静态文件，即使只有部分内容是需要变动的，那么有多少种变动的可能性，就需要准备多少份文档，这对开发者来说是非常不友好的，并且无法与用户进行交互。
CGI（Common Gateway Interface）的出现改善了这一情况。CGI 作为服务器拓展功能，可以从数据库或者文件系统获取数据，再将数据渲染为 HTML 文档后，返回至客户端，从而实现了网页的动态生成。

CGI 出现的最大意义就是给当时刚起步的 Web 提供了一个发展方向。在这之后，PHP、JSP、ASP 等各种服务端语言层出不穷，不仅弥补了 CGI 的缺陷，而且在性能上愈加高效，在开发上愈加简捷。这些语言的出现和广泛应用，使得 Web 技术飞速发展，前端网页从此从静态走向动态。这个时代被称为 Web1.0 时代。

从后端走向前端

在 Web1.0 时代，前后端是如何协作的呢？由于网页是在服务端使用动态脚本语言和模板引擎渲染出来的，所以一般由前端先写模板，写好后交付给后端套用，之后再由前后端联调，以确认模板套用无误。在这种开发环境下，前后端耦合密切，项目开发需要很高的沟通成本。
Ajax （Asynchronous JavaScript And XML，异步 JavaScript 和 XML）通过 XMLHttpRequest 对象，可以在不重载页面的情况下与 Web 服务器交换数据，再加上 JavaScript 的 document 对象，开发者们可以很轻松地实现页面局部内容刷新。

得益于 Ajax 的发展，前后端分离的趋势日渐明显，前端不再需要依赖后台环境生存，所有服务器数据都可以通过异步交互来获取。
随着 Google V8 引擎问世、PC 和移动端设备性能提高、ES6 和 H5 日趋成熟，浏览器端的计算能力和功能性似乎愈加过剩，开发者们开始将越来越多的业务逻辑代码迁移到前端，前端路由的概念也逐渐清晰。
路由这个概念首先出现在后台。传统 Web 网页间的跳转，需要开发者先在后台设置页面的路由规则，之后服务器根据用户的请求检索路由规则列表，并返回相应的页面。

而前端路由则是在浏览器端配置路由规则，通过侦听浏览器地址的变化，异步加载和更新页面内容。
可以这么说，Ajax 实现了无刷新的数据交互，前端路由则实现了无刷新的页面跳转，Ajax 将 Web Page 发展成 Web App，而前端路由则给了 Web App 更多的可能，如 SPA（Single Page Application，单页面应用）。

现在，很多 Web 项目采用这样的架构，后台只负责数据的存取和组装，而前端则负责业务逻辑层和视图层的全部工作。这一路走来，项目重心已从后端转移到了前端。
Angular、 React、Vue等知名的前端框架都有前端路由的概念。

从前端走向全端

Node.js 诞生，Javascript 开始占据服务端编程语言的一席之地。前端工程师可以以很低的成本用 Node.js 和 MongoDB 搭建一个后台。

从 MVC 到 MVVM

MVC：模型-视图-控制器（Model-View-Controller）
- Model 指业务模型，用于计算、校验、处理和提供数据，不直接与用户交互
- View 视图层是用户能够看到并进行交互的客户端界面
- Controller 负责收集用户输入的数据，向相关模型请求数据并返回响应的视图
MVC 需要前端开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到 View 中。

而后当用户操作视图，还需要通过 DOM 获取 View 中的数据，然后同步到 Model 中。
MVVM：Model-View-ViewModel

MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，通过数据绑定，可以将 View 和 ViewModel 关联在一起：
- 只要 ViewModel 发生了改变，View 上自然就会表现出来
- 当用户修改了 View，ViewModel 中的数据也会跟着改变
开发人员不用再关心 ViewModel 和 View 之间是如何互相影响的，可以从繁琐的 DOM 操作中解放出来，把关注点放在如何操作 ViewModel 上。

Vue.js 就是一套轻量级的 MVVM 框架。

在这里插入图片描述

MVVM（Model、View、ViewModel）

简介

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel
- Model ：表示当前页面渲染时所依赖的数据源。
- View ：表示当前页面所渲染的 DOM 结构。
- ViewModel ：表示 vue 的实例，它是 MVVM 的核心。
MVVM 把每个 HTML 页面都拆分成了这三个部分，如图所示：

MVVM 的工作原理

ViewModel 作为 MVVM 的核心，是把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

在这里插入图片描述

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

vue 简介

官方给出的概念：**Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。**它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。

与其它大型框架不同的是，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。同时，Vue 也完全有能力支持采用 SPA 设计和组合其他 Vue 生态的系统。

在这里插入图片描述

vue 的特性

主要体现在两个方面：数据驱动视图、双向数据绑定

数据驱动视图

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构

好处：当页面数据发生变化时，页面会自动重新渲染！

注意：数据驱动视图是单向的数据绑定。
双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。

好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！

vue 的版本

当前，vue 共有 3 个大版本，其中：

3.x 版本的 vue 于 2020-09-19 发布，正在企业级项目开发中普及和推广，是未来企业级项目开发的趋势
2.x 版本的 vue 是目前企业级项目开发中的主流版本，但会在未来几年内被逐渐淘汰；
1.x 版本的 vue 几乎被淘汰，不再建议学习与使用

Vue 项目结构

├─node_modules	// 项目依赖的第三方包
├─public		// 静态文件目录
├───favicon.ico	// 浏览器小图标
├───index.html	// 单页面的html文件
├─src			// 业务文件夹
├───assets		// 静态资源目录
├─────logo.png	// logo图片
├───components	// 可重用组件目录
├─────HelloWorld.vue	// 欢迎页面vue代码文件
├───router		// 路由目录
├───store		// 数据共享目录
├───views		// 视图组件目录
├───store		// 文件存储目录
├───api 		// 跟后台交互，发送fetch、xhr请求，接收响应目录
├───plugins		// 插件目录
├───App.js		// 整个应用的根组件
├───main.js		// 入口js文件
├─.gitignore	// git提交忽略配置
├─babel.config.js	// babel配置
├─jsconfig.json
├─package.json	// 依赖包列表
├─vue.config.js

基本使用

基本使用步骤

导入 vue.js 的 script 脚本文件
在页面中声明一个将要被 vue 所控制的 DOM 区域
创建 vm 实例对象（vue 实例对象）

<body><!-- 2. 在页面中声明一个将要被 vue 所控制的 DOM 区域 --><div id="app">{{ username }}</div><!-- 1. 导入 vue.js 的 script 脚本 --><script src="./lib/vue.js"></script><script>// 3. 创建 vue 实例对象const vm = new Vue({// 3.1 指定挂载的 DOM 区域el: '#app',// 3.2 指定 model 数据源data: {username: '张三'}})</script>
</body>