岁岁岁平安的博客

本篇博客的主要学习内容：按照Vue官网提供方法完成快速上手的Vue3工程的搭建和启动。命令行检测Vue环境配置。2025最新Windows系统卸载旧Node.js版本以及安装更稳定更高的Node.js版本的详细教程（包括配置环境变量）。npm淘宝镜像配置...

本篇博客的内容：使用2024版本IDEA打开、启动与快速手动搭建Vue3工程的极简脚手架(2025超详细教程)——实现Vue3初始工程的项目"瘦身"。以及使用Windows系统命令行快速打开并启动已搭建好的Vue3工程...

本篇博客核心内容：学习和讲解了Vue3.3新特性——defineModel宏函数的使用。其中包括defineModel诞生背景、使用原因进行分析（用于简化父子组件间的数据双向绑定v-model）并通过两个案例进行使用效果的对比、分析...

本篇博客的核心内容：学习和讲解了Vue3组合式API——插槽(v-slot/#)。其中关于插槽slot的介绍、核心概念以及常用插槽类型的介绍与使用。包括匿名插槽、具名插槽的使用、作用域插槽与动态插槽的介绍和使用,,,

本篇博客的核心内容：学习和详细的讲解了Vue3.3的新特性——defineOptions宏的诞生背景以及使用介绍。通过对比<script setup>语法糖出现与之前setup(){...}选项式定义属性方式来介绍defineOptions宏使用场景及使用方式...

本篇博客核心内容：学习和讲解了Vue3组合式API——provide和inject。该特性用于跨多层级的数据传递或实现跨多层级的通信。其中通过跨层级传递普通数据、响应式数据，以及传递函数来依次演示如何正确使用provide和inject函数.......

本篇博客核心内容：学习和讲解了Vue3组合式API——ref模版引用与defineExpose编译宏函数的使用时机。其中案例演示通过使用ref模版引用获取DOM对象和组件实例，获取组件实例需使用defineExpose编译宏函数显示暴露其内部属性和函数...

本篇博客的核心内容：详细的学习和讲解了Vue3组合式API——父、子间组件通信。通过基本思想、核心注意点与步骤、综合案例依次演示父传子自定义属性(defineProps)，子传父自定义事件(defineEmits)的详细操作...

本篇博客核心内容：详细的学习和讲解了Vue3组合式API——各阶段的生命周期函数基础。其中以Vue3组合式的 onMounted 生命周期函数的使用进行简单的演示和讨论...

本篇博客核心内容：详细的学习和讲解了Vue3组合式API中的reactive()函数和ref()函数。包括reactive与ref函数的基本介绍与核心使用步骤、ref函数的本质与底层、reactive与ref函数对比与小结...

本篇博客的主要内容：详细的学习和讲解了Vue3组合式API中的Watch侦听器。（包括watch侦听单个或多个数据、immediate与deep参数的使用、精确侦听对象的某个属性等...）

本篇博客内容：详细讨论与讲解了如何使用前端技术JSP或Vue3实现Ajax的跨域请求后端SpringBoot服务器。涉及方法：JSONP、注解@CorssMapping。配置类实现WebMvcConfigurer接口或实现配置类返回CorsFilter跨资源共享拦截器对象(注解@Configuration、@Bean)...

本篇博客内容：使用Vue3快速开发登录注册页面。前端Vue页面与后端SpringBoot服务器进行对接。其中涉及前端表单项校验规则设定与绑定、“二次确认密码”自定义校验规则(element-plus)、后端自定义异常类、后端封装返回前端数据结果类、全局异常处理器、配置前后端跨域请求、Hutool工具类的使用。最后成功完成员工的登录、注册功能,,,

本篇博客的内容：使用SpringBoot3+Vue3实现基本增删改查。包括前后端通信交互的实现。解决和配置后端跨域请求。实现SpringBoot3后端服务器与Vue3前端页面可视交互的分页查询、条件查询、新增、编辑(修改)、数据单个删除与数据批量删除等等...

博客核心：从0快速搭建、启动SpringBoot3工程。包括SpringBoot3"精简"脚手架详细搭教程。JDK21、Maven下载安装配置。application.yml配置端口、数据库信息。新建测试接口与自定义封装结果集类。自定义全局异常处理器、自定义异常与全局异常捕获配置...

本篇博客的内容：2025最新教程使用Vue3快速搭建后台管理系统(整体设计与实现)。主要包括网页的父、子级路由嵌套渲染页面、网页头部的标题、logo、头像、用户名的设计与实现、网页侧边导航栏的设计与实现(菜单项路由跳转、菜单项选择时高亮显示)。详细讲解网页主体数据展示区域的设计与实现(数据表格、按钮项、表单等等)...

本篇博客的内容：实现Vue3集成Vue-Router(路由)。详细讲到了嵌套路由(父、子级路由配置)的使用(<RouterView/>)、路由守卫(导航守卫:路由跳转修改网页标题)(beforeEach())、404NotFound页面的设计与路由跳转配置(详细操作)...还有内容在《Vue3集成Vue-Route》(上)...

本篇博客的内容：实现Vue3集成Vue-Router(路由)。详细讲到了<RouterLink>(路由跳转)、push('/xxx')与replace('/xxx')的编程式路由跳转、如何设置默认页面路由？最后详细的演示操作路由跳转的单个参数与多个参数传递的方式与获取传的参数。更多的《Vue3集成Vue-Router》内容将在下篇博客...

本篇博客的主要内容：实现Vue3集成Element-Plus。Element-Plus常用组件的使用(下篇)，涉及标签：<el-carousel>(走马灯/轮播图)、<el-date-picker>(日期选择器)、DateTimePicker(日期时间选择控制器)、<el-time-picker>(时间选择器)、<el-table>(表格)、<el-pagination>(分页)、scope(插槽/操作栏)、<el-dialog>(对话框/弹窗)的详细使用方法与操作演示、页面渲染效果...

本篇博客的主要内容：实现Vue3集成Element-Plus。Element-Plus常用组件的使用（上篇）：涉及标签：<el-input>(input输入框)、<el-select>(select下拉框)、<el-radio-group>(单选框)、<el-checkbox-group>(Checkbox多选框)、<el-image>(图片)的详细讲解与如何使用...

本篇博客的内容：完成Vue3集成Element-Plus的初步学习。包括常用的element-plus、sass组件依赖、插件的安装、导入。element-plus组件库的按钮、图标的几种常见使用方式和场景。element-plus进阶操作：自定义主题的详细实现...

本篇博客的内容：完整学习、实操Vue3中常用基础语法(超详细)。包括"{{}}"绑定数据、定义数据的两种方式(rfef函数、reactive函数)、v-model、v-if、v-else-if、v-else、v-for、v-on:、v-bind、onMounted()函数的使用...

再去配置一个路径（根路径），也就是如果访问的是一个"/"的话，就让它自动访问一个默认的页面（2个之中）。用到一个属性："redirect(重定向)"，也就是当我们访问"/"时，让它再访问"/dept"这个路径就行了，也就是把路由请求交给dept进行处理。接一下就要用到另外一个标签动态的展示各自的组件，只需要再App.vue组件文件中添加即可。（当我点击员工管理——>展示其对应的组件、点击部门管理——>展示其对应的组件）（0）自己手写了一个新的组件文件(部门管理)（DeptView.vue）

本篇博客的主要内容是介绍如何局部使用Vue（模块化的构建Vue项目）。其中就是简单、快速的创建一个Vue项目。

本篇博客简单介绍了Vue、以及大致需要学习的地方。

具体来说，当这个HTML模板被渲染到浏览器上时，{{message}} 会被替换为在相应框架或模板引擎中定义的message变量的值。（3）在HTML模板中，<h1>{{message}}</h1> 这行代码表示的是一个动态内容的标题。其中Vue的组件文件：以.vue结尾，每个组件由三个部分组成: <template> , <script>、<style>。9、vscode——>ctrl+shift+y——>呼出控制台——>打开终端。主要操作的是一些组件文件——>.vue结尾的文件。

5、如何更改前端vue项目的端口号？——>去vue.config.js里配置应一个对象。1、进入cmd命令行——> vue ui ——>等等操作。4、vue项目的启动。

"scope.row"拿到的是后台这一行的数据，加上"scope.row.gender"，得到指定性别的字段，再配合三元运算符进行判断。如果1——>男，2——>女。在Vue.js中，钩子方法（也称为生命周期钩子或生命周期事件）是Vue实例在创建、更新、销毁等关键时刻自动调用的函数。1、这次学习的是上次还未完成好的恶element案例，对列表数据的异步加载，并渲染展示。这里就不用三元运算符，用img标签，然后src动态给地址，记住动态动态？只要vue对象一创建、挂载完成，然后自动发送请求，加载数据。

value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)

