前端学习第十天

一、组件基础

单文件组件

Vue单文件组件（又名*.vue文件，缩写为SFC）是一种特殊的文件格式，它允许将Vue组件的模板、逻辑与样式封装在单个文件中。

加载组件

第一步：引入组件 

import MyComponentVue from './components/MyComponent.vue'

第二步：挂载组件

components:{ MyComponentVue } 

第三步：显示组件

<my-componentVue />  

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织

二、Props组件交互

组件与组件之间是需要存在交互的，Prop是可以在组件上注册的一些自定义attribute

props:{
    title:{
        //固定格式
    }
}

 数据类型为数组或者对象时候，默认值是需要返回工厂模式

三、自定义事件的组件交互

prop将数据从父组件传递到子组件，自定义事件可以反向传递数据

四、组件的生命周期

组件的生命周期有八个阶段，可分类为：

创建时：beforeCreate、created

渲染时：beforeMount、mounted

更新时：beforeUpdate、updated

卸载时：beforeUnmount、unmounted

在data(){}之后或之前，与它是同级。把网络请求放到mounted函数中。

五、Vue引入第三方

Swiper——开源、免费、强大的触摸滑动插件；纯Javascript打造的华东特效插件，面向手机、平板电脑等移动终端；能实现触屏焦点图、触屏Tab切换、触屏轮播图等常用效果；

在根目录下输入

cnpm install --save swiper

 六、Axios网络请求

Axios是一个基于promise的网络请求库，实现AJAX异步通信

同样也要引入

组件中引入：

import axios from 'axios'

全局引用：

import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$axios = axios
app.mount('#app')


//在组件中调用
this.$axios

网络请求跨域解决方案

1. 后台解决：cors
2. 前台解决：proxy

devServer:{
    proxy:{
        '/api':{
            target:'<url>',
            changeOrigin: true
        }
    }
}

 七、Vue引入路由配置

在Vue中引入路由

安装路由

cnpm install --save vue-router

配置独立的路由文件