JSP整合VUE前序

     对于一个全栈开发工程师来说，懂前端才会开发出更好的后端程序（不懂前端 的后端工程师会设计出非常难用的API），懂后端才会开发出更好的前端程序。 程序设计的基本思想在前后端都是通用的，两者并无本质的区别。这和“不想当 厨子的裁缝不是好司机”是一个道理。
     MVVM  MVVM 是Model­View­ViewModel 的缩写，它是一种基于前端开发的架构模式， 其核心是提供对View 和 Model 的双向数据绑定，这使得Model 的状态改变可以 自动传递给 View，即所谓的数据双向绑定。

    当我们用Node.js有了一整套后端开发模型后，我们对前端开发也会有新的认 识。由于前端开发混合了HTML、CSS和JavaScript，而且页面众多，所以代码 的组织和维护难度其实更加复杂，这就是MVVM出现的原因。 用JavaScript在浏览器中操作HTML经历了如下几个阶段：

第一阶段，直接用JavaScript操作DOM节点，使用浏览器提供的原生API

第二阶段，由于原生API不好用，还要考虑浏览器兼容性，出现了jQuery

第三阶段，MVC模式需要服务器端配合JavaScript可以在前端修改服务器渲染后 的数据   

随着前端页面越来越复杂，用户对于交互性要求也越来越高仅仅用jQuery是远 远不够的。MVVM模型应运而生。

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面 中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的 分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同 步到View显示出来，还负责把View的修改同步回Model。

   MVVM框架来实现同样的功能，我们首先并不关心DOM的结构，而是关心数 据如何存储。   

关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操 作DOM的繁琐步骤中解脱出来

Vue.js 就是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于 View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责 连接 View 和 Model，保证视图和数据的一致性。Vue会通过DOM Listeners来 监听并改变Model层的数据。反之，当Model层的数据发生改变时，也会通过 Data Bingings来监听并改变View层的展示。从而实现双向数据绑定的功能。
        Vue （没有完全遵循 MVVM 模型）是一套用于构建用户界面的渐进式框架。与 其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只 关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当 与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页 应用提供驱动。

       组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小 型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界 面都可以抽象为一个组件树：

      Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。  

Vue 的核心组成只是数据绑定和组件

特点

易用  

 在有HTML CSS JavaScript的基础上，快速上手。

灵活   

 简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

性能   

 20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({ 
  // 选项 
})

生命周期图示

    渐进式可以理解为一步一步的意思，大概意思就是使用Vue的时候，并不需要把 整个框架的所有东西都用上，可以根据实际情况选择你需要的部分。

那声明式渲染到底是什么呢？其实理解声明式渲染最好的办法是对比命令式渲 染，

命令式：一步一步告诉程序如何去做，能否达成结果取决于开发者的设计。

声明式：只告诉程序想要什么结果，如何达成由程序保证，开发者不用关 心。 这时候回过来看上面的代码，app.message = "123"的操作只需要改Vue实例 里的数据就可以了，页面上是如何根据这个数据渲染为123的我们并不关心。如 果使用JQuery的话，我们需要获取到元素的id，然后通过操作dom的方式把数 据赋值给app.innerHTML完成渲染，这些一步一步的过程都需要由我们开发人 员来想，而声明式则不需要。