vue学习总结

1. 计算属性computed对象中的方法调用的时候不能加括号（）

2. 父子组件之间的通信问题：
   方法一：
   父向子传：props
   子向父传：this.$emit()
   方法二：
   单个插槽：适用于那些数据相同，但展示模板相近又不一样的情况
   在父组件中定义子组件的插槽内的HTML标签，样式定义在父子组件中都可以

   具名插槽：引用多个插槽，避免插槽重复
   作用域插槽：可以传递数据，但子向父传。子决定数据，父决定视图。	
   

3. 动态组件：
   keep-alive标签，实现视图的切换，注意什么时候使用缓存

4. 过渡动画：transition标签，使用过渡类名即可

5. 自定义指令【重点，注意掌握】：
   全局指令：
   定义一个focus指令：

   	Vue.directive("focus",{
   	 	inserted:function(ele){
   	 		ele.focus();
   	 	}
   	})
   

在HTML元素上添加v-focus即可
局部指令：

	export default(){
		data(){
			return{

			}
		},
		directives:{
			focus:{
				inserted(ele){
					ele.focus();
				}
			}
		}
	}

在HTML元素上添加v-focus即可

6. 自定义过滤器【重点，注意掌握】：

export default(){
	data(){
		return{

		}
	},
	filters:{
		
	}
}

使用时加在管道符之后

8. 网络请求axios：
   （1）get请求
   引入axios：

   import Axios from "axios";
   

   将axios挂载到vue原型上：

   Vue.prototype.$axios=Axios;
   

   在生命周期函数created中使用：

   this.$axios.get(url,{params:{}}).then().catch();
   

   （2）post请求
   在生命周期函数created中使用：

   this.$axios.post(url,{params}).then().catch();
   

   注意：可能参数格式会出错，需要序列化。post请求的参数是form-data格式，即?name=haha&id=5这样的

9. vue-router详解：
   安装：npm install -save vue-router
   引用(main.js)：

   import VueRouter from "vue-router";
   Vue.use(VueRouter);
   

   定义路由并创建实例：

   var router=new VueRouter({
   	routes:[
   		{path:"./",component:componentName},
   		{path:"./",component:componentName}, 
   	]
   })
   

   Vue实例中加入routes：

   new Vue({
   	router
   })
   

   配置路由出口：

   <router-view></router-view>
   

10. 动态导航（路由嵌套、路由传参、路由）：

    <router-link></router-link>
    

利用to属性，可以绑定变量
应用：tabbar切换显示不同页面，比如京东商城

11. vuex，状态管理：多组件共享数据
    state：对象，状态管理
    mutations：对象，操作state，对象中方法的参数为state，调用方法用this.$store.commit("")
    actions：对象，异步操作，对象中方法的参数为context，调用方法用this.$store.dispatch("")