![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue3
文章平均质量分 80
Janeb1018
致力于推广PostgreSQL数据库及Python语言在国内的应用;同时,分享Delphi应用程序设计,让年轻一代的程序员了解并应用Delphi进行软件开发。
展开
-
Vue3父子组件值传递(一)
Vue3父子组件值传递(一)本节我们来学习Vue3父子组件之间的数据传递 - 单向数据传递,这一节包括: 父组件传递数据到子组件 子组件传递数据到父组件 父子组件相互之间的数据单向传递 本节内容的前提是在父子组件传递数据的过程中,没有对传递的数据进行修改。1.父组件传递数据到子组件父组件传递数据到子组件的过程如下:也就是说,父组件需要将值传递给子组件的属性即可实现。子组件写法:<template> <div>..原创 2022-04-08 23:04:32 · 10093 阅读 · 0 评论 -
Vue3 PC端页面开发规范
Vue3 PC端页面开发规范1.开发环境Vue开发环境:软件 版本 node.js v16.14.0 vue @vue/cli 5.0.1 UI 框架:UI框架 版本 Element Plus ^2.0.5 PrimeVue ^3.12.1 其他组件:其他组件 版本 axios ^0.26.1 moment ^2.29.1 sweetalert ^2.1.2 以上列出的是开发所需要的重要部原创 2022-04-07 22:43:14 · 2634 阅读 · 0 评论 -
Vue3 PrimeVue 应用开发实战1
Vue3 PrimeVue 应用开发实战11.PrimeVue简介PrimeVue 是一套非常优秀的 Vue UI 组件库,支持 Vue 3 的 web UI 组件库,组件丰富,定制性很强,官网文档清晰,代码例子充足,而且中文化也做得很不错,是一款可用性很强的 Vue 组件库。PrimeVue 的技术特性: 组件丰富。内置 70 多个常用的组件,体验优秀,使用简单 主题丰富。内置大量主题,且提供强大的主题定制工具 高效开发模板。由专业设计师设计并由 Vue.原创 2022-04-04 22:54:21 · 8316 阅读 · 4 评论 -
Vue3子组件向父组件返回数据
Vue3子组件向父组件返回数据Vue3的子组件向父组件返回数据与Vue2有所不同。具体表现在emits,setup()的使用上,但原理上仍然是相同的,也就是说子组件在向父组件返回数据时,父组件在定义子组件时绑定事件,子组件在返回数据时触发相应的事件就可以了。1.子组件写法<template> <div> ...... <el-button @click="按钮单击事件">Default</el-button> &l...原创 2022-04-03 22:21:47 · 2558 阅读 · 0 评论 -
Vue3前后端交互错误处理一致性
Vue3前后端交互错误处理一致性在Web开发中,前后端的交互中错误处理是不可避免的,比如:前端提交数据,后端需要校验,对于不符合要求的数据需要在前端进行提示。通常的做法是在后端返回固定格式的JSON数据来处理,但由于返回的JSON格式在业务、团队等方面很难维护其规范性,所以借助错误处理的方式,在数据请求中统一封装,这样有助于程序员将精力集中到业务处理中。1.环境开发环境 前端 Vue3 后端 Python FastAPI 2.后端处理规范 后端在原创 2022-04-01 23:06:42 · 491 阅读 · 0 评论 -
Post请求Loading及封装
Post请求Loading及封装1.组件 axios sweetalert 2.目标对post请求进行封装的目标及最终实现如下: 实现在请求时弹出遮罩层 在header中设置Authorization 发生错误弹出错误提示信息 鉴权失败后跳转到登录页面 3.loading代码使用 JS 代码实现在页面上显示遮罩层及图片,代码如下:/* * GUID */function guid () { function S4 () .原创 2022-03-31 23:52:52 · 179 阅读 · 0 评论 -
Vue3 Element Plus 应用开发实战2
Vue3 Element Plus 应用开发实战2本节实战内容:对 Element Plus 的菜单组件进行封装,实现一个无限级菜单组件。首先,我们来分析一下 Element Plus 中菜单的基本使用方法。1.Element Plus 菜单组件 <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo...原创 2022-03-30 21:59:56 · 1327 阅读 · 0 评论 -
Vue3子组件向父组件返回数据
Vue3子组件向父组件返回数据Vue3的子组件向父组件返回数据与Vue2有所不同。具体表现在emits,setup()的使用上,但原理上仍然是相同的,也就是说子组件在向父组件返回数据时,父组件在定义子组件时绑定事件,子组件在返回数据时触发相应的事件就可以了。1.子组件写法<template> <div> ...... <el-button @click="按钮单击事件">Default</el-button> &l...原创 2022-03-29 21:54:53 · 1383 阅读 · 0 评论 -
Vue3 Element Plus 动态图标
Vue3 Element Plus 动态图标Element Plus 中的图标以组件的形式来使用,而在基于Vue 2.x的Element UI中图标是字符串的形式,这样就导致过去的一些使用习惯不得不在使用Vue3的过程中改变,但实际上,在基于Vue3的Element Plus中也可以以字符串的形式来使用,只是需要多做一些工作。为什么基于字符串更适合大家的使用呢?因为图标的使用有时候是动态的,比如:菜单上的图标大部分的时候是通过后台配置的,按钮上面的图标可能会因为使用者的不同而显示不同的图标,所以我们原创 2022-03-27 22:42:13 · 10053 阅读 · 6 评论 -
Vue3 Element Plus 应用开发实战
Vue3 Element Plus 应用开发实战11.安装 Element Plusnpm install element-plus --save2.自动导入npm install -D unplugin-vue-components unplugin-auto-import配置 vue.config.js:const AutoImport = require('unplugin-auto-import/webpack')const Components = require(原创 2022-03-26 21:43:59 · 2069 阅读 · 0 评论 -
vue-devtools的安装
vue-devtools的安装vue-devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。前端开发工程师应该比较熟悉这款工具,可以边侧边栏窗格中的页面,边检查代码。由于vue是数据驱动的,所以就会存在在开发调试中查看DOM结构并不能看到我们想看到的内容,那么借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试。本文重点介绍vue-devtools安装方法,提供chrome插件直接安装方法。接下来原创 2022-03-25 22:36:37 · 9666 阅读 · 3 评论 -
Vite-Vue3构建工具
Vite-Vue3构建工具Vite是Vue3.0新增的构建工具,目前仅支持Vue3.0。1.创建项目npm init vite-app myvitedemocd myvitedemonpm installnpm run dev执行过程如下:D:\>npm init vite-app myvitedemoNeed to install the following packages: create-vite-appOk to proceed? (y)npm WARN原创 2022-03-24 22:09:15 · 1368 阅读 · 0 评论 -
Vue3多页面开发
Vue3多页面开发在Vue3中,多页面开发的配置比较简单,下面来看一下具体的操作步骤:1.使用vue创建单页面应用程序见《Vue3脚手架指南》文章2.在项目的根目录下创建vue.config.js文件,如果已经创建则忽略3.在src目录下新建module文件夹,用于存放多页面相关文件module文件夹下用来存放页面文件,一个页面需要有最少三个文件构成,.html、.js、.vue,所以要创建一个最终的页面,我们需要创建三个文件,在实际开发中,最好根据自己的习惯或者公司的.原创 2022-03-23 22:05:09 · 10354 阅读 · 3 评论 -
Vue3脚手架指南
Vue3脚手架指南在DOS命令行窗口下操作使用Vue3,必须安装node.js,执行如下命令,检查node环境:>node -vv16.14.01.安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org2.安装脚手架Vue的脚手架名称由vue-cli改成了@vue/cli,如果以及全局安装了旧版本的vue-cli(1.x或2.x),最好先卸载:>npm uninstall v原创 2022-03-22 22:10:37 · 10386 阅读 · 0 评论