Vue.js框架核心特性与实战

Vue详细介绍及使用

一、Vue定义及简介

1、Vue定义

关于Vue简介，百度百科给出的解释是：Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 是一个提供了 MVVM 风格双向数据绑定的 Javascript 库（无依赖别的js库，直接引入一个js文件就可以使用，跟jquery差不多），专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

2、Vue背景简介

2.1、Vue诞生的背景

从历史的潮流来说，人们从之前的:原生JS -> Jquery之类的类库 -> 前端模板引擎 ,他们都有一个共同的特点需要我们去操作dom元素。近几年来，得益于手机设备的普及和性能的提升，移动端的web需求大量增加，产生了一种叫webapp的东西，也就是移动端的网页应用。为了更好满足当前移动webapp项目的开发需求，MVVM框架诞生，而Vue便是这样的一种框架。那么什么是Vue?

官网有一句对它的介绍：通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue的核心主要包括下面两块：

Vue的数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vuejs只需要改变数据，就会自动改变视图；

视图组件化：把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成（可维护、可重用）。

2.2、MVVM框架的发展

MVC（View Model Controller ）模式：

MVC框架最早出现在Java领域，在经典的MVC模式中，是用户通过Controller来操作Model以达到View的变化。MVC 即 Model-View-Controller 的缩写，就是 模型—视图—控制器，也就是说一个标准的Web 应用程式是由这三部分组成的：

View ：用来把数据以某种方式呈现给用户；

Model ：其实就是数据；

Controller ：接收并处理来自用户的请求，并将 Model 返回给用户；

MVP(Model View Presenter)模式：

而后的MVP模式（MVC模式的演变）逻辑层在Presenter里实现，而且Presenter与具体的View 是没有直接关联的，而是通过定好的接口进行交互（在MVC中View会直接从Model中读取数据而不是通过 Controller）。 View 与 Model 不发生联系，都通过 Presenter 传递。

在HTML5 还未火起来的那些年，MVC 作为Web 应用的最佳实践是很OK 的，这是因为 Web 应用的View 层相对来说比较简单，前端所需要的数据在后端基本上都可以处理好，View 层主要是做一下展示，那时候提倡的是 Controller 来处理复杂的业务逻辑，所以View 层相对来说比较轻量，就是所谓的瘦客户端思想。

相对 HTML4，HTML5 最大的亮点是它为移动设备提供了一些非常有用的功能，使得 HTML5 具备了开发App的能力， HTML5开发App 最大的好处就是跨平台、快速迭代和上线，节省人力成本和提高效率，因此很多企业开始对传统的App进行改造，逐渐用H5代替Native，到2015年的时候，市面上大多数App 或多或少嵌入都了H5 的页面。既然要用H5 来构建 App， 那View 层所做的事，就不仅仅是简单的数据展示了，它不仅要管理复杂的数据状态，还要处理移动设备上各种操作行为等等。因此，前端也需要工程化，也需要一个类似于MVC 的框架来管理这些复杂的逻辑，使开发更加高效。

