vue组件、axios和动画
1. 组件
1.1 什么是组件
拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块
1.2 组件化和模块化的区别
- 模块化:从代码功能逻辑的⻆度划分,⽅便代码分层开发,保证每个功能模块的职能单⼀
- 组件化:从UI界⾯的⻆度划分,前端的组件化,⽅便UI组件的重⽤
1.3 component标签
component标签⾥⾯有⼀个is属性,⽤来展示组件。
1.4 使用组件
在页面中有个 components属性 进⾏导⼊组件,把组件名当做标签使用
- 为什么组件中的data属性必须定义为⼀个⽅法并返回⼀个对象
- 数据隔离
1.5 父子组件传参
1.5.1 父传子
- 在父组件的子标签中自定义一个属性
- 在子组件中有一个props属性,用来接收父组件传递的数据,传递的数据不能修改,可以设置默认值。
1.5.2 子传父
- 在父组件的子标签中自定义一个事件,事件里面有一个参数用来接收子组件的传参
- 在子组件中有一个this.$emit(自定义事件的名字,传递的数据)
2. axios
axios 基于promise的http状态库,封装ajax. ajax包含axios。
2.1 get请求
axios.get(url地址+参数).then(response=>{})
axios.get('https://wkt.myhope365.com/weChat/applet/course/banner/list?number=3').then(res=>{
this.imgList = res.data.data
})
2.2 post请求
axios.post(url地址,请求参数,对象{headers:{}}).then(response=>{})
axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type',{
type,
pageNum: 1,
pageSize: 5
},{
headers:{
'Content-type':'application/x-www-form-urlencoded'
}
})
2.3 什么是封转axios,封转axios的好处
封装Axios是指将Axios库进⾏⼆次封装,封装Axios的⽬的是为了简化HTTP请求的代码,提⾼代码的可复⽤性和可维护性,并可以在整个项⽬中统⼀处理请求的配置、拦截和错误处理等。
3. 动画
3.1 v-enter、v-enter-to和 v-enter-active
3.2 v-leave、 v-leave-to和 v-leave-active
4. 命名视图
⼀个地址对应⼀个组件,现在可以⼀个地址对应多个组件
- 在路由对象⾥⾯声明components属性,⾥⾯写的是组件名称
- 在父组件⽤router-view⾥⾯有⼀个name属性进⾏展示。