vue3功能实现

这篇具有很好参考价值的文章主要介绍了vue3功能实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在vue2中,要实现一些方法(增删改查)一般都是写在一起的。如下图所示:

vue3功能实现,vue.js,前端,javascript

但是在vue3中,实现一个方法需要用到很多文件。

vue3功能实现,vue.js,前端,javascript

方法定义方法如下:  

export function classSign(phone: string) {
  return sign_request<Boolean>({
    url: `sign?phone=${phone}`,
    method: "get"
  })
}

export function editBlogCount(data: BolgCountData) {
  return sign_request({
    url: "blog/blog-info-change",
    method: "post",
    data
  })
}

 vue3功能实现,vue.js,前端,javascript

 service文件中定义方法

/** 创建请求方法 */
function createRequest(service: AxiosInstance) {
  return function <T>(config: AxiosRequestConfig): Promise<T> {
    const token = getToken()
    const defaultConfig = {
      headers: {
        // 携带 Token
        Authorization: token ? `Bearer ${token}` : undefined,
        "Content-Type": "application/json"
      },
      timeout: 5000,
      baseURL: "/sign-system",
      data: {}
    }
    // 将默认配置 defaultConfig 和传入的自定义配置 config 进行合并成为 mergeConfig
    const mergeConfig = merge(defaultConfig, config)
    return service(mergeConfig)
  }
}

/** 用于网络请求的实例 */
const service = createService()
/** 用于网络请求的方法 */
export const sign_request = createRequest(service)

post请求中用到的参数在order.ts中定义:

//入参定义
export interface NoSignStudentList {
  id: string
  name: string
  blogCount: number
  blogAddress: string
}

export interface BolgCountData {
  phone: string
  blogCount: number
}

//出参定义
export type GetTableResponseData = ApiResponseData<{
  list: GetTableData[]
  total: number
}>

export type GetNoSignData = ApiResponseData<{
  noSignStudentListI: NoSignStudentList[]
}>

在vue文件中,首先给按钮绑定点击事件(此处和vue2相同):

vue3功能实现,vue.js,前端,javascript

 之后在script中定义方法:

vue3功能实现,vue.js,前端,javascript

 到这里完整的方法就可以实现了,虽然比vue2稍微复杂一点,但是熟练后编写更加方便。文章来源地址https://www.toymoban.com/news/detail-571655.html

到了这里,关于vue3功能实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端vue3+element plus 分页table排序功能实现

    我有如下所示的一个table,数据data是一个computed计算属性,一般情况下筛选使用element的sortable属性就可以了,可查看Element - The world\\\'s most popular Vue UI framework 但我的 table 是一个分页的 table ,当我使用 sortable 时发现,它只是对当前页的数据进行排序,但这并不是我需要的,我的

    2024年02月14日
    浏览(48)
  • vue3+vant+cropper.js实现移动端图片裁剪功能

    最近做项目中遇到一个需求,需要对海报图片按照一定的比例进行裁剪并上传到oss。一开始这个需求思路有两个,使用canvas原生或者寻找现成的第三方库,对比了一番觉得canvas实现时间耗费较长,且秉承着不重复造轮子的原则(其实是菜)。 在进行技术调研后,决定使用vu

    2024年02月01日
    浏览(41)
  • 使用ExcelJS实现excel的前端导出功能(Vue3+TS)

    ExcelJS :读取,操作并写入电子表格数据和样式到 XLSX 和 JSON 文件。一个 Excel 电子表格文件逆向工程项目。 github中文文档:https://github.com/exceljs/exceljs/blob/master/README_zh.md  封装excel.ts工具文件 表格页面调用excel工具文件 

    2024年02月14日
    浏览(52)
  • vue+face-api.js实现前端人脸识别功能

    近期做了一个前端vue实现人脸识别的功能,主要功能逻辑包含:人脸识别,人脸验证,唤起摄像头视频流之后从三个事件(用户点头、摇头、眨眼睛)中随机选中两个事件,待两个事件通过判断后人脸静止不动3秒钟后截取视频流生成图片,上传到阿里或者腾讯oss,通过oss返回

    2024年02月05日
    浏览(42)
  • 使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能

    引言: 随着互联网的快速发展和智能手机的普及,电子商务行业正迎来一个全新的时代。越来越多的消费者选择网上购物,而不再局限于传统的实体店。这种趋势不仅仅是改变了消费者的习惯购物,也给企业带来了巨大的商机。为了不断满足消费者的需求,电子商务网站需要

    2024年02月15日
    浏览(54)
  • 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)二:登录界面及对应功能实现

      本章介绍系统登录界面、登录流程、登录接口等相关内容的开发,实现包括账号密码登录、短信验证登录等不同的登录方式,使用svg-capter生成图形验证码,使用expressjwt实现登录token的生成及验证。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击

    2024年02月11日
    浏览(64)
  • vue3引入JS-SDK实现h5分享小卡片、跳转微信小程序功能

    微信js-sdk官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 想要实现的效果: 1.登录微信公众平台,进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 2.通过npm引入js-sdk 安装成功后,可以在package.json中找到\\\"weixin-js-sdk\\\" 3.在main.js中,将js-sdk挂载

    2024年02月11日
    浏览(62)
  • 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)三:找回密码界面及对应功能实现

      本章实现找回密码功能,包括短信验证码找回、邮箱验证码找回等功能,并通过node-send-email发送邮箱验证码,实现找回密码界面、接口等功能。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击下载

    2024年02月12日
    浏览(50)
  • 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)十六:统计报表模块相关功能实现

      本章使用Echarts及DataV实现常用图表、特殊图表、地图及综合图表等图表展示功能。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击下载 基于VUE3+Layui从

    2024年02月04日
    浏览(58)
  • 前端技术Html,Css,JavaScript,Vue3

    1.基本标签 2.文本格式化 3.链接 4.图片 5.无序列表 6.有序列表 7.表格 8.表单 1.选择器 2.文本和字体 3.链接 4.隐藏 5.定位position 6.浮动 7.对齐 8.图像 1.输出 2.函数 3.常用事件 4.DOM 5.改变Html 6.DOM 元素 (节点) 尾部创建新的 HTML 元素 (节点) - appendChild() 头部创建新的 HTML 元素 (节点)

    2024年02月13日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包