注：Native（使用原生制作APP，即在基于目前的智能手机的操作系统(如安卓android、苹果IOS，另外还有 (windows phone) 的基础上，使用相应平台支持的开发工具和语言 ( 比如 iOS 平台支持 Xcode 和 Objective-C，安平台支持 Eclipse 和 Java) 编写的第三方移动应用程序，简称原生APP。）

但实际上，随着H5 的不断发展，人们更希望使用H5 开发的应用能和Native 媲美，或者接近于原生App 的体验效果：

1）开发者在代码中大量调用相同的 DOM API，处理繁琐 ，操作冗余，使得代码难以维护。

2）大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

3）当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

MVVM（Model View ViewModel） 模式：

其实，早期jquery 的出现就是为了前端能更简洁的操作DOM 而设计的，但它只解决了第一个问题，另外两个问题始终伴随着前端一直存在。MVVM 的出现，完美解决了以上三个问题。MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理（用到这种的有来自Google的AngularJS，还有Vue.js、Knockout、Ember.js）。

3、主流前端框架/库简介

目前的流行前端框架/库有：Vue、React、Angular（三大霸主）以及Bootstrap、APICloud、jQuery等；（jQuery、React为库）

Vue毫无疑问是当前最流行最火爆的前端框架之一。vue作为渐进式前端框架，由当时的谷歌工程师尤雨溪大神业余时间所写，一放到github就引起流行，github上点赞数百万。vue现在几乎作为前端必备框架，特点高效，灵活，稳定，功能强大，代码少，运行速度快，整个文件只有200多K。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。vue做了必须的事，又不会做职责之外的事。做为前端，不懂vue是不行了。

React是Facebook在2013年开源的前端框架，由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。也就是说同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机。开发效率高，事半功倍。

AngularJS诞生于2009年，由Misko Hevery 等人创建，是为了克服HTML在构建应用上的不足而设计的。后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。2016年angular2正式被发布，在Anguar2.0之前的版本都叫做AngularJS（Angular2不是从Angular1升级过来的，Angular2是重写的）。

jQuery是一个快速、简洁的JavaScript库，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。代码十分精炼，代码量小，速度快，犀利。使用量非常大。

Bootstrap（react是Facebook开发的，那么做为Facebook的竞争对手，Twitter公司也不甘示弱，开源了Bootstrap。）是由美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。Bootstrap 能给你的 Web 开发提供了时尚的版式，表单，buttons，表格，网格系统等等。

apicloud（包括api.js和api.css）专门为移动端APP开发而设计的框架，适应不同的移动设备，而且可以和其他框架一起引入项目中使用，非常灵活，优秀。

注：框架和库的区别

库（插件）：是一种封装好的特定方法集合，对项目的侵入性较小，提供给开发者使用，控制权在使用者手中，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。 框架：是一套架构，会基于自身特点向用户提供一套相当完整的解决方案，而且控制权在框架本身；对项目的侵入性较大，使用者要按照框架所规定的某种特定规范进行开发，项目如果需要更换框架，则需要重新架构整个项目。

4、Vue与AngularJS、React区别

4.1、与AngularJS的区别

相同点： 都支持指令：内置指令和自定义指令。 都支持过滤器：内置过滤器和自定义过滤器。 都支持双向数据绑定。 都不支持低端浏览器。

不同点： AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。 在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。 Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。 对于庞大的应用来说，这个优化差异还是比较明显的。

4.2、与React的区别

相同点： React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。 中心思想相同：一切都是组件，组件实例之间可以嵌套。 都提供合理的钩子函数，可以让开发者定制化地去处理需求。 都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。 在组件开发中都支持mixins的特性。 不同点： React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。 Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。

5、Vue特性

1) 轻量级的框架

Vue.js 能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API

2) 双向数据绑定

声明式渲染是数据双向绑定的主要体现，同样也是 Vue.js 的核心，它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。

3) 指令

Vue.js 与页面进行交互，主要就是通过内置指令来完成的，指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

4) 组件化

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 在 Vue 中，父子组件通过 props 传递通信，从父向子单向传递。子组件与父组件通信，通过触发事件通知父组件改变数据。这样就形成了一个基本的父子通信模式。 在开发中组件和 HTML、JavaScript 等有非常紧密的关系时，可以根据实际的需要自定义组件，使开发变得更加便利，可大量减少代码编写量。 组件还支持热重载（hotreload）。当我们做了修改时，不会刷新页面，只是对组件本身进行立刻重载，不会影响整个应用当前的状态。CSS 也支持热重载。

5) 客户端路由

Vue-router 是 Vue.js 官方的路由插件，与 Vue.js 深度集成，用于构建单页面应用。Vue 单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，传统的页面是通过超链接实现页面的切换和跳转的。

6) 状态管理

状态管理实际就是一个单向的数据流，State 驱动 View 的渲染，而用户对 View 进行操作产生 Action，使 State 产生变化，从而使 View 重新渲染，形成一个单独的组件。

注：Vue必须在ES5版本以上的环境下使用，一些不支持ES5的旧浏览器中无法运行Vue。

6、Vue发展历史

