什么是Vue.js框架？为什么选择它？(第一课)

“用白话文讲编程”系列又回来了。在这个系列中，我们一起学习Vue.js的基础知识。你说得对，这是基础知识。所以，即使你是行业新手，相信也可以用白话的方式学习。

不过，希望你有开发html、css、javascript项目的经验。如果你没有任何项目经验，或者你已经具备了Vue.js的知识，那么这个系列就不适合你目前的学习阶段。

1学习目标

通过本节，您将了解到：

1.前端技术使用的当前趋势

2.MVVM是什么

3.3的优点。Vue.js

4.4的两个核心。Vue.js

5.适用场景5。Vue.js

2出生背景

近年来，得益于移动设备的普及和性能提升，移动终端的web需求大幅增长，产生了一种webapp，即移动终端的web应用。

他们的功能越来越复杂，互动越来越酷，功能和效果也越来越接近原来的APP。例如，以下内容：

(效果几乎等同于原生APP)

这种webapp不仅和h5营销网页一样酷，而且还有点击、输入、下拉选择、视图切换等复杂交互。在这样的业务需求下，我们还是采用PC端开发方案，难免会不合适。例如，视图切换。

在PC端，我们会在切换视图时使用A标签跳转页面，但如果是在移动端，它会停止进食，你会遇到这样的画面：

(等到花没了)

此时，用户只能等待.3秒，5秒，8秒.很难想象用户在需要频繁切换视图的webapp中使用A标签是非常不友好的。你不想等那么久，反正我也不想。

此外，在接收用户输入时，很可能会及时更新视图。例如，当用户输入不同的内容时，页面会相应更新，当点击不同的选项时，会显示不同的交互效果。一旦有了更多的交互，如果必须手动操作，代码就会变得复杂，难以维护。

为了解决webapp体验和开发的不足，我们决定学习并使用一个MVVM框架——Vue.js

3什么是MVVM

MVVM可以分为三个部分：视图-视图模型-模型，见下面的视图：

那么，我们如何理解MVVM？

在上图中，左边的视图相当于我们的DOM内容，而我们看到的页面视图，右边的Model相当于我们的数据对象，比如一个对象的信息：

{姓名： '张三'，年龄：21，}中间监控负责监控双方数据，并相应通知对方修改。例如，如果您将模型层中的名称值更改为“李四”，那么视图层中显示的“张三”将自动变成“李四”，而这个过程是由视图模型操作的，因此不需要手动编写代码来实现(不需要手动操作DOM)。

如果你写过复杂的DOM操作，就能感受到它带来的便利。

这就是MVVM框架。除了Vue.js，还有React.js和Angular.js，都属于MVVM。

这里，我们不分析这三个框架哪个更好。至于技术选择，每个开发团队都有不同的情况和不同的因素需要考虑，只要适合自己就行。这里我们只谈Vue.js的优点：

1.Vue.js更轻更快

2.开始和学习更容易

4 Vue的核心

打了这么多基础，我们终于谈到了Vue的核心。

然后，让我们来认识一下Vue.js，这里是官网的介绍：

通过API尽可能简单地实现响应和组合视图组件的数据绑定

这句话有两个关键词：数据绑定和视图组件。

Vue的数据驱动：数据变化驱动视图的自动更新。传统上，您需要手动更改DOM来更改视图。vuejs只需要更改数据，它就会自动更改视图。一个字：酷。你再也不用担心DOM更新了，那是MVVM想法的实现。

视图组件化：将整个网页分成块，每个块都可以看作一个组件。网页由拼接或嵌套的多个组件组成。请看下图：

具体来说，在开发过程中如何实现一个组件，哪些块可以划分为一个组件，将在后面的章节中逐一介绍。这里，你只需要知道，在Vue.js中，一个网页可以看作是由多个组件组成的。

5个适用场景

如果你还在用jquery频繁操作你的DOM来更新页面，那么你可以用Vue.js来解放你的DOM操作。

如果项目的许多部分是相同的，并且可以打包成一个组件，那么您可以尝试使用Vue.js

另外，Vue.js的核心实现使用了ES5的Object.defineProperty特性，IE8及以下版本的浏览器不兼容，所以如果你的项目需要兼容这些较低版本的浏览器，Vue.js将不适用。

毕竟，开发一个项目的目的不是使用某个框架。

6本节概述

为了更好地满足当前移动webapp项目的开发需求，诞生了MVVM框架，Vue.js就是这样一个具有数据驱动和组件化两大核心的js框架。

来源：微信官方账号：网页前端教程

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。