用户名片 3:页面实现

前言

通过前两篇的学习,我们实现了用户名片的设置和读取功能,其中包括图片的上传、压缩及存储在 Nginx 服务器上。本篇我们将在前端实现用户名片的设置和读取,并在不同的场景中分别获取头像的缩略图和原图。

知识准备

本篇内容主要是页面的布局,主要涉及到了 Vue 的生命周期以及 Element UI 中的组件,在学习前,先给大家做下简单介绍。

  • Vue 生命周:Vue 对象从创建到销毁的全过程,其中的每个过程都有对应的钩子函数,我们可以通过这些钩子函数指定其在某个过程中要执行的动作。
  • Container 布局容器:用于布局的容器组件,方便快速搭建页面的基本结构。
  • Upload 上传:通过点击或者拖拽上传文件。
  • Dropdown 下拉菜单:将动作或菜单折叠到下拉菜单中。

Vue 生命周期

Vue 对象从创建到销毁经历了以下过程,每个过程都有相应的钩子函数可供调用:

  1. beforeCreate:创建 Vue 对象前,初始化事件,生命周期的开始。
  2. created:Vue 对象创建完成,对语法格式和函数进行校验,创建 Vue 对象。
  3. beforeMount:Vue 对象挂载前,对模板 <template> 进行编译。
  4. mounted:Vue 对象挂载完成,模板、数据、方法均准备完毕,Vue 对象完全挂载到页面上。
  5. boforeDestory:销毁前,解除绑定,销毁子组件以及事件监听器。
  6. destoryed:销毁完毕
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付 59.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值