时间事件2013年在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量框架，最初命名为 Seed 。2013年12月更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。2014年01月24日Vue 正式对外发布，版本号是 0.8.0。2014年02月25日0.9.0 发布，有了自己的代号：Animatrix，此后，重要的版本都会有自己的代号。2015年06月13日0.12.0，代号Dragon Ball，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue，Vue 在 JS 社区也打响了知名度。2015年10月26日1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年，vue-router、vuex、vue-cli 相继发布，标志着 Vue从一个视图层库发展为一个渐进式框架。2016年10月01日2.0.0 是第二个重要的里程碑，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。自从Vue 2.0 发布之后，Vue 就成了前端领域的热门话题。2019年02月05日Vue 发布了 2.6.0 ，这是一个承前启后的版本，在它之后，将推出 3.0.0。2019年12月05日在万众期待中，尤雨溪公布了 Vue 3 源代码，目前 Vue 3 处于 Alpha 版本。2020年09月18日Vue发布了3.0.0版本（https://github.com/vuejs/vue-next/releases）中。但是目前官网上只有vue3.x-beta （测试版API）

二、Vue安装及环境配置

在搭建vue的开发环境之前，一定一定要先下载node.js，vue的运行是要依赖于node的npm的包管理工具来实现，node可以在官网或者中文网里面下载。官网地址：https://nodejs.org/en/download/

备注：windows7 环境下只能使用Node.js 12.x及以下版本，官网下载地址：https://nodejs.org/en/download/releases/

1、windows下搭建vue开发环境

1）在官网下载好需要的版本，我下载的版本为：node-v12.20.0-x64.msi，下载完成安装，安装完成在CMD中查看是否安装成功；

2）设置缓存文件夹

npm config set cache "D:\program files\nodejs\node_cache"

设置全局模块存放路径（之后用命令npm install XXX -g安装以后模块就在D:\program files\nodejs\node_global里）

npm config set prefix "D:\program files\nodejs\node_global"

3）高版本的nmp(Node包管理器:Node Package Manager，服务器在国外)是自带的，由于在国内使用npm是非常慢的，推荐使用淘宝npm镜像。在cmd中输入安装命令：

#安装命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

#删除命令

npm uninstall -g cnpm --registry=https://registry.npm.taobao.org

4）设置环境变量

（设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径）

在PATH中新增：D:\program files\nodejs\node_global（新增完成后重新打开CMD）

5）安装Vue

#安装Vue

cnpm install vue -g

6）安装vue命令行工具，即vue-cli 脚手架

如果只是简单的写几个Vue的Demo程序，那么你不需要Vue-Cli。Cli是（Command-Line Interface，翻译为命令行界面，俗称脚手架，他是官方发布的Vue.js项目脚手架，使用Vue-cli可以快速搭建Vue开发环境以及对应的webpack配置）

7）创建新项目：webpack-simple / webpack

打开开始菜单，输入 CMD，或使用快捷键 win+R，输入 CMD，敲回车，弹出命令提示符。打开你将要新建的项目目录；

vue init webpack-simple这样的方式适合小项目，vue init webpack这样的方式适合中大型项目；

输入：vue init webpack-simple vue-test （注：vue init webpack-simple+项目名称 名称不能有大写字母）

输入：vue init webpack vue-test-big

8）项目生成情况

vue init webpack-simple vue-test 生成目录：

vue init webpack vue-test-big 生成目录：

目录/文件说明build 最终发布代码的存放位置

config配置目录，包括端口号等node_modules这是执行npm install后产生的，里面包含了Node.js和npm依赖文件以及后续安装的第三方组件或者功能src我们要开发的目录，用于存放页面相关的文件，基本上要做的事情都在这个目录里面src\assets图片文件目录，如：logosrc\components存放了一个组件文件src\router项目的路由src\App.vue主文件，项目的入口文件，可以直接将组件写在这里，而不使用components目录src\amin.js项目的核心文件static一般用于存放静态资源，如：图片、字体等.babelrc用来设置转码的规则和插件，一般情况下不需要设置

9）安装工程依赖模块

vue-test：

#切换到当前目前，一定切换进来:

