1.1浅谈vue

MV*包括：MVC(angular)，MVVM(vue.js),MVP

1.MVVM框架：

针对具有复杂交互逻辑的前端应用，提供基础的架构抽象，通过Ajax数据持久化，保证前端用户体验。

（好处就是：当前端做一些数据操作的时候，会通过Ajax请求，对数据持久化，不需要刷新整个页面，只需要改动你想要改动的那部分数据或内容，特别是在移动端场景，刷新整个页面的代价太昂贵，需要重新加载很多资源，虽然很多资源会被缓存，但页面的dom,css,js都会重新被浏览器解析一遍，因此移动端通常会做成SPA单页面应用，在此情况下就诞生了很多MVVM框架，主流的有：angular.js,vue.js,react.js)

View(视图/DOM) <======> MV(通讯/观察者) <======> Model(数据/JavaScript对象)

2.vue.js:一个gzip后大小才26KB的轻量级MVVM框架，数据驱动+组件化的前端开发。

3.vue与angular、react对比：

(1) vue更轻量级，gzip后angular大小有56kB,react大小有44KB。

(2) vue更容易上手，angular入门最难，概念太多，完全颠覆了之前前端开发的模式和思维。

(3) vue借鉴了两家之长，借鉴了angular的指令，借鉴了react的组件化。还有自己的特色，如，计算属性。

4.数据驱动：dom是数据的一种自然映射。

没有mvvm框架时，数据和视图的交互方式是，通过发送ajax从后端获取数据，为了让视图改变，我们是手动去触发dom改变，这样不仅繁琐而且易出错，

当我们用vue.js后，就可以省掉手动触发dom变化的步骤了！！！在vue.js里只需要改变数据，vue.js通过direactive指令对dom进行一些封装，当数据发生变化会通知指令

去修改对应的dom,数据驱动dom的变化。 vue.js还会对操作做一些监听，当我们更改视图时，vue.js监听到view发生变化，从而改变数据，这样就形成了数据的双向绑定。

数据(model)响应原理：数据(model)改变驱动视图(view)自动更新

5.组件化：扩展HTML元素，封装可重用的代码。

组件设计原则：

(1)页面上每个独立的可视/可交互区域视为一个组件。

(2)每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护。(就近维护其实就体现了前端工程化思想，它为前端开发提供了很好的分治策略，每个开发者都将清楚的知道自己开发维护的单元，代码必定存放在对应指定的目录中，在那个目录下就可以找到功能单元所有的逻辑，包括html，css,js,iamge等。在vue.js中可以通过.vue文件把组件依赖的模板、js和样式都写在一个文件中，这可谓是将就近思想发挥到了极致。)

(3)页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。

vue-cli是vue的脚手架工具。脚手架工具就是帮助我们编写基础的代码。所以vue-cli就是帮助我们写好vue.js基础代码的工具。能搞定目录结构、本地调试、代码部署、热加载、单元测试等工作。