vue基础
一、基本概念 开环：无反馈系统，指在一个控制系统中系统的输入信号（I）不受输出信号（O）影响的控 制系统
闭环：反馈系统，指在一个控制系统中系统的输入信号（I）受输出信号（O）影响的控制系 统
MVC模式：Model模型、Controller控制器、View视图，Model和View不直接联系，通过 Controller进行控制，基本联系都是单向的。
MVP模式：Presenter将View和Model进行了分离，主要程序逻辑在Presenter里进行，通过 定义好的接口进行交互，从而使得在变更View的时候可以保持Presenter不变。
MVVM模式：ViewModel，View的变化自动更新到ViewModel，ViewModel的变化也会 自动同步到View上。
二、VUE.JS是什么？
Vue.js不是一个框架，它只是聚焦视图层，是一个构建数据驱动的web界面的库。
特性：1、轻量级，体积小，不依赖其他库。2、数据双向绑定。3、指令。
4、插件化 与其他框架的区别： 与Angular.js的区别 相同点： 都支持指令，都支持过滤器，都支持双向绑定，都不支持低端浏览器（ie6/7/8）
不同点： Angular较难上手，学习成本较高，在性能上Angular依赖对数据做脏检查，所以watcher 越多越慢。 Vue易上手，提供了丰富的API且都比较简单、直观。Vue使用基于依赖追踪的观察并且使 用异步队列更新，所有的数据都是独立触发的。
脏检查：全名是 脏数据检查，是AngularJS命名的。脏数据也就是产生了变化的数据。 脏检查因一个原因而被称为脏。它定时检查而不是直接监听属性变化。我们把这个检查称为 摘要周期(digest)。angularJS监测对象变化不是像vue.js那样通过Object.defineproperty 这种接口，而是在某些情况下制定策略，通过复制保存一份数据，进行快照对比，来监测变 化。 脏检查这个东西，其实在三大主流前端框架中或多或少都有涉及。React 每次生成新 的 Virtual DOM，与旧 Virtual DOM的 diff 操作本来就可以看做一次脏检查。Vue 从相对 彻底的抛弃了脏检查机制，使用 Property 主动触发 UI 更新，但是 Vue 仍然不能抛 弃 track by (用来标记数组元素的key) 这个东西。 通过将新旧数组的 track by 元素做 diff 猜测用户的行为，最大可能的减少 DOM 树的操 作，这就是 track by的用处。 Angular 1的性能被广为诟病，因为在 Angular 1 的机制下，脏检查的执行范围过大以及频 率太过频繁了。
angular使用的就是脏检查：
1不会脏检查所有的对象。当对象被绑定到html中后，这个对象才会添加为检查对象 （watcher）
2不会脏检查所有的属性，同样当属性被绑定后，这个属性才会被列为检查的属性 在angular程序初始化时，会将绑定的对象的属性添加为监听对象（watcher），也就是说 一个对象绑定了N个属性，就会添加N个watcher。
angular什么时候去脏检查呢？
angular所有系统的方法中都会触发比较事件，比如： controller初始化的时候，所有以ng-开头的事件在你执行后，都会触发脏检查。
与React的区别 相同点： React采用特殊的JSX语法，Vue.js在组建开发中也推崇编写.vue特殊文件格式，对文件内容 都有一些约定，两者都需要编译后使用。
中心思想相同：一切都是组件，组件实例之间可以嵌套。 都提供合理的钩子函数，可以让开发者定制化的去处理需求。 都不内置AJAX、Router等功能到核心包，而是以其他方式（插件）加载。 在组件开发中都支持mixins的特性。
不同点：
React依赖Virtual Dom，而Vue使用的是DOM模板。Vue在模板中提供了指令、过滤器 等，可以非常方便、快捷的操作DOM。 Virtual Dom即虚拟Dom，用js模拟DOM结构，DOM变化的对比，放在JS层来做，提高重 绘性能。
重排：当DOM的变化影响了元素的几何属性（宽或高），浏览器需要重新计算元素的几何 属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的 部分失效，并重新构造渲染树。这个过程称为重排。
重绘：完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘
。 三、使用VUE 安装： 1、script 2、npm $ npm i vue --save-dev 3、bower $ bower i vue --save-dev
四、数据绑定
数据绑定是将数据和视图相关联，当数据发生变化时，可以自动更新视图。
插值： 文本插值是最基本的形式，使用双大括号。
例如： 有时只需渲染一次数据，后续数据变化不再关心，可以通过* 实现： 双大括号会把里面的值全部当做字符串来处理，如果值是HTML片段，则可以使用三个大括 号： data:{tab:'DDFE'}
表达式： 表达式是各种数值、变量、运算符和过滤器的综合体。 {{cents/10}} //运算符
{{true ? 1 : 0}} //三目运算
{{example.split(",")}} // 字符串方法
{{example | filterA | filterB }} // 过滤器
{{example | filter a b}} // 过滤器传递参数
指令： 指令是带有v-前缀的特殊特性。其值限定为绑定表达式。指令的作用是当表达式的值发生变 化时，将这个变化反映到DOM上。
例如： 分隔符： Vue中数据绑定的语法被设计为可配置，如果不习惯可以自己设置。我们可以在Vue.config 中配置绑定的语法。Vue.config是一个对象，包含了Vue的所有全局配置。
1、delimiters Vue.config.delimiters = ["<%", "%>"]; 则插值从{{text}}变成了<%text%>
2、unsafeDelimiters Vue.config.unsafeDelimiters = ["<$","$>"]; 则插值从{{text}}变成了<$text$>
