-
计算属性computed对象中的方法调用的时候不能加括号()
-
父子组件之间的通信问题:
方法一:
父向子传:props
子向父传:this.$emit()
方法二:
单个插槽:适用于那些数据相同,但展示模板相近又不一样的情况
在父组件中定义子组件的插槽内的HTML标签,样式定义在父子组件中都可以具名插槽:引用多个插槽,避免插槽重复 作用域插槽:可以传递数据,但子向父传。子决定数据,父决定视图。
-
动态组件:
keep-alive标签,实现视图的切换,注意什么时候使用缓存 -
过渡动画:transition标签,使用过渡类名即可
-
自定义指令【重点,注意掌握】:
全局指令:
定义一个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即可
- 自定义过滤器【重点,注意掌握】:
export default(){
data(){
return{
}
},
filters:{
}
}
使用时加在管道符之后
-
网络请求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这样的
-
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>
-
动态导航(路由嵌套、路由传参、路由):
<router-link></router-link>
利用to属性,可以绑定变量
应用:tabbar切换显示不同页面,比如京东商城
- vuex,状态管理:多组件共享数据
state:对象,状态管理
mutations:对象,操作state,对象中方法的参数为state,调用方法用this.$store.commit("")
actions:对象,异步操作,对象中方法的参数为context,调用方法用this.$store.dispatch("")