Vue是什么
官方解释：Vue是一套用于构建用户界面的渐进式框架，Vue 被设计为可以自底向上逐层应用，Vue的核心是只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
渐进式框架的理解
提供足够的选择，并且没有很多强制性的要求
渐进也可以理解为一步一步的意思，大概意思就是使用Vue的时候，并不需要把整个框架的所有东西都用上，可以根据实际情况选择你需要的部分。如下图：
image
声明式渲染和组建系统是Vue的核心库所包含内容，而客户端路由、状态管理、构建工具都有专门解决方案。这些解决方案相互独立，你可以在核心的基础上任意选用其他的部件，不一定要全部整合在一起。
Vue的使用没有很多强制性的要求,不像Angular那样，要使用Angular，还必须得使用它的模块机制、必须使用它的依赖注入、 必须使用它的特殊形式定义组件（这一点每个视图框架都有，Vue也难以避免）。
自底向上逐层应用
由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。
什么是MVVM
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 Model 的双向数据绑定，这使得Model 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
Vue.js 就是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性。Vue会通过DOM Listeners来监听并改变Model层的数据。反之，当Model层的数据发生改变时，也会通过Data Bingings来监听并改变View层的展示。从而实现双向数据绑定的功能。
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统.
直接上代码：
==代码1：==
<div id="app">
{{ message }}
</div>
var vm = new Vue({
el: '#app',//el:Vue需要操作的元素节点
data: {
message: 'Hello Vue!'
}
})
运行页面：
[图片上传失败...(image-ad03f9-1560129677020)]
通过‘el’绑定id为“app”的元素，实际上是将这个元素挂载在名为vm这个Vue实例上，实现数据和DOM的双向绑定，也就是说数据和DOM都是响应的了，想要验证是否是响应的并不难，打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新，
例如：
image
将app里面的message值改为123，页面也随之改变为123
image
看完这一大堆，还是不明白什么是声明式渲染，一头懵~
那声明式渲染到底是什么呢？其实理解声明式渲染最好的办法是对比命令式渲染，
命令式：一步一步告诉程序如何去做，能否达成结果取决于开发者的设计。
声明式：只告诉程序想要什么结果，如何达成由程序保证，开发者不用关心。
这时候回过来看上面的代码，app.message = "123"的操作只需要改Vue实例里的数据就可以了，页面上是如何根据这个数据渲染为123的我们并不关心。如果使用JQuery的话，我们需要获取到元素的id，然后通过操作dom的方式把数据赋值给app.innerHTML完成渲染，这些一步一步的过程都需要由我们开发人员来想，而声明式则不需要。
作者：Autumn_2460
链接：https://www.jianshu.com/p/63b55a3ee81b
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论