D:\vueTest>cd vue-test

#运行cnpm install，下载当前项目所依赖的包，在目录下会生成node_modules

D:\vueTest\vue-test>cnpm install

#运行cnpm run dev，启动当前的项目

D:\vueTest\vue-test>cnpm run dev

第一个简单版的vue的项目，就好了打开链接：http://localhost:8080/

vue-test-big：

#切换到项目目录

D:\vueTest>cd vue-test-big

#运行cnpm run dev,启动当前项目

D:\vueTest\vue-test-big>cnpm run dev

10）使用Visual Studio Code来开发Vue程序（当然也可以使用HBuilderX）

a)导入项目：File->Open Folder->vue-test-big

b)打开集成终端（open integrated terminal）：快捷键（Ctrl+`）

c)运行命令（cnpm run dev）

d)打开页面（http://localhost:8080/）

但是我们看到的是http://localhost:8080/#/，关于生成的URL地址http://localhost:8080/#/后面的/#/，是路由的hash和history之分，默认是hash模式，会有#，把mode改成history：

vue 项目往往会搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度集成，让构建单页面应用变得易如反掌。vue-router 默认为 hash 模式，使用 URL 的 hash 来模拟一个完整的 URL，所以当 URL 改变时，页面不会重新加载，只是根据 hash 来更换显示对应的组件，这就是所谓的单页面应用。

//只需要在index.js加上一行mode: 'history',

export default new Router({

// 路由模式：hash(默认)，history模式

mode: 'history',

//路由规则

routes:[

{

path:'/',

name:'index',

component:'Index'

}

],

})

2、如何使用Vue.js

1）直接通过script加载CDN文件或者直接加载本地vue.js文件

2）npm（vue- cli）基于npm管理依赖使用nmp（vue- cli）来安装Vue

即前面的Vue环境搭建，不过官方文档上说：我们不推荐新手直接使用 vue- cli ，尤其是在你还不熟悉基于 Node.js 的构建工具时。

二、Vue基础知识

1、Vue学习内容

学习Vue不要在想着怎么操作DOM，而是想着如何操作数据。那么Vue做了什么，我们要学习什么，先来一张总结性质的思维导图（此图为Vue2.x版本）：

2、数据绑定

数据绑定是将数据和视图关联，当数据发生变化是，可以自定更新视图。

2.1、语法-插值:{{msg|表达式}}

文本插值是最基本的形式，使用双大括号{{}}，类似于Mustache(Mustache是一个logic-less(轻逻辑)模板解析引擎,它的优势在于可以应用在Javascript、PHP、Python、Perl等多种编程语言中。)

{{msg|表达式}}标签将会被替换为 data 对象上对应的 msg 属性的值，也支持写入表达式（表达式是各种数值、变量、运算符的综合体）。

注意：Mustache 语法不能作用在 HTML 元素的属性上。

2.2、语法-使用指令插值

指令是带有v-前缀的特殊特性，其值限定为绑定表达式，也就是JavaScript表达式和过滤器。指令的作用是当表达式值发生变化是，将这个变化也反映到DOM上。

3、分隔符

Vue.js中数据绑定的语法被涉及为可配置的。如果不习惯Mustache风格的语法，则可以自己设置。在Vue 1.x 中它定义在（src/config.js源码）里，但是在Vue2.x后有所改变。

全局使用：Vue.options.delimiters = ['语法格式'];

实例选项定义：delimiters:['语法格式’]

三、Vue指令

前面的案例中我们已经接触到了一个指令v-show，这种带有前缀 v-的指令，用于表示它们是 Vue 提供的特殊特性。在Vue中还定义了许多这种的内置指令。

1、插入数据指令（v-text、v-html ）

1.1、v-text

预期：string

详细：更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

1.2、v-html

预期：string

详细：更新元素的 innerHTML。

注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

示例：

2、条件渲染指令（v-show、v-if、v-else、v-else-if）

2.1、v-show

预期：any

用法：根据表达式之真假值，切换元素的 display CSS property。当条件变化时该指令触发过渡效果。

2.2、v-if

预期：any

用法：根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是