从零单排第二课--到底什么是Vue.js？

前情回顾

大家还记得上节课的Hello World代码吗？我们已经成功创建了第一个 Vue 应用！看起来就像渲染一个字符串模板，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

什么是Vue.js？

vue就是一个js库，并且无依赖别的js库。vue的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

vue相当于抽象出来了以往html，js，css传统的开发行为，只关注视图，数据，很少涉及DOM操作。换句话说，我们不关注dom的结构，而是考虑数据该如何储存。

什么是MVVM模式？

如下图：MVVM模式就是model-view-viewmodel三层，model层就是数据层（相当于数据库）,view层就是视图层（相当于html页面）,viewmodel层就是指的是vue所做的工作。View与Model互相分开，通过ViewModel联系起来。它负责dom监听与数据绑定。

image

什么是双向绑定，什么叫响应式？

通过实例化一个Vue对象，配置el属性，绑定到id为app的div上，这就形成了双向绑定，也就是所谓的响应式。什么意思？一方面，我在代码里直接改变content内容，view层也就是html页面是会跟着变化的。另一方面，打开你的浏览器的 JavaScript 控制台 ，并修改 app.content 的值，你将看到上例相应地更新。

image

这就是说，我在前端和后端都可以直接改变DOM，而不需要刷新页面。在vue里，我们不关注DOM，因为它已经帮我们解决了这个问题，我们只需要关注数据，以及数据如何存储。

为什么要使用Vue.js

• 数据绑定：vue会根据对应的元素，进行设置元素数据，通过输入框，以及get获取数据等多种方式进行数据的实时绑定，进行网页及应用的数据渲染 。

• 组件式开发：通过vue的模块封装，它可以将一个web开发中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发。