Vue 概述以及基本使用

概述

前端技术的发展

从静态走向动态

早期的 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 项目结构

js 复制代码

├─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 实例对象）

html 复制代码

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

基本代码与 MVVM的对应关系