- Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
- Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
- Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
- Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
————————VueJS————————
个人总结：关注数据，数据驱动页面
基本套路
1.使用<script>引用Vue.js文件。
2.body或div#appName，设置Vue的控制区域，与angular中ng-app一样。
<element id='appName'>
comtent
</element>
%注意：Vue2.0中最好不要绑到body元素上。
3.在body内添加script，或独立的js文件。常用固定套路如下：
<script>
var vm = new Vue({
el: '#appName', # (1)
data: { # (2)
name: 'Allen',
age: 18,
artical: {
title: 'Welcome',
content: 'Hello world!'
},
jobs: ['engineer', 'assistant', 'teacher']
}，
methods: { # (3)
functionName: function(){
alert(this.artical.title)
}
},
ready: function() { # (4)
return this.functionName()
}，
computed: { # (5)
something: function(){
return otherthing
}
})
#(1)Vue所控制的区域
#(2)数据，可在appName范围内通过{{}}语法引用, data可以是任意类型
#(3)可选，Vue方法都放置在methods内，形式如上
#(4)可选，在页面加载完成时，调用ready函数。
#(5)可选，动态计算，其函数必须有返回值。可在需要的地方直接引用函数名{{something}}
</script>
> %注意：Vue版本1和2在appName的位置有所不同，Vue2不再支持绑定到body以及html
4.在HTML中使用{{ varName }} 方式引用data内的数据，如：
<div>
{{name}}
{{article.title}}
{{ jobs[0] }}
</div>
5.指令v-model，进行数据绑定，在控制区域内使用，如：
<!-- 在input输入框内输入数据，会在p内实时显示 -->
<div class="vModel">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
%注意：单纯的这种方式，在Vue2版本下并未实现，Vue1版本支持。
message必须在data内才有效。
6.指令v-for，对可迭代对象进行遍历，array object string number如：
<div class="vFor">
<span v-for='item in jobs'>{{item}}</span>
<span v-for='(key, value) in artical'>{{key}}:{{value}}</span>
</div>
> %注意：指令也是扩展了HTML属性，与Angular是一样的
7. 事件绑定使用v-on: eventHandler='doSomething', 如：
<!-- 如果a有初始值，那么在点击时，a就会改变当前值 -->
<button v-on:click='a+=1'>{{a}}</button>
doSomething也可以是一个函数的调用，通常用法也是这样的
> %注意：如果想直接改变style样式的属性值，需要将style放置在appName的范围之内才能起作用
8.数据遍历的几种形式：
______一定要注意参数的顺序:
<!-- 遍历数组内的项 -->
<div v-for='item in array'>{{item}}</div>
<!-- 遍历数组内的项, 索引值index是第二个参数，Vue2.0 -->
<div v-for='(item, index) in array'>{{index}} : {{item}}</div>
<!-- 遍历对象内的键和值 -->
<div v-for='(key, value) in object'>{{key}} : {{value}}</div>
<!-- 遍历对象内的值 -->
<div v-for='value in object'>{{value}}</div>
<!-- 遍历对象内的值和键，已及第三个参数作为索引值 -->
<div v-for='(value, key, index) in object'>{{key}} : {{value}}:{{index}}</div>
<!-- 整数迭代 -->
<div v-for='n in 10'>{{ n = n * 2 }}</div>
9.computed可用于制作过滤器：
#可用于过滤掉身高小于等于10的人，在相应出直接使用biggerThan即可。
computed: {
biggerThan: function() {
var men = function(height){
return height > 10
}
return this.array.filter(men)
}
}
10.Vue.js没有ajax方法，可用如下方法替代：
# 原生JS的XHR
# jQuery库的ajax方法
# fetch方法（以后可能会替代AJAX）
# 及其他
总结：
使用上述介绍，使用localStorage来保存数据，可以做一个TODOlist的单页应用了。还蛮有意思的。
