系列文章目录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
本篇文章将封装一个优雅的项目级通用弹出框。该弹出框实现重用的同时，将内容与表现分离，让使用者可以专注于绘制弹框内容，而不用在意弹框的具体实现。文章阅读预计15分钟。成果预览：一 父组件准备我们创建文件modelTest.
vue，将其引入父组件并注册。// 父组件
<template>
<div class="home">
<button @cl
转载
2024-09-30 06:38:57
819阅读
今天我们继续使用 Vue 的撸我们的实战项目，只有在实战中我们才会领悟更多，光纸上谈兵然并卵，继上篇我们的《Vue一个案例引发的动态组件与全局事件绑定总结》 之后，今天来聊一聊我们如何在项目中使用递归组件。信息的分类展示列表这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类，如下如所示：看到这个很多人会想到这个实现起来很简单啊，来个嵌套循环不就完事了。对，你说的没错，事实就是这样简单。那
一、认识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组件都用"\
renderrender是组件的一个选项, 他的返回值会被作为组件的DOM结构. ```html```试试插入html: ```html```可以看到html标签被当做字符串渲染了,* 并没有生成h2标签. 如何正确插入h2标签呢?*VNode如果想插入DOM就要用到"VNode", VNode是vue对页面DOM节点的描述, 其是一个Object类型.h结构
转载
2024-05-17 15:20:14
467阅读
在这篇文章中，我将向你介绍如何使用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阅读
一、概述Vue 的生命周期可以分为 8 个生命周期的执行点，从 new 创建 Vue 对象到对象的销毁，其中 4 个基本的，4 个特殊的，在下图中，红色标注的就是 8 个生命周期的执行点，前四个为基本的，后四个为特殊的四个基本执行点(数据加载)：beforeCreadted：实例组件刚创建，元素DOM和数据都还没有初始化，loading事件created：数据data已经初始化完成，方法也已经可以
一、前言要学习
vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用<a></a>标签编写链接哪？
vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题
vue-router二、
vue-router是什么这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，
vue-ro
由于工作的原因，现在需要实现一个滚动加载(PC端)的效果，之前使用的是vue+element，但是element没有类似的组件，所以去github上找了一个名叫vue-mugen-scroll，使用起来很简单也很方便，所以给大家分享一下如果使用。一、准备工作首先需要安装一下组件： npm install --save vue-mugen-scroll不需要全局引用，在需要的地方引用即可：
效果: 分页的本质: 分批次的查询数据(基于页码page与每页的条数pagesize),后端接收到分页参数后,会基于这些参数查询数据库,然后基于数据库进行分页;基于sql语句(select * from user limit n,m);分页组件需要实现
vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传
这个例子还是比较简单的，独立完成后，能大概知道vue是干嘛的，可以写个todoList的小例子。开始写例子之前，先对环境的部署做点简单的介绍，其实和Vue官方的差不多。#如若没有安装过vue-cli,先全局安装一下vue-cli
$ cnpm i -g vue-cli
#到自己喜欢的目录下创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
#
#
转载
2024-06-07 18:11:05
69阅读
本篇记录vue3 使用pinia修改state的三种方法1. 新建vue3项目，安装Pinia，不再详细描述。。。2.目录app.jsimport {defineStore} from "pinia"
const appStore = defineStore('appStore', {
state: () => ({
baseUrl: 'https://www.ba
转载
2024-06-05 10:06:25
0阅读
MENU前言效果图HtmlStyle 前言代码段定义一个名为Magic Card的卡片，并通过一系列CSS属性和动画效果来美化和增强该卡片的视觉效果。效果图Html<div class="card">
Magic Card
</div>Style代码@property --rotate {
syntax: "<angle>";
init
