Vue.js 和 angular.js一样也是一个客户端框架，利用H5自定义标签的能力，把数据和控制通过js实现分离的功能
冲击比较大的就是 freemarker，jsp这些服务端模板技术，利用客户端框架+Ajax、实现客户端层面的 MVC，MVP，MVMM这些模式。html和js，双向绑定。自此，服务端可以不用再关心页面内容分发这些，只需要提供服务接口，比如Rest
1、典型用法
入门的 vue例子
包含元素
I、id 属性标注一个 app 名称 -- 对应的 angular 对象就是ng-app/ng-controller???
II、定义一个 Vue 对象，其中 el属性 对应到 前面的id属性 (背后的逻辑就是 document.getElementById())-- 对应angular 就是 define???
III、Vue 中的数据存储在 data属性中
IV、使用数据对象{{}} -- 这点和angular 是一致性的
V、对于 Vue data中的对象，Vue都直接代理 即 var v = new Vue 后 v.message 可以直接引用
Vue对象中的其他实例方法 v.$watch('obj',function(old,new){}); 监控属性值变化
2、概念
对应每一个模版框架，基础部分都需要了解： 表达式；逻辑控制。掌握了这两部分，就可以切入这个模型，后续高级部分在使用中学习。
更重要的是，几乎所有的模版框架这部分内容都有相似之处，掌握一个就可以掌握大部分的使用
I、表达式
-- js的表达式全部支持
II、逻辑控制指令
a、判断逻辑 v-if 指令
通过在 属性中 增加 v-if 属性，如果里面的表达式计算结果为真，则该 元素会插入到最后的页面中
b、循环逻辑 v-for 指令
采用在属性中 增加 v-for 属性，属性里面迭代语法 item in items 和js的迭代语法类似
3、绑定
绑定是实现MVMM/MVP一个核心因素，通过修改 数据model部分的数据，可以实时联动改变 html中的数据，从而系统实现了控制，无需再专门做Controller的开发，减少了开发成本
I、数据绑定 v-model指令
-- 这点和 angular 的 ng-model 是一样的
绑定的变量 class1，在界面和数据js中双向绑定，一般用在表单元素比较多
II、属性绑定 v-bind指令
-- 这个和 angular的 ng-bind 也是一致的，v-bind: 可以缩写成 :
new Vue({
el: '#app',
data:{
class1: false,
class2: true
}
});
一种是简单的绑定表达式的值；
一种是绑定对象和数组(主要针对 class和style 属性)
{class1:true, class2:true} - 这点类似于angular
[class1,class2]
除此之外，还可以使用 computed 返回值，只要返回值是符合如上格式的对象
4、逻辑-事件-控制
v-if/v-for 只是对界面内容的简单控制，web开发有很大一部分是事情相应控制，Vue模版使用什么来代替js的onclick 这些事件处理呢
I、v-on 指令 + Vue 方法
v-on 指令对常用的 html事件都可以操作，一般相应的函数都放在 methods中, v-on: 可以缩写成 @
v:on 对应js所有的 鼠标和键盘事件
II、其他Vue方法
a、过滤器 |
对应 angular ，可以实现类似 管道的过滤功能，前一个处理结果，作为第一个参数传给后一个过滤器函数，对于过滤器必须使用 filters 来标注函数。
b、计算属性 computed
和普通methods的区别是，直接使用 名称就可以，而methods需要 () 才能作为方法执行；此外，computed 的记录会缓存,直到依赖的数据发生变化，而methods每次调用都重新执行
5、表单元素
主要通过v-model绑定表单控件的值
比如 复选框
6、组件化
任何框架最终的杀伤力都是能够模块化，组件化，这是非常精华重要的部分，Vue也不例外，下面看Vue如何抽象封装成新的框架和组件
组件化，一般包含几个部分：a、H5界面上，使用的自定义标签和属性；b、js模版中，提供标签和属性的 html模版替换
I、组件化的一个例子
II、组件化的步骤
一、注册一个组件
a、全局组件 Vue.component
b、局部组件 在 new Vue 中 的 components 属性
new Vue({
components: {
'runoob': {template: '< > 自定义组件 <>''}
}
})
二、使用 template 进行替换 标签元素
三、父控件(外层) 传递数据给 子控件(内层)，通过 props 传递数据
如果传递的是静态数据比如字符串 直接使用 todo属性，比如 todo="aaa";如果是动态数据，绑定的其他数据使用 v-bind:todo 绑定一个变量
四、子控件(内层) 传递数据给父控件(外层),通过事件来传递
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
7、自定义指令
Vue和AugularJS一样，也有自定义指令，不过功能却不一样，angularJS的自定义指令对应的是Vue的component 组件功能，通过自定义指令这样可以实现更多的组合功能，比如可以在指令中定义自己的事件处理体系
和组件一样，也有全局和局部指令
Vue.directive('focus', {});
directives: {focus:{});
I、注册一个指令 directive
II、钩子(回调)函数 bind/inserted/update/componentUpdated/unbind
函数入参
el -- 指令绑定的元素
binding -- 获取绑定的指令的信息
vnode -- vue编译后的节点
使用钩子函数用在何时实现指令的功能，如果不指定则所有时候都生效
III、通过函数获取的 el,bingding 对象实现相应的操作
8、其他重点知识
其他常见指令
v-show 指令
-- 对比 angular 的ng-show
实现的效果和 v-if 类似，但背后的逻辑不通，v-if 是控制是否插入该元素，而v-show 是肯定插入该元素，通过 display:none 样式控制显示