Vue学习之深入探索(三)

Vue生命周期

何为生命周期？

Vue是咧

生命周期四大阶段

1.创建阶段：响应式数据（准备数据）...
2.挂载阶段：渲染模版
3.更新阶段：数据更改，更新图视
4.销毁阶段

生命周期函数（钩子函数）

何为钩子函数？

在生命周期过程中，会自动运行的一些函数。

具有以下八个阶段：

具体解释

创建前：beforeCreate
创建后：created
挂载前：beforeMount
挂载完成后：mounted ✔	=> 发送请求，获取数据
数据更新前：beforeUpdate
数据更新后：updated
组件销毁前：beforeUnmount
组件销毁后：unmount

关注点：mounted

解释：通过mounted发送请求，拿到页面所需的数据，以便将其渲染到页面进行展示

案例体验

<div id="app">
</div>

<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    
    createApp({
        data(){
            return{
            }
        },
        mounted:function(){
            console.log('Vue挂载完毕，发送请求获取数据')
        }
    }).mount("#app")
</script>

结果展示

API风格

Vue组件具有两个风格：组合式API和选项式API

在开发时，我们通常使用组合式API

Axios基本使用

何为Axios？

1.Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境中发送 HTTP 请求。
2.它可以让你以简单和直观的方式与后端的 REST API 进行通信。
3.Axios对原生的Ajax进行了封装，简化书写，从而快速开发。

若向更多了解，可以访问一下的官网

官网：https://www.axios-http.cn/

Axios作用

向后端发送给请求(get,post...)，同时也可以在请求中添加可控化功能。

使用步骤

1.引入Axios的js文件（参考官网）

使用 unpkg CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.使用Axios发送请求，并获取相应的结果

代码体现

通用写法

<!-- 1.引入axios的js文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    // 发送请求
    axios({
        method:'get',
        url:'http://localhost:8080/article/getAll'
    }).then(result=>{
        // 成功的回调
        // result代表服务器响应的所有数据，包含了响应头，响应体，
        // result.data 代表的是接口响应的核心数据
        console.log(result.data)
    }).catch(err=>{
        // 失败的回调
        console.log(err)
    })
</script>

推荐写法

axios.请求方式(url[,data数据[,配置config]])

说明：url是必须写的，其余可以不写

1.GET请求

axios.get('http://localhost:8080/article/getAll').then(result=>{
    // 成功反馈
    // result代表服务器响应的所有数据，包含了响应头，响应体，
    // result.data 代表的是接口响应的核心数据
    console.log(result.data);
}).catch(err=>{
    // 失败反馈
    console.log(err);
})

2.POST请求

let article={
    title: '新生',
    category: '生命',
    time: '2024-1-1',
    state: '草稿'
}

axios.post('http://localhost:8080/article/add',article)
.then(result=>{
    // 成功反馈
    // result代表服务器响应的所有数据，包含了响应头，响应体，
    // result.data 代表的是接口响应的核心数据
    console.log(result.data);
}).catch(err=>{
    // 失败反馈
    console.log(err);
})

Element-Plus

何为Element-Plus？

Element-Plus是面向设计师和开发者的组件库
组件：组成网页的部件，如：超链接，按钮，表单，分页条...

若向更多了解，可以访问一下的官网

官网：https://element-plus.org/zh-CN/#/zh-CN

使用步骤

准备工作

1.创建Vue项目

2.安装Element Plus组件库(在当前工程目录下)，使用一下代码：

npm install element-plus --save

3.main.js中引入Element-Plus组件库（参照官网）,此处直接给出(覆盖即可)：

import { createApp } from 'vue'// 导入vue
import ElementPlus from 'element-plus'// 导入element-plus
import 'element-plus/dist/index.css'// 导入element-plus样式
import App from './App.vue'// 导入app.vue

const app = createApp(App)// 创建vue应用实例

app.use(ElementPlus)// 使用element-plus
app.mount('#app')// 控制HTML元素

组件使用

访问Element-Plus官网，复制组件代码即可。

具体步骤：

1.点击组件
2.在左侧栏中选择自己所需的组件
3.进行查看代码
4.复制代码
5.可以通过扩展的API来扩展功能，如：disabled（禁用），loading（加载）等

6.在src目录下，新建一个button.vue文件（此处以按钮为例）
7.将在官网复制的内容，黏贴到button.vue文件中
8.在App.vue文件中引用button.vue文件

效果展示