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属性进⾏展示。