今天我们继续使用 Vue 的撸我们的实战项目，只有在实战中我们才会领悟更多，光纸上谈兵然并卵，继上篇我们的《Vue一个案例引发的动态组件与全局事件绑定总结》 之后，今天来聊一聊我们如何在项目中使用递归组件。信息的分类展示列表这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类，如下如所示：看到这个很多人会想到这个实现起来很简单啊，来个嵌套循环不就完事了。对，你说的没错，事实就是这样简单。那
vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传
系列文章目录vue3构建view admin后台管理系统（1）——技术选型 vue3构建view admin后台管理系统（2）——Vue Router使用详解 vue3构建view admin后台管理系统（3）——基于Vue Router实现导航栏 文章目录系列文章目录前言一、嵌套路由二、使用步骤1.梳理文件关系2.了解布局组件Layout .vue3.了解导航组件SideMenu4. 实现跳转总
页面锁屏功能听起来很高大，其实没Y用，摸鱼混时间倒是挺不错的。。。创建一个 lockScreen.vue 页面 设置 router 一级路由 项目有角色权限的注意了 路由不要设置错了当用户进入 lockScreen.vue 页面 把锁屏密码存起来 存在VueX 里面 因为也main刷新 Vuex 数据也会丢失 我们要在window.sessionStorage.setitem("S
相信大家对于下面的列表形式应该不陌生吧，至少我个人在后台OA系统的时候就用到了，那么我来聊下这样形式的列表，应该怎么封装成为一个公共的组件。（代码参考了iview用于个人学习之用）一.列表组件参数设置 每一个公共组件都应该约定好参数，定义好回调函数所传递参数。不应该与业务组件和业务逻辑相互耦合。 这个组件的约定参数和使用方法如下：<Collapse v-model="value1" @on-
转载
2024-03-02 09:54:50
771阅读
表格使用的avue<template>
<basic-container>
<avue-crud
ref="crud"
v-model="form"
:page="page"
:data="tableData"
:table-loading="tableLoading"
:option
避免不了使用table,当然table单纯只是展示list数据,项目中遇到需要在table的row中在嵌套一个表格,由于接口做了拆分功能块比较独立,需要先获取list,当点击相应row展开折叠框的时候在获取row对应的下级数据,row还提供编辑功能,修改完之后再次获取list列表。如果同时展开两个折叠框会对table里面嵌套type="expand"的el-table-column里面数据有影响,
转载
2024-05-21 20:45:49
1322阅读
本篇文章将封装一个优雅的项目级通用弹出框。该弹出框实现重用的同时，将内容与表现分离，让使用者可以专注于绘制弹框内容，而不用在意弹框的具体实现。文章阅读预计15分钟。成果预览：一 父组件准备我们创建文件modelTest.
vue，将其引入父组件并注册。// 父组件
<template>
<div class="home">
<button @cl
转载
2024-09-30 06:38:57
819阅读
一、认识vue-router目前前端流行的三大框架, 都有自己的路由实现: pAngular的ngRouter React的ReactRouter Vue的vue-router Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得非常容易。 目前Vue路由最新的版本是4.x版本，我们上课会基于最新的版本讲解。 vue-route
插槽分三种：普通插槽、具名插槽、作用域插槽普通插槽普通插槽的使用主要通过<slot></slot>标签使用。代码如下：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插槽的使用</title>
<script s
vue+ElementUI 表单嵌套表格逐行校验（新增、编辑）的完美解决方案一、成果二、要点和解决思路三、源码一、成果在线地址gitHub地址如果帮到你，请点个赞^_^如图，ElementUI表单里嵌套了表格，表格内每行能进行新增、编辑、删除等操作，同时能针对该行的字段进行校验（而不是整个表单校验！），这种需求应该很常见，但是搜了很多资料，没有完美的解决方案，大部分都只是针对整个表单进行校验，而不
转载
2024-02-05 10:18:57
744阅读
问题讲解：在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题，可以说饿了么团队在这个UI框架的文档撰写已经非常不错了，不过还是有一些方法乍一看让人摸不着头脑，有些table的常用功能示例代码提供的不是非常详细，所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。 先展示一下ElementUI官方提供的示例代码效果图可以看到官方代码中在这边没有让这个可展开tab
转载
2024-04-19 16:26:44
425阅读
MUIMUI概述：MUI是一款APP的前端框架 进入官网可以浏览更加全面的APIMUI官网特点： 追求性能体验，是启动MUI项目的首要目标，轻量必然是重要特征； MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K第一个MUI项目：打开HBuilder，右键新建项目选择APP，选择带有mui项目的模板就可以生成第一个mui项目 创建好后自动生成一些文件 打开首页后里面自动
一般情况下每个vue组件都用"\
renderrender是组件的一个选项, 他的返回值会被作为组件的DOM结构. ```html```试试插入html: ```html```可以看到html标签被当做字符串渲染了,* 并没有生成h2标签. 如何正确插入h2标签呢?*VNode如果想插入DOM就要用到"VNode", VNode是vue对页面DOM节点的描述, 其是一个Object类型.h结构
转载
2024-05-17 15:20:14
467阅读
通过Vue编写一个二级，并且是可以折叠的导航菜单 文章目录思路在main.js中 配置axios导入element样式Home.vue实现静态页面、样式及功能 思路在侧边栏区域只写了一个二级导航，通过axios获取到侧边栏的数据，通过v-fot循环渲染该数据，形成多个二级菜单 使用elemen-ui进行样式的设置在main.js中 配置axios导入axios包配置请求的根路径把axios包挂载到
转载
2024-03-25 07:57:35
1264阅读
在这篇文章中，我将向你介绍如何使用Vue 3和ElementUI来构建一个管理系统的后台管理界面。我们会逐步讲解整个过程，包括环境的搭建、项目的初始化、组件的使用等。下面是我为你准备的教程流程：
| 步骤 | 操作 |
|---------------------|--------------------
原创
2024-05-17 12:24:51
702阅读
文章目录前言模拟一个数据监测数据检测---对象数据检测---数组总结 前言问题描述：在进行Vue对象的属性内容更新时，可能会发现更新后的数据没有及时渲染到页面中，实际属性中的内容显示正常。问题根源：为了便于对数据进行监测，Vue在解析数据的时候会为检测到的每一个数据生成一对get,set方法，当用户数据改变的时候，会触发数据的set方法，首先进行数据的修改，然后触发重新解析模板，由下图可以看出数
一、创建项目 1、使用vite创建名为my-vue的项目：npm init vite-app my-vue 2、进入到my-vue文件夹下：cd my-vue 3、安装依赖包：npm install 4、运行该项目：npm run dev 二、引入element-plus 1、element-plus地址：https://element-plus.org/zh-CN/component/butto
scoped css官方文档scoped css可以直接在能跑起来的vue项目中使用。使用方法：<style scoped>
h1 {
color: #f00;
}
</style>使用scoped划分本地样式的结果编译结果如下：h1[data-v-4c3b6c1c] {
color: #f00;
}即在元素中添加了一个唯一属性用来区分。缺点一、如果用户在别处定
首先，在你的Vue2.x项目里安装@vue/composition-api插件，就可以使用 Vue3 中的 Composition ApI 了。这里不在对Vue Composition API做详细介绍，可直接参考官方文档, 本文用到的API有 setup, ref, onMounted, onBeforeUnmountIntersectionObserver API
Inte
转载
2024-10-15 00:24:29
362阅读