一旦通过v-model绑定一个数据模型时，这个数据模型必须声明出来，就要去data(){}中写。8、最后测试提交表单数据，查看提交的表单数据——>再提交到服务端就可以了。7、提交按钮时会触发一个方法——>onSubmit()，这时就要去声明。9、 如何采集到form表单中每一个表单项的数据内容——>只需要通过""来进行数据绑定，将各个表单项的数据绑定到一个对象当中就可以了。如何将js对象——>变成"json格式"的字符串？为了能够显示出提交的对象中的每一个属性?2、这里选择学习——>5、这里选择学习——>

（5）":data"表示绑定一个数据模型：是数组tableData，其中数组当中是一个一个的js当中的对象。（2）注意在组件文件中标签<template>中时注意，里面只能有一个根标签。（4）在组件官网一直往下翻可以找到各个里面用到的属性和其中的一些方法。（1）去element官网查看寻找想要的，然后复制+修改就行了。（6）"prop"表示要展示的是哪种类型对应的数据。（4）介绍分页组件的事件（events）（1）我选择有背景色的分页做学习和练习。（6）"lable"表示表头的属性。

8、通常在views目录下单独再创建一个目录——"element"，用来存放element的一些组件。11、通常都是默认展示根组件文件App.vue里的内容，如何展示自己创建的组件文件的内容？（4）最后的基本结构已经完成，然后接着去element官网复制组件代码，然后调整就可以了。7、App.vue是我们的根组件，定义其它的组件页面通通放在views目录下。（2）<script>（定义vue当中的数据模型和方法）（3）<style>（定义css当中的代码）（2）在入口文件（main.js）中引入。