VueJS
关注
分享
扫一扫
绝世唐门三哥
改变世界的程序猿@三哥
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue 自定义指令完全指南（含 Vue2/Vue3 对比 + 完整 Demo）
Vue自定义指令使用指南 本文详细介绍了Vue2和Vue3中自定义指令的使用方法，包括核心概念、生命周期钩子对比和实战场景应用。主要内容包括： 指令生命周期钩子详解（Vue2和Vue3版本） 基础用法对比（v-focus自动聚焦指令） 复杂指令实现（v-blur-on-outside点击空白处失焦） 通用实战场景（权限控制v-permission、防抖v-debounce） Vue2与Vue3的核心差异总结 文章通过双版本代码示例，帮助开发者掌握在不同Vue版本中使用自定义指令封装DOM操作逻辑的技巧，并强原创 2025-12-11 16:08:45 · 333 阅读 · 0 评论 -
列表：vue3项目展示，首列固定其余列横向滑动效果
摘要：分享了一个InsCode小部件效果图，鼓励用户复制代码自用并点赞支持。内容简洁明了，强调代码可自由复制，同时表达了对用户支持的感谢。原创 2025-11-13 16:02:19 · 128 阅读 · 0 评论 -
Vue 3 ～ 3.5 版本useTemplateRef使用
注意，useTemplateRef版本要在 3.5 以后才可使用，版本低的 ref 替代问题也不大～原创 2025-05-20 16:42:43 · 1510 阅读 · 0 评论 -
Vue 3 响应式 Ref 全解析：从基础到高阶应用
本文系统性地介绍了Vue3中与ref相关的API，包括ref、shallowRef、customRef、toRef和toRefs等，通过对比分析帮助开发者深入理解其差异与适用场景。ref适用于大多数常规响应式需求，shallowRef则用于性能优化，特别是在处理大型对象或第三方库实例时。customRef提供了更精细的控制，适用于复杂逻辑和异步操作。toRef和toRefs则用于保持响应性链接，特别是在解构或传递属性时。文章还提供了性能优化技巧和常见问题解答，帮助开发者根据具体需求选择合适的ref类型。原创 2025-05-20 10:34:13 · 1925 阅读 · 0 评论 -
UI组件---使用elementPlus+vue3开发下拉搜索组件(copy即用)
输入名称或ID，出现下拉框根据输入内容进行模糊匹配下拉框展示匹配到的内容-个框里最多展示5条超过5条可以向下滑动查看全部匹配到的内容1. 前言根据elementPlus的组件库，暂时无满足该需求的所有要求！故此记录一下；方便自己和大家以后使用！觉得好用的话辛苦大家点个关注哦！一个 Vue 3 UI 框架 | Element PlusSelect 选择器 | Element Plus。原创 2025-02-18 14:35:01 · 475 阅读 · 0 评论 -
CSS---序号使用css设置，counter-reset、counter-increment、content配合实现备注文案的序号展示
其中注意如果是全数字的话，不会换行，需要自己修改使用哦！原创 2024-09-13 13:57:18 · 805 阅读 · 0 评论 -
Vue3---多种组件传值方式总结
在Vue 3项目中，Vuex是一个常用的状态管理库，它可以帮助你在多个组件之间共享状态。结合上述代码，您可以创建一个简单的Vue 3应用程序，其中包含一个用来发表消息的组件和另一个用来订阅消息的组件。状态会相应增加或减少，并且由于状态的响应式特性，所有使用了该状态的组件都会自动更新显示。如果需要，可以创建一个中间组件，但在这个示例中，我们将直接从父组件跳转到孙子组件。最重要的一点，想要ref传值赋值，一定要用方法的方式去调用，直接赋值无效！的示例，其中一个父组件提供数据，一个孙子组件通过注射获取这些数据。原创 2024-08-14 17:18:10 · 4342 阅读 · 0 评论 -
Vue---vue3+vite项目内使用devtools，快速开发！
我们在前期开发时，一般使用chrome或者edge浏览器，会使用vue-devtools或react-devtools（此插件个人未使用，可百度下是否可内嵌入项目！）来审查vue项目；这个需要安转浏览器插件才可支持！故此本博客的目的是，如果已经开发或者维护阶段的vue+vite项目如何临时插入该插件使用!创建vue3项目时，会提示是否安装devtools的插件！原创 2024-07-24 15:04:09 · 1703 阅读 · 0 评论 -
UI组件---vantList组件接口多次调用大坑问题
问题描述：当使用refesh下拉操作时，vanlist组件会多次调用（大概三次）！原创 2024-07-09 12:47:01 · 1345 阅读 · 0 评论 -
Vue---计算属性computed（传参使用）
对于任何复杂逻辑，你都应当使用。原创 2019-12-12 16:43:46 · 462 阅读 · 1 评论 -
Vue---开发过程中，组件引入后页面无渲染(一直找了好久，页面没报错，完全没头绪！)
事件的起因：在新年的某一天，一个新需求要开发。当我建完分支随便复制了一个通用的页面，路由页面的权限都配置好了，但是页面一直不渲染！整整纠结了半天时间，最后和同事一起去确认排除页面写法问题，最终解决了该次事故！！！前言目前百度搜索啥的，搜到的基本都是因为名称大小写或者起名字语义化问题引起的，对应的解决方案基本就是：修改导入变量名或首字母改为大写！！！但是本人遇到的不是那个问题，很奇葩很难发现的一个错误！内部错误，不显示在页面的报错！原创 2023-02-08 17:47:37 · 1737 阅读 · 2 评论 -
Vue---vue项目中启动后报错Network: unavailable的解决办法
在vue项目根目录下找到或创建 vue.config.js 文件，在devServer配置里面添加public。vue项目run命令后，只有localhost访问，network不能访问，启动后不显示对应的IP地址。如下代码所示： public:‘192.168.1.2:8080’3. 之后完美运行！原创 2023-01-05 16:05:09 · 3585 阅读 · 0 评论 -
Vue---自定义v-model的写法实现
子组件中这样写：props: {return ''}},// 自定义modelmodel: {},methods:{// 事件名要和model属性中event事件名一致},}子组件模板中：父组件模板中子组件标签上：此时父组件中打印myname值就会和子组件的输入值保持双向绑定！！！原创 2022-11-16 15:52:28 · 898 阅读 · 0 评论 -
Vue---vuex状态管理工具的前生今世
vuex是一个专为 Vue.js 应用程序开发的状态管理模式 + 库,它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。原创 2022-10-24 23:48:15 · 1078 阅读 · 7 评论 -
Vue---elementui实现dialog拖拽指令，随拿随用
经过上面的两个文件配置，在任意vue单文件中：dialog组件上添加 v-dialogDrag 即可！上面的index.js文件直接导入到main.js中。直接上代码：index.js。原创 2022-08-29 16:57:50 · 475 阅读 · 0 评论 -
Vue---keep-alive组件的使用，缓存组件
匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。是个抽象组件，它自身不会渲染一个DOM元素，也不会出现在组件的父组件链中。包裹动态组件时，会被缓存不活动的组件实例，而不是销毁它们。不会在函数式组件中正常工作，因为它们没有缓存实例。主要用于保留组件状态或避免重新渲染。...原创 2022-08-12 17:38:38 · 673 阅读 · 0 评论 -
Vue---vue动态组件与异步组件的使用
在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。,当在这些组件之间切换的时候，你有时会想保持这些组件的状态。以避免反复重渲染导致的性能问题。...原创 2022-08-12 17:39:56 · 362 阅读 · 0 评论 -
Vue---11种组件传值方式总结，总有一款适合你
以上示例代码展示了Vue 2中不同组件间通信方法的实现方式。注意，对于Pinia和Vue 3+特有的通信方式，这里没有提供Vue 2的示例代码。原创 2022-08-08 17:49:20 · 3236 阅读 · 0 评论 -
node---通过配置统一前端项目的 Node 版本和包管理器
以上配置完成后，npm install 试试吧，错误的 Node.js 将直接退出！以上配置完成后，可以再乱用 （yarn、npm、pnpm） 试试。锁定项目 Node 版本。原创 2022-08-04 14:27:19 · 1075 阅读 · 0 评论 -
Vue---.env文件配置环境变量的相关问题
一般会建立两个文件：.env.development和.env.production在该文件中注释采用 # xxx。原创 2022-08-04 10:29:01 · 505 阅读 · 0 评论 -
Vue---vue快速安装elementui的几种方式总结
1. 常规安装2. 快速安装3. 按需引入组件3.1 main.js中, 之后按需导入组件原创 2022-07-14 17:35:50 · 959 阅读 · 0 评论 -
Vue---vue3和vue2的区别有哪些？极限总结，值得拥有.
1.生命周期的变化 2.支持多根节点3.异步组件 出现问题如下： 实例代码如下:4.Teleport 6.响应式原理7.虚拟DOM8.事件缓存9.Diff 优化10.打包优化11.自定义渲染API12.TypeScript 支持其他细节可以查看这个，关于虚拟dom和diff（即7到12的更深层原理看这个公众号的详细介绍，大佬的总结！）面试官问：Vue3 对比 Vue2 有哪些变化？...转载 2022-07-08 15:02:31 · 1266 阅读 · 0 评论 -
Vue---vue中watch对象监听属性deep与immediate的使用
主要针对值为函数handler监听来使用的 deep:trueimmediate:true这里一般使用最多的是deep:true,处理对象内部属性的变化，常用写法如下：原创 2022-07-06 10:36:08 · 1810 阅读 · 0 评论 -
Vue------vue3中ref函数的使用(ref获取元素undefined)
答：不一致可以的，但是最终return中的名字要和ref中的值一致！！！原创 2022-07-12 15:23:53 · 8860 阅读 · 4 评论 -
Vue---vue3的setup函数的使用
vue3的setup函数的使用原创 2022-06-27 11:17:16 · 8009 阅读 · 0 评论 -
Vue---Vue2/Vue3生命周期总结
Vue2/Vue3生命周期总结！！！原创 2022-06-24 15:08:07 · 1017 阅读 · 0 评论 -
Vue------this.$router.back()、this.$router.go()的异同
返回上一个页面：1.$router.back()2.$router.go()区别点在于：go(-1): 原页面表单中的内容会丢失；this.$router.go(-1)：后退+刷新；this.$router.go(0)：刷新；this.$router.go(1) ：前进 back(): 原页表表单中的内容会保留；在返回界面传递参数；this.$router.back():后退 ；this.$router.back(0) 刷新；this.$router.back(1)：前进原创 2022-05-27 20:34:05 · 5705 阅读 · 3 评论 -
vue---Parsing error: No Babel config file detected for D:\AAA_ProjectFiles\ ＞ Eslint报错一个属性解决问题
刚初始化的项目，为啥会出现下面的问题Parsing error: No Babel config file detected for D:\AAA_ProjectFiles\MYPro\big_front_end\login_template\src\views\HomeView.vue. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can fin原创 2022-05-14 13:06:11 · 2827 阅读 · 3 评论 -
vue------关于vue官方文档的个人小结
说明：这里说的是@vue/cli脚手架构建的文件何时使用public文件夹你需要在构建输出中指定一个文件的名字。 你有上千个图片，需要动态引用它们的路径。 有些库可能和 webpack 不兼容，这时你除了将其用一个独立的<script>标签引入没有别的选择。审查项目的 webpack 配置vue-cli-service暴露了inspect命令用于审查解析好的 webpack 配置。1.将其输出重定向到一个文件以便进行查阅：vue insp...原创 2020-11-30 10:42:45 · 596 阅读 · 0 评论 -
Vue------跑马灯效果
跑马灯代码段：（可直接复制使用）<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <me...原创 2019-03-29 15:04:11 · 1227 阅读 · 0 评论 -
vue------axios在vue中采用promise封装常用方法的代码
import axios from 'axios';import router from '@/router'import store from '@/store'import {message, Modal} from 'ant-design-vue'import 'nprogress/nprogress.css'let baseURL = process.env.NODE_ENV === '"development"' ? process.env.BASE_URL : 'https://x原创 2020-06-09 14:41:33 · 806 阅读 · 0 评论 -
Vue---封装axios为promise的方式，实现链式调用
1. 封装axios为promise的方式(utils/index.js)记得开发前提前封装好方便后期维护和添加新的接口调用哦！2. 实际调用使用(utils/api.js)3. vue文件中使用 (home.vue)原创 2022-05-01 16:30:34 · 4060 阅读 · 0 评论 -
Vue-------$nextTick()的使用场景(粉丝福利)
先看官方的文档说明：声明周期钩子函数Created和Mounted:需要注意的是，在created和mounted 阶段，如果需要操作渲染后的Dom视图，也要使用nextTick方法。mounted// 该钩子在服务器端渲染期间不被调用。类型：Function详细：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。实例：mounted: function ()原创 2022-02-24 11:04:02 · 1407 阅读 · 1 评论 -
Vue------router传参params方式传值一直为空的解决方案
直奔主题：代码如下这里是其他情况的入口，感兴趣的同学或码友可以一起浏览一下https://liyangtao.blog.youkuaiyun.com/article/details/115008014关键点：name名为组件创建时的name，要完全一致！！！采用params的方式去传参！ { // LyInusreAddInfo.vue 投保信息房屋添加页 path: "/lyhousenew/lyinsureinfo/add", name: "LyInusreAdd.原创 2022-02-21 14:14:33 · 6683 阅读 · 0 评论