十五分钟两百行代码，手写一个vue项目全局通用的弹框
前言：我们在写vue项目时，弹框是非常常用的组件，并且在同一个项目中，弹框大多类似。所以我们可以抽离封装出一个通用的弹框；因为vue3可向下兼容，所以作者这边会使用vue2的写法，vue3写法大同小异。第一步：新建相关文件一般来说是在src/components/dialog下新建如下两个文件：index.vue：该文件是组件内容相关的，用来书写弹框组件的结构、样式、和动态逻辑；in
前端开发
列表
Vue状态管理库Pinia详解
Pinia 是 Vue 的状态管理库，它提供了一种更简单、更不规范的 API 来管理应用的状态。Pinia 的设计哲学是简单性和易用性，它避免了 Vuex 中的许多复杂概念，如 mutations 和模块的嵌套结构，提供了一种更现代、更符合 Vue 3 Composition API 风格的状态管理方式。先来瞅一眼 Pinia 的核心组件主要包括以下几个方面：Store：Pinia 中的
Vue Hook 封装通用型表格
一、创建通用型表格的需求实现一个通用型表格组件，具备以下功能：动态列配置。分页功能。排序功能。可扩展的行操作功能。二、设计通用型表格组件首先，需要设计一个基础的表格组件，它接受列配置、数据和分页信息等参数。1. 创建useTableHook在src/hooks目录下创建useTable.js文件：&n
Webpack 代码分割和懒加载技术
在现代前端开发中，优化应用性能是一个至关重要的任务。Webpack 作为一个强大的打包工具，为我们提供了代码分割和懒加载的功能，可以显著提升应用的加载速度和用户体验。本文将深入解析 Webpack 的代码分割和懒加载技术，帮助开发者更好地理解和应用这些技术。什么是代码分割？代码分割（Code Splitting）是一种将代码拆分成多个小包的技术，以便按需加载。这样可以避免一次性加载所有代码，从
如何使用vue3+vant创建底部菜单组件
在前端项目开发中，会出现底部导航菜单通用的情况，我们就需要把底部菜单导航做成公用组件，一下是一个方法，供大家参考和使用。一、效果展示：二、代码编写1、在components文件夹中创建底部菜单组件Footer.vue<template> <div class="footer"> <div class="item"> <router
Vue3 组件通信方式详解
前言毫无疑问，组件通信是Vue中非常重要的技术之一，它的出现能够使我们非常方便的在不同组件之间进行数据的传递，以达到数据交互的效果。所以，学习组件通信技术是非常有必要的，本文将总结Vue中关于组件通信的八种方式，帮助大家在使用Vue的过程中更加得心应手！如果文中有不对、疑惑的地方，欢迎在评论区留言指正！！一、什么是组件通信在开始之前我们需要明白什么是组件通信，组件通信可以拆分为两个部分：
Vue3 中的 v-bind 指令：你不知道的那些工作原理
前言v-bind指令想必大家都不陌生，并且都知道他支持各种写法，比如<div v-bind:title="title">、<div :title="title">、<div :title>(vue3.4中引入的新的写法)。这三种写法的作用都是一样的，将title变量绑定到div标签的title属性上。本文将通过debug源码的方式带你搞清楚，v-bind指令是
JavaScript 的延迟加载及异步 Async 和 Defer
一直以来写代码的时候的常用习惯就是吧所有的 js 文件直接加载在文档的 head 标签里面，在写 js 文件的时候有时候获取一些文件对象的时候为空对象，这是由于文档结构还没有加载完，但是 js 文件已经加载完。也就是说虽然写了 js 语句来获取对象，但是由于 dom 结构还没有加载完成，因此获取到的是空对象，进一步测试发现在 firebug 的控制台下把赋值语句执行之后可以获得对象，同理是因为在
TS 之 interface 与 type 区别
相同之处都可以描述一个对象或者函数interfaceinterface User { name: string age: number}interface SetUser { (name: string, age: number): void;}typetype User = { name: string age: number};type SetUse
从上往下垂直时间轴CSS样式代码
今天这篇文章，我跟大家分享一个时间轴的案例，可以用于学习也可以直接在项目里进行使用，从上往下垂直时间轴CSS样式代码。效果如下图：案例代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="vi