文章 2023-07-26 来自:开发者社区

vue3 + TS + elementplus + pinia实现后台管理系统左侧菜单联动实现 tab根据路由切换联动内容

效果图: home.vue页面代码<template> <el-container> <el-aside width="collapse ? 200px : 70px"> <el-button color="#626aef" @click="co...

vue3 + TS + elementplus + pinia实现后台管理系统左侧菜单联动实现 tab根据路由切换联动内容
文章 2022-10-18 来自:开发者社区

基于element-plus实现vue3+ts后台管理系统的组件封装(只需传入配置对象,就可以渲染出一个页面(表单+表格))

对el-form组件的二次封装我们知道el-form-item组件需要传入一个基础的属性。label: 表示表单每一项的标题。rules: 表单验证配置prop: 提供了rules,就需要配置该属性,他的值是每项绑定的v-model的属性名。style: 表单样式控制 下面我们写出每项表单的类型约束。type IFormType = 'input...

基于element-plus实现vue3+ts后台管理系统的组件封装(只需传入配置对象,就可以渲染出一个页面(表单+表格))

Spring Boot+Vue.js+FastDFS实现分布式图片服务器

16 课时 |
318 人已学 |
免费

Vue.js 入门与实战

86 课时 |
19798 人已学 |
免费

Vue.js完全自学手册图文教程

13 课时 |
6729 人已学 |
免费
开发者课程背景图
文章 2022-06-28 来自:开发者社区

Vue3+TS系统学习九 - Vue3实现过渡动画

一. 基本过渡动画1.1. 认识过渡动画在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验:React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动画我们需要使用一个第三方库 react-transition-group;Vue中为我们提供一些内置组件和对应的API来完成动画...

Vue3+TS系统学习九 - Vue3实现过渡动画
文章 2022-06-28 来自:开发者社区

Vue3+TS系统学习八 - 组件化知识补充(下)

三. 模块引用3.1. $refs某些情况下,我们在组件中想要直接获取到元素对象或者子组件实例:在Vue开发中我们是不推荐进行DOM操作的;这个时候,我们可以给元素或者组件绑定一个ref的attribute属性;组件实例有一个$refs属性:它一个对象Object,持有注册过 ref attribu...

Vue3+TS系统学习八 - 组件化知识补充(下)
文章 2022-06-28 来自:开发者社区

Vue3+TS系统学习八 - 组件化知识补充(上)

一. 动态组件比如我们现在想要实现了一个功能:点击一个tab-bar,切换不同的组件显示;  案例截图这个案例我们可以通过两种不同的实现思路来实现ÿ...

Vue3+TS系统学习八 - 组件化知识补充(上)
文章 2022-06-28 来自:开发者社区

Vue3+TS系统学习七 - 组件的插槽使用

一. 插槽的使用1.1. 认识插槽slot在开发中,我们会经常封装一个个可复用的组件:前面我们会通过props传递给组件一些数据,让组件来进行展示;但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div、span等等这些元素;比如某种情况下我们使用组件希望组件显示的是一个按钮,...

Vue3+TS系统学习七 - 组件的插槽使用
文章 2022-06-28 来自:开发者社区

Vue3+TS系统学习六 - 组件化之间通信

一. 认识组件的嵌套1.1. App单独开发前面我们是将所有的逻辑放到一个App.vue中:在之前的案例中,我们只是创建了一个组件App;如果我们一个应用程序将所有的逻辑都放在一个组件中,那么这个组件就会变成非常的臃肿和难以维护;所以组件化的核心思想应该是对组件进行拆分,拆分成一个个小的组件;再将这...

Vue3+TS系统学习六 - 组件化之间通信
文章 2022-06-28 来自:开发者社区

Vue3+TS系统学习五 - 组件化开发基础

一. 认识组件化1.1. 什么是组件化?人面对复杂问题的处理方式:任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。但是,我们人有一种天生的能力,就是将问题进行拆解。如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在...

Vue3+TS系统学习五 - 组件化开发基础
文章 2022-06-28 来自:开发者社区

Vue3+TS系统学习四 - Vue3开发基础语法(二)

一. Options API1.1. computed1.1.1. 认识计算属性computed我们知道,在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示;比如我们需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示&#x...

Vue3+TS系统学习四 - Vue3开发基础语法(二)
文章 2022-06-28 来自:开发者社区

Vue3+TS系统学习三 - Vue3开发基础语法(一)

一. 知识补充1.1. methods中的this1.1.1. 不能使用箭头函数我们在methods中要使用data返回对象中的数据,那么这个this是必须有值的,并且应该可以通过this获取到data返回对象中的数据。那么我们这个this能不能是window呢?不可以是window,因为window中我们无法获取到data返回对象中的数据...

Vue3+TS系统学习三 - Vue3开发基础语法(一)

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注