vue源码 周期 生命
08-Vue实例的生命周期函数
title: 08-Vue实例的生命周期函数 publish: true 介绍 vue实例的生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。 生命周期钩子：就是生命周期事件的别名而已。 生命周期钩子 = 生命周期函数 = 生命周期事件。 生命周期函数 ......
10-Vue动画
title: 10-Vue动画 publish: true 前言 动画的作用：提高用户的体验，帮助用户更好的理解页面中的功能。 使用过渡类名实现动画 官方文档的截图 过渡类名如下： 动画进入： v-enter：动画进入之前的初始状态 v-enter-to：动画进入之后的结束状态 v-enter-ac ......
04-Vue的系统指令(二)
title: 03-v-on的事件修饰符 publish: true 前言 本文主要内容： v-model v-for v-if v-show v-model：双向数据绑定 重点：双向数据绑定，只能用于表单元素，或者用于自定义组件。 之前的文章里，我们通过v-bind，给<input>标签绑定了da ......
05-Vue的举例：列表功能
title: 05-Vue的举例：列表功能 publish: true 列表功能举例 步骤 1：列表功能 完整的代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" con ......
09-Vue中的Ajax请求
title: 09-Vue中的Ajax请求 publish: true vue-resource的介绍 vue-resource是Vue高度集成的第三方包。 官网链接： 文档（http相关）：https://github.com/pagekit/vue-resource/blob/master/do ......
11-Vue组件的定义和注册
title: 11-Vue组件的定义和注册 publish: true 前言 什么是组件 组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。 模块化和组件化的区别 模块化：是从代码逻辑的角度进行划 ......
12-Vue组件之间的传值
title: 12-Vue组件之间的传值 publish: true 父组件向子组件传值 我们可以这样理解：Vue实例就是一个父组件，而我们自定义的组件（包括全局组件、私有组件）就是子组件。 【重点】需要注意的是，子组件不能直接使用父组件中的数据。父组件可以通过props属性向子组件传值。 父组件向 ......
01-Vue的介绍和vue-cli
title: 01-Vue的介绍和vue-cli publish: true MVVM模式 Model：负责数据存储 View：负责页面展示 View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示 关于框架 为什么要学习流行框架 1、企业为了提高开发效率：在企业中 ......
02-Vue的系统指令
title: 02-Vue的系统指令 publish: true 本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。 以下是正文。 本文主要内容 插值表达式 {{}} v-cloak v-text v-html v-bind v-on 举 ......
【Visual Leak Detector】源码下载
说明 使用 VLD 内存泄漏检测工具辅助开发时整理的学习笔记。本篇介绍 VLD 源码的下载。同系列文章目录可见 《内存泄漏检测工具》目录 1. 下载途径 以 v2.5.1 版本为例，可以到 Github-KindDragon-vld 页面下载 master 的 zip 源码包，如下所示： 也可以到 ......
vue中的ref 和 reactive--今天学了啥 23/3/12
这两者都是默认deep reactive，不同的是reactive使用es6的proxy，只能使对象reactive。ref不仅支持对象还支持基本数组，不能说ref是reactive的超集，因为这两者返回的类型就不一样。 Ref type: function ref<T>(value: T): Re ......
关于vue3中Scope slot实战中使用
今天学了啥-23/03/28 vue提供slot机制让组件可以接收模板片段，来渲染模板片段。比如最常见的button组件，基本是如下这样使用。 <FancyButton> Click me! <!-- 插槽内容 --> </FancyButton> FancyButton 组件则是这样： <butt ......
【vue】记录收缩展开的动画效果
前言 项目里有时候使用到类似于收缩展开的功能，不设置动画会显得过程很生硬，记录下项目里有使用过的收缩展开的动画实现方式。 方式一：element UI 的折叠动画 如果项目使用到 element UI 可以引入如下组件，实现动画效果： 1、引入组件 import 'element-ui/lib/th ......
vue全家桶进阶之路46：Vue3 Axios拦截器和globalProperties全局设置
在Vue.js 3中，使用Axios与Vue.js 2.x中类似，但是需要进行一些修改和更新，下面是Vue.js 3中Axios的定义和使用方式： 首先，你需要安装Axios和Vue.js 3.x，可以使用npm或yarn等包管理工具安装： npm install axios vue@next 然后 ......
vue2源码-十、diff算法
diff算法 diff算法的特点就是平级比较，内部采用了双指针方式进行优化，优化了常见的操作。采用了递归比较的方式。 针对一个节点的diff算法 先拿出根节点来进行比较如果是同一个节点则比较属性，如果不是同一个节点则直接换成最新的即可。 同一个节点比较属性后，复用老节点 比较儿子 一方有儿子 一方没 ......
Vue3 日历组件的实现
Vue3 日历组件的实现 以下是一个基于 Vue 3 实现的简单日历组件的代码示例。这个日历组件包含了前一个月、当前月、下一个月的日期，并且可以支持选择日期、切换月份等功能。 <template> <div class="calendar"> <div class="header"> <button ......
Spring源码系列：核心概念解析
Spring框架中有许多关键组件,理解这些组件的作用和关系可以帮助我们更好地阅读和理解Spring源码。BeanDefinition是Spring中重要的概念,定义了一个Bean的基本属性和行为,是Spring容器管理Bean的基础。我们可以通过注解或编程方式定义BeanDefinition,然后将... ......
Vue+el-table实现行内新增、编辑、取消、删除
table代码： 1 <el-table 2 border 3 :data="tableData" 4 > 5 <el-table-column prop="name" label="Name" align="center"> 6 <template slot-scope="scope"> 7 <e ......
Vue3 watch 监听对象数组中对象的特定属性
Vue3 watch 监听对象数组中对象的特定属性 在 Vue 3 中，可以使用 watch 函数来监听对象数组中对象的特定属性。可以通过在回调函数中遍历数组来检查对象的特定属性是否发生变化，并在变化发生时执行相应的操作。 一、监听对象的特定属性 例如，假设有一个名为 items 的对象数组，其中每 ......
Vue3，使用 JS 调用弹窗组件，并实现关闭弹窗组件时销毁组件
需要对一个弹窗组件进行改造，使其能用 JS 调用，并实现关闭弹窗组件时销毁组件 原始弹窗组件 Popup.vue <template> <van-overlay :show="visible" > <div class="overlay-wrapper"> <div class="container ......
四、组件的生命周期
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from "vue" 1、onBeforeMount创建 onBeforeMount(()=>{ // 创建之前 } ......
CentOS7 云服务器搭建及部署SpringBoot+vue项目
CentOS7 云服务器搭建及部署SpringBoot+vue项目 1）云服务器配置以及环境搭建 1.1 JDK安装 卸载现有环境（有则卸载） 使用rpm命令查询相关java套件 rpm -qa | grep java 如果存在，通过命令删除对应版本的JDK rpm -e --nodeps java ......
Module not found: Error: Can't resolve 'axios' in 'D:\BaiduSyncdisk\vue-cli-project\dc_vue3\src\utils'
Module not found: Error: Can't resolve 'axios' in 'D:\BaiduSyncdisk\vue-cli-project\dc_vue3\src\utils' 因：没有安装axios插件 在运行项目的地方npm install --save axios ......
IDEA编译Spring源码教程
大家在学习spring时源码总是绕不开的，今天我分享一下我的spring源码编译过程，详细讲解了常见问题的解决办法。 此过程中要用到的工具及版本： 1.JDK11 2.Spring-framework 5.3.27 3.Gradle7.5.1 4.IDEA 2021.3 文章目录： 1.下载spri ......
vue路由切换时终止异步请求【转载】
项目场景：bug描述：在一个vue页面中，有异步数据请求的方法正在执行，此时切换到其他vue页面后，该异步请求不会停止。之前写项目时，没有注意到vue路由切换后，还没执行完毕的异步请求并没有随着页面的切换而结束。用户在当前访问页面中，异步请求的数据还没抓取完跳转到其他页面时，这个异步请求并不会终止， ......
优雅封装vue中的 iframe组件（可修改iframe内部样式）
公共组件 <template> <div class="wrapper-c"> <iframe id="fram_box" @load="loadFrame" :src="url"> </iframe> </div> </template> <script> export default { nam ......
视频直播源码，Android TextView设置跑马灯效果
视频直播源码，Android TextView设置跑马灯效果 1、先在xml中给Textview设置好对应的属性 <TextView android:id="@+id/tv" android:layout_width="200dp" android:layout_height="wrap_conte ......
直播软件源码，自定义RecyclerView支持快速滚动
直播软件源码，自定义RecyclerView支持快速滚动 问题描述： RecyclerView自带快速滚动无法控制滚动条的长度唯一，也就是说随着item的增多，滚动条的长度会越变越小。 解决问题： 通过自定义RecyclerView来实现滚动条的长度不会因为item的增多而发生长度变化。 packa ......
Vue3+TS+Node打造个人博客（后端架构）
在使用 Express 搭建后端服务时，主要关注的几个点是： 路由中间件和控制器 SQL处理 响应返回体数据结构 错误码 Web安全 环境变量/配置 路由和控制器 路由基本上是按模块或功能去划分的。 首先是按模块去划分一级路由，各个模块的子功能相当于是用二级路由处理。 简单举个例子，/article ......