1.学习vue的目标
通过尽可能简单的API实现响应的数据绑定和数组的视图组件
2.核心
一个响应的数据绑定系统，它让数据与DOM保持同步
3.理解MVC架构和MVVM开发方式
实现基于MVVM实现交互式的Web界面
掌握用vue.js实现网站开发
4.组件系统：一种抽象，提供小组件来构建大型应用，然后形成一个组件树。
5.属性和方法
每个vue实例都会代理data对象里的所有属性
被代理的属性是响应的。
6.vue.js数据绑定
插入值：文本
<span>Message:{{ msg }}</span>
原始的HTML
<div>{{{ raw_html }}}</div>
HTML特性
<div id="item-{{ id }}"></div>
绑定表达式:Javascript表达式 每个绑定只能包含单个表达式
过滤器(Filter):
{{ message|capitalize }} 过滤器只能在后面
过滤器可以串联{{ message|filterA|filterB }}
过滤器也可以接受参数
指令：特殊的带有前缀v-的特性
参数：有些指令可以在后面带一个参数，用冒号隔开
<a v-bind:href = "url"></a>
修饰符：以半角句号开始的特殊后缀，用于表示指令应当以特殊方式绑定
<a v-bind:href.literal = "a/b/c"></a>
缩写:最常用的v-bind和v-on提供缩写
<a v-bind:href = "url"></a> <a :href = "url"></a>
<a v-on:click = "dosomething"></a> <a @click = "dosomething"></a>
在input中使用v-model来实现数据双向绑定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'ABCDEFG!'
}
})
</script>
7.vue的计算属性：computed
基础例子：计算属性的getter
$watch用于观察vue实例上的数据变动,相比较于计算属性，后者更好用一些
计算属性默认的只有getter,需要时可以创建setter
8.vue.js与样式绑定
绑定HTML Class class{{className}}和v-bind:class两者不可混用，推荐使用后者
//v-bind:class动态地切换class
<div v-bind:class="{'class1':class1 }">
Hello World
</div>
绑定内联样式：对象语法
vbind指令被用来响应地更新HTML属性
<div v-bind:style = "{fontSize + 'px'}"></div>
数组语法
<div v-bind:style = "[ styleObjectA,styleObjectB ]"></div>
可以将多个样式 对象应用到一个元素上
自动添加前缀
9.vue条件渲染
v-if
<h1 v-if = "ok">YES</h1>
template v-if
<template v-if = "ok">
<h1>Hello</h1>
<p>kkkkk</p>
</template> //切换多个元素，可以把<template>当作包装
元素，并在上面使用v-if,渲染结果不包含它
v-show：简单的切换元素的css display属性，始终渲染并保存在啊DOM 中，不支持<template>
<h1 v-show = "ok">YES</h1>
v-else：必须跟在v-if或v-show后面，否则不能识别
v-if vs. v-show
v-if：真实的条件渲染，有更高的切换效率
v-show：简单的基于css切换，有更高的初始切换消耗
需要频繁切换用v-show，不太改变用v-if。
10.列表渲染
v-for：使用v-for指令基于一个数组渲染一个列表
template v-for：v-for用在<template>标签上，用来渲染一个包含多个元素的块
数组变动检测：变异方法:
push()/pop() shift()/unshift() splice() sort()reverse()
替换数组:不会修改原始数组而是返回一个新数组的非变异方法，直接用新数组替换旧数组filter()/concat()/slice()
track-by:用全新对象替换数组
track-by $index
问题：扩展观察数组，为它添加了$set()方法$remove()
需要一个空数组替换items
对象v-for:使用v-for遍历对象，除了$index之外，作用域内还可以访问另外一个特殊变量$key
值域v-for:v-for也可以接收一个整数，此时它将重复模板数次
<div>
<span v-for = "n in 10">{{ n }} </span>
</div>
显示过滤/排序的结果:创建一个计算属性，返回过滤/排序过的数组
使用内置的过滤器filterBy和orderBy
计算属性有更好的控制力，也更灵活，因为它是全功能JavaScript。但是通常过滤器更方便。
