第一部分基础知识学习：
（1）vue挂载渲染基础；
（2）生命周期；
（3）计算，方法与监听；computed中get与set；
（4）vue进行样式渲染：<1>class的对象（true or false）或数组绑定；<2>style的绑定数组数据（data中定义styleobj用于样式绑定改变）
（5）vue的条件渲染：v-if(不渲染)；v-show(渲染而不显示)
（6）列表渲染：
数组渲染：
v-for="((item,index) in items)"; :key="item.id(唯一量)";
数组变异方法：pop ,push , shift , unshift , splice , sort , reverse ;
vue.set(对象，index,value)【全局】;vm.$set(.....)【实例上】
template循环渲染占位符<template v-for="">...</template>;
对象渲染：
v-for="((item,key,index) in items)"; key为键值；
除了重新给对象赋值以外，还可以用vue.set(对象，key,value)【全局】;vm.$set(.....)【实例上】
第二部分深入理解vue组件
（1）注意点：
。table表格【ul,ol,select等也是这样】元素中只能用指定标签，使用组件会渲染错误，使用is:<tr is="组件名"></tr>
。子组件中data必须是一个函数 。操作DOM时候可以使用ref获取dom节点：this.$refs.dom中ref名;
（2）父子组件之间的传值
。子组件通过this.$emit("事件名"，参数)给父组件用props ; 父组件通过属性《监听事件@事件名=“函数”【函数可获取传过来的值】》向子组件传值
。子组件不可修改从父组件传递来的值，反之可修改；若要修改可将获得的值重新赋给新定义的量【单向数据流】
（3）组件的参数校验与非props特性
。非props特性：父组件向子组件传值，但是子组件不接，则内容会渲染在子组件标签属性上不会渲染在标签内
。参数校验：
Vue.component("child",{
// 父组件传来的content必须有props来接收
props:{
content:{
typs:[String,Number],
require:false,
default:'default value',
// 自定义校验器
validator:function(value){
return (value.length>5)
}
}
},
template:'<div>{{content}}</div>'
})（4）组件绑定原生事件(绑定后加上.native)
<child @click.native="handelclick"></child>
（5）非父子组件之间的传值【Bus/总线/发布订阅模式/观察者模式】
<div id="app">
<child contnet="aaaa"></child>
<child contnet="bbbb"></child>
</div>
<script>
Vue.prototype.bus=new Vue();
Vue.component("child",{
data:function(){
selfcontent:this.content
},
props:{
content:String
},
template:'<div @click="handelclick">{{selfcontent}}</div>',
methods:{
handelclick:function(){
this.bus.$emit('change',this.selfcontent)
}
},
mounted:function(){
var this_=this
this.bus.$on('change',function(msg){
this_.selfcontent=msg
})
}
})
var vm=new Vue({
el:"#app",
})
</script>（6）在vue中使用插槽
组件template中使用<slot></solt>标签获取插槽内容 ; 多个插槽内容dom中给属性solt="aaa"，在<solt>标签中给name="aaa"，即可对应插槽即具名插槽。
（7）vue中的作用域插槽
<div id="app">
<child>
<!--作用域插槽必须在这里用template包裹-->
<template slot-scope="props">
<p>{{props.item}}</p>
</template>
</child>
</div>
<script>
Vue.component("child",{
data:function(){
list:[1,2,3,4]
},
template:'<div><ul><solt v-for="item in list" :item="item"></solt></ul></div>'
})
var vm=new Vue({
el:"#app",
})
</script>（8）动态组件<component>与v-once指令
<div id="app">
<!--<child-one v-if="type===child-one"> </child-one>-->
<!--<child-two v-if="type===child-two"> </child-two>-->
<!--利用此标签实现动态组件-->
<component :is="type"></component>
<button @click="handlebtn"></button>
</div>
<script>
// v-once将组件放入内存，提高展示效率
Vue.component("child-one",{
template:'<div v-once>one</div>'
});
Vue.component("child-two",{
template:'<div v-once>two</div>'
})
var vm=new Vue({
el:"#app",
data:{
type:'child-one'
},
methods:{
handlebtn:function(){
this.type=this.type=='child-one'?'child-two':'child-one';
}
}
})
</script>第三部分vue基础动画
CSS以及keyfrom实现；js实现；animat.css 与velocity.js实现动画；多元素过渡动画；列表动画；动画组件的封装
css与js实现动画
<!--animinate.css velocity.js-->
<div id="app">
enter可以传入两个参数 el和down ; Velocity(el.{color:red},{duration:1000,compelt:down})
<trasition name="fade" @befor-enter="handelbeforennter" @enter="" @after-enter=""></trasition>
多个元素的过渡动画
<transition mode="out-in">
<div key="div1"></div>
<div key="div2 "></div>
</transition>
列表的过渡动画
<transition-group>
<div v-for="item in list" :key="id"></div>
</transition-group>
动画封装为组件
</div>