标签：#Vue
50 篇文章
keep-alive 缓存页面不生效的三种原因
keep-alive 缓存页面不生效的三种原因
Vue keep-alive 缓存页面不生效的三种原因
Vue 3 Composition API 入门指南
Vue 3 Composition API 入门指南
深入了解 Vue 3 的 Composition API，学习如何使用 setup、ref、reactive 等核心概念
Vue 3 Composition API 入门指南
Vue 3 Composition API 入门指南
深入了解 Vue 3 的 Composition API，学习如何使用 setup、ref、reactive 等核心概念
使用 Nuxt Content 构建博客
使用 Nuxt Content 构建博客
学习如何使用 Nuxt Content 模块快速搭建一个功能完整的博客系统
JavaScript 埋点库
JavaScript 埋点库
本文介绍 JavaScript 埋点库的相关内容。
可调整大小的分割面板
可调整大小的分割面板
本文介绍几种实现可调整大小分割面板的方法，包括使用 vue-draggable-resizable, split.js 和 vue-split-view 等库。
Vue Transition 弃用原因及优化
Vue Transition 弃用原因及优化
Vue 的 transition 在 v-if、v-show 或 display: none 的情况下会导致动画不触发，需要使用 setTimeout 进行优化。本文探讨了 Vue Transition 的弃用原因，并提供了代码示例和解决方案。
解决 Vue v-for 循环中数组顺序变化导致图片重新加载的问题
解决 Vue v-for 循环中数组顺序变化导致图片重新加载的问题
本文介绍如何解决 Vue.js 中使用 v-for 循环时，数组顺序发生变化导致页面重绘，从而引起图片重新加载的问题。通过为 v-for 循环添加:key 属性，绑定数组中对象的唯一标识符，可以有效避免此问题。
Element-UI Form 表单 disabled 属性继承原理
Element-UI Form 表单 disabled 属性继承原理
本文介绍了 Element-UI form 表单中 disabled 属性如何向下传递到子组件，以及如何使用 Vue 的 inject 和 provide 机制实现属性的传递。
流程图开源 JS 库推荐
流程图开源 JS 库推荐
本文推荐几个常用的开源流程图 JavaScript 库，包括 bpmn.io/toolkit/bpmn-js, anseki.github.io/leader-line, reactflow.dev, 和 vueflow.dev。
Vue 按钮点击取消事件冒泡
Vue 按钮点击取消事件冒泡
如何在 Vue 中阻止按钮点击事件冒泡到父元素。本文提供了一种使用 `@click.stop` 指令的简单方法。
Vue i18n 使用及相关资源整理
Vue i18n 使用及相关资源整理
本文介绍 Vue i18n 的使用方法，包括语言切换、选择文本弹出提示、浏览器检测库、移动端检测库、手势检测库等相关资源和工具的整理。
Vue3 获取 DOM 元素
Vue3 获取 DOM 元素
Vue3 中使用 ref 获取 DOM 元素的方法，包括 Composition API 的使用以及一些常见的错误和解决方法。
常用图标库：React Icons 和 Oh Vue Icons
常用图标库：React Icons 和 Oh Vue Icons
本文介绍两个常用的图标库：react-icons (适用于 React) 和 oh-vue-icons (适用于 Vue)，它们提供了丰富的图标资源，方便开发者在项目中使用。
数据大屏示例代码及资源链接
数据大屏示例代码及资源链接
本文收集整理了一些数据大屏示例代码链接，方便学习和参考。包含 ECharts 图表库的应用，以及其他数据可视化工具和平台，例如：基于 ECharts 的 Sankey 图示例，以及其他数据可视化资源。
Vue Admin 框架和 Axios 请求封装调研
Vue Admin 框架和 Axios 请求封装调研
本文调研了多个流行的 Vue Admin 框架，并分析了其中 Axios 请求的封装方法，包括 `vue-vben-admin`, `gin-vue-admin`, `soybean-admin`, `RuoYi-Vue3`, `v3-admin-vite`, `vue3-antdv-admin` 和 `cool-admin-midway` 等。
跨窗口、Tab 页通信方法总结
跨窗口、Tab 页通信方法总结
本文总结了跨窗口、Tab 页通信的多种方法，并提供了多个 GitHub 项目和文章链接，以及 Stack Overflow 问题的参考。
Vue Data Resetting Techniques
Vue Data Resetting Techniques
This article explores different methods for resetting data in Vue.js applications, including resetting the entire data object or specific properties using `this.$data` and `this.$options.data()`. Learn how to efficiently restore your component's data to its initial state.
Vue Cli 打包报错：Uncaught ReferenceError: exports is not defined
Vue Cli 打包报错：Uncaught ReferenceError: exports is not defined
Vue Cli 打包报错 Uncaught ReferenceError: exports is not defined，解决方法：导入的包使用了 CommonJS 规范，而 Vue Cli 打包使用的是 ESM 规范，导致冲突。文章分析了问题原因，并提供了解决方案。
Vue 中在新标签页打开页面
Vue 中在新标签页打开页面
如何在 Vue.js 应用中在新标签页打开一个页面，包含两种方法示例。
Vue3 父子组件传值及方法调用
Vue3 父子组件传值及方法调用
本文介绍了 Vue3 中父子组件之间如何进行数据传递和方法调用，包括父组件向子组件传递数据，以及子组件调用父组件方法，并提供了具体的代码示例。
Vue3 watch props 监听属性变化
Vue3 watch props 监听属性变化
本文介绍了如何在 Vue3 中使用 watch 来监听 props 属性的变化，并提供了相应的代码示例。
Vuex 到 Pinia 的迁移
Vuex 到 Pinia 的迁移
记录将 Vue3 项目中 Vuex 迁移到 Pinia 的过程，分享迁移经验，并提供相关参考文章链接。
Vue 约定式路由（文件路由）
Vue 约定式路由（文件路由）
本文介绍 Vue 约定式路由（文件路由）的配置方法，包括使用 vite-plugin-pages 插件，以及页面元数据配置、页面缓存优化等技巧。文中还提供了 Vue2 和 Vue3 下页面缓存的优化方案。
Vue3 监听 Prop 变化
Vue3 监听 Prop 变化
本文介绍如何在 Vue3 中使用 `watch` 函数监听 Prop 的变化，并提供代码示例。
Element 在线运行报错解决
Element 在线运行报错解决
Element 在线运行报错的解决方法，主要介绍如何找到合适的 Vue2 版本来解决问题，并提供参考文章链接。
JS Vue React 路由处理机制
JS Vue React 路由处理机制
本文探讨了 JavaScript、Vue 和 React 如何处理路由，并解释了 Nginx 配置中 `try_files` 指令的作用，以及如何通过它实现单页应用的路由机制。
Vue3 响应式数据重新赋值问题详解
Vue3 响应式数据重新赋值问题详解
本文探讨 Vue3 中使用 reactive 进行响应式数据重新赋值的几种方法，包括 Object.assign, ref, reactive 以及 toRefs 的使用，并分析各自的优缺点。
Vue 子组件如何获取所有父组件传递的值
Vue 子组件如何获取所有父组件传递的值
本文介绍如何在 Vue 子组件中获取所有父组件传递的值，并提供代码示例和最佳实践。
Vite 动态引入图片
Vite 动态引入图片
本文介绍了使用 Vite 动态引入图片的几种方法，包括使用 `import.meta.globEager`、`import()` 和 `new URL()` 等方式，并对各种方法进行了比较和优化。
Vue3 路由变化监听与传参
Vue3 路由变化监听与传参
本文介绍 Vue3 中如何监听路由变化以及如何正确地进行参数传递，包括解决 params 无效和监听不到变化等常见问题，并附带相关链接和参考文章。
Vue3 中使用 keep-alive 组件报错：TypeError: parentComponent.ctx.deactivate is not a function 的解决方法
Vue3 中使用 keep-alive 组件报错：TypeError: parentComponent.ctx.deactivate is not a function 的解决方法
Vue3 使用 keep-alive 组件时，切换页面报错 TypeError: parentComponent.ctx.deactivate is not a function。文章提供了解决方案：在 keep-alive 和 component 上设置 key 属性进行排序，并附带相关参考文章链接。
Vant 样式覆盖问题及解决方法
Vant 样式覆盖问题及解决方法
解决 Vant 组件按需导入导致自定义样式覆盖无效的问题。文章详细介绍了通过全局导入 Vant 样式来解决此问题的方法，并分析了按需导入与全局导入在样式优先级上的差异。
Vue 移动端适配方案
Vue 移动端适配方案
本文介绍两种 Vue 移动端适配方案：rem 方案和 viewport 方案，并讲解了如何结合使用以及解决 dpr 引发的字体大小问题。包括 `amfe-flexible`、`postcss-pxtorem`和`postcss-px-to-viewport` 的使用方法和配置。
Nginx 前端配置与二级路由详解
Nginx 前端配置与二级路由详解
本文详细介绍了 Nginx 前端配置，包括 Vue 和 React 项目的打包部署，以及如何配置二级路由和处理不同访问路径下的代理转发问题，并深入探讨了 `alias`和`root`指令的区别以及`proxy_pass`中带`/`和不带`/` 的区别。
Vue 学习（二）
Vue 学习（二）
深入学习 Vue 源码，包括 Object.defineProperty 的用法，以及父子组件继承和编译过程中的代码分析。
CSS 属性选择器及 Vue scoped 样式穿透
CSS 属性选择器及 Vue scoped 样式穿透
Vue 的 style 使用 scoped 属性时，会给相关 DOM 元素添加类似 `[data-v-26725ac2]` 的属性，导致无法通过 CSS 选择器直接选中某些由 JavaScript 生成的 DOM 元素。本文介绍如何使用属性选择器 (`[data-v-26725ac2]`) 和 `v-deep` (已弃用，建议使用 `>>>` 或深度选择器) 解决这个问题，并详细解释 CSS 属性选择器的用法。
Vue 设置 iframe 内容样式
Vue 设置 iframe 内容样式
在 Vue 中，如何设置 iframe 内容的样式，这篇文章介绍了如何在同源策略下，通过 JavaScript 在 iframe 加载后动态添加样式，解决 iframe 内容样式设置的问题。
ElementUI 抽屉组件意外关闭问题解决
ElementUI 抽屉组件意外关闭问题解决
解决 ElementUI 抽屉组件 Drawer 在选中文字后，鼠标移到遮罩层意外关闭的问题。通过监听鼠标按下和弹起事件，阻止遮罩层在选中文字拖拽时关闭。
Vue 动态切换背景图片
Vue 动态切换背景图片
使用 Vue 动态切换背景图片的方法。
Vue.js 实用技巧：使用 .sync 修饰符实现父子组件数据同步
Vue.js 实用技巧：使用 .sync 修饰符实现父子组件数据同步
本文介绍了 Vue.js 中如何使用 `.sync` 修饰符实现父子组件之间数据的双向绑定，并提供了具体的代码示例，方便开发者快速学习和应用。
Vue 获取 Element UI 中的 Textarea
Vue 获取 Element UI 中的 Textarea
本文介绍如何使用 Vue.js 获取 Element UI 中的 Textarea 组件。提供了一种改进的方法，避免了使用笨方法带来的潜在问题。
Vue 深度 CSS 选择器
Vue 深度 CSS 选择器
本文介绍 Vue 中深度 CSS 选择器的使用方法，包括 `::v-deep` 的用法以及一些示例代码，例如如何使用 `::v-deep` 选择器修改 van-cell 组件的样式。
Vue 编程式添加组件
Vue 编程式添加组件
本文介绍了多种在 Vue.js 中编程式添加组件的方法，包括使用 `Vue.extend`、`render` 函数以及原生 JS 创建 DOM 元素等方式，并附带了多种代码示例和参考链接，帮助开发者理解和掌握 Vue 组件的动态添加技术。
Vue 开发环境端口修改及跨域代理配置
Vue 开发环境端口修改及跨域代理配置
本文介绍如何修改 Vue 开发环境的端口号，以及如何配置跨域本地代理，解决开发过程中前后端分离导致的跨域问题。
Vue.js 修改浏览器 URL 无刷新
Vue.js 修改浏览器 URL 无刷新
使用 Vue.js 和 JavaScript 的 `window.history.pushState` 和 `$router.push` 方法修改浏览器 URL，无需刷新页面，并支持浏览器返回按钮功能。文章包含代码示例和详细解释。
Vue 加载 HTML 代码的方法及优化
Vue 加载 HTML 代码的方法及优化
本文介绍了在 Vue 中加载 HTML 代码的几种方法，并重点分析了 `v-html` 指令和自定义指令 `v-string` 的优缺点，以及如何避免 `v-html` 导致的 HTML 结构改变问题。提供了更优的解决方案，并附带了相关 API 的链接。
Vue 学习（一）深入 Vue 源码学习 JavaScript
Vue 学习（一）深入 Vue 源码学习 JavaScript
通过阅读 Vue 源码学习 JavaScript，分析 new Vue 的过程，以及 initMixin 如何操作 Vue 原型的机制，并进行手写练习，加深对 JavaScript 原型继承和 this 指向的理解。
将 Vue 组件挂载到 shadowRoot
将 Vue 组件挂载到 shadowRoot
本文介绍如何在 Chrome 扩展程序中使用 shadowRoot 隔离 DOM，并讲解如何将 Vue 组件挂载到 shadowRoot 中的元素上，从而避免插件与页面 DOM 产生冲突。
Webpack 5 配置 Vue 脚手架问题及解决方法
Webpack 5 配置 Vue 脚手架问题及解决方法
升级 Webpack 5 配置 Vue 脚手架过程中遇到的样式失效问题，以及使用 vue-style-loader 和 css-loader 的解决方案。文中分析了问题原因，并提供了修改 Webpack 配置的示例代码。