- 一、前言在项目打包过程中，突然报如下错误：Vue npm run build 错误 (node:7852) UnhandledPromiseRejectionWarning: CssSyntaxError:xxxx.但是在执行 npm run dev过程中，并未错误或告警信息。 二、解决方案打开webpack.prod.conf.js ，注释掉以下配置代码new OptimizeCSSPl... 一、前言在项目打包过程中，突然报如下错误：Vue npm run build 错误 (node:7852) UnhandledPromiseRejectionWarning: CssSyntaxError:xxxx.但是在执行 npm run dev过程中，并未错误或告警信息。 二、解决方案打开webpack.prod.conf.js ，注释掉以下配置代码new OptimizeCSSPl...
- 一、前言我们都知道for循环里要跳出整个循环是使用break，但在数组中用forEach循环如要退出整个循环呢？使用break会报错，使用return也不能跳出循环。使用break将会报错：var arr = [1,2,3,4,5];var num = 3;arr.forEach(function(v){ if(v == num) { break; } console.log(v);})... 一、前言我们都知道for循环里要跳出整个循环是使用break，但在数组中用forEach循环如要退出整个循环呢？使用break会报错，使用return也不能跳出循环。使用break将会报错：var arr = [1,2,3,4,5];var num = 3;arr.forEach(function(v){ if(v == num) { break; } console.log(v);})...
- 一、前言elementUI 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。git地址中文网Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required.Supports... 一、前言elementUI 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。git地址中文网Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required.Supports...
- 一、前言在开发Vue项目过程中，遇到页面样式混乱情形。后发现可通过刷新页面解决该问题，经过问题探究，发现使用最简单的页面刷新方法location.reload()或this.$router.go(0)均会导致页面刷新过程中出现空白现象的发生，用户体验不佳，故继续探究解决方法。 二、业务场景在管理后台，在执行完，增，删，改，操作的时候，我们需要刷新一下页面，重载数据。在JQ中我们会用到loc... 一、前言在开发Vue项目过程中，遇到页面样式混乱情形。后发现可通过刷新页面解决该问题，经过问题探究，发现使用最简单的页面刷新方法location.reload()或this.$router.go(0)均会导致页面刷新过程中出现空白现象的发生，用户体验不佳，故继续探究解决方法。 二、业务场景在管理后台，在执行完，增，删，改，操作的时候，我们需要刷新一下页面，重载数据。在JQ中我们会用到loc...
- 一、应用场景在vue项目开发时，发现路由跳转之后，页面默认停留在当前浏览的位置，但是很多时候我们想要的是路由跳转之后，页面重新定位到顶部，下面介绍一下可以实现的方法。 二、方式一在main.js 中添加代码：router.afterEach((to, from, next) => { window.scrollTo(0, 0)}) 三、方式二如果需要某个页面跳转回顶部，仅需要在当前页面（... 一、应用场景在vue项目开发时，发现路由跳转之后，页面默认停留在当前浏览的位置，但是很多时候我们想要的是路由跳转之后，页面重新定位到顶部，下面介绍一下可以实现的方法。 二、方式一在main.js 中添加代码：router.afterEach((to, from, next) => { window.scrollTo(0, 0)}) 三、方式二如果需要某个页面跳转回顶部，仅需要在当前页面（...
- 一、背景Vue规定不允许直接修改props或者data属性，必须使用Vue.set方法。Vue.set方法用来修改对象属性。如果要增加属性所属对象是响应式的，该方法可以确保属性被创建后也是响应式的，同时触发视图更新。 二、基础知识注：修改的对象必须为响应式对象，且操作响应式对象的属性也必须是响应式的，能够触发视图更新。否则浏览器JS将无法解析，从而报错。 三、示例代码目的：定义一个列表数据... 一、背景Vue规定不允许直接修改props或者data属性，必须使用Vue.set方法。Vue.set方法用来修改对象属性。如果要增加属性所属对象是响应式的，该方法可以确保属性被创建后也是响应式的，同时触发视图更新。 二、基础知识注：修改的对象必须为响应式对象，且操作响应式对象的属性也必须是响应式的，能够触发视图更新。否则浏览器JS将无法解析，从而报错。 三、示例代码目的：定义一个列表数据...
- 一、语法element.addEventListener(event, function, useCapture);第一个参数：事件的类型 (如 “click” 或 “mousedown”)，详参【事件类型】；第二个参数：事件触发后调用的函数；第三个参数：（布尔值，可选）用于描述事件是冒泡还是捕获；注意：不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick... 一、语法element.addEventListener(event, function, useCapture);第一个参数：事件的类型 (如 “click” 或 “mousedown”)，详参【事件类型】；第二个参数：事件触发后调用的函数；第三个参数：（布尔值，可选）用于描述事件是冒泡还是捕获；注意：不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick...
- 一、拓展阅读在前端应用中，窗口间通信应用场景很多，比如弹出qq登录认证窗。 二、postMessage 语法window.postMessage(msg,targetOrigin)注意⚠️postMessage要通过window对象调用！因为这里的window不只是当前window！大部分使用postMessage的时候，都不是本页面的window，而是其他网页的window！如：ifra... 一、拓展阅读在前端应用中，窗口间通信应用场景很多，比如弹出qq登录认证窗。 二、postMessage 语法window.postMessage(msg,targetOrigin)注意⚠️postMessage要通过window对象调用！因为这里的window不只是当前window！大部分使用postMessage的时候，都不是本页面的window，而是其他网页的window！如：ifra...
- 一、前言除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 二、如何声明自定义指令？正如vue全局组件和局部组件一样，vue指令也分全局自定义指令和局部自定义指令。// demoDirective.jslet Opt = { bind:function(el,bind... 一、前言除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 二、如何声明自定义指令？正如vue全局组件和局部组件一样，vue指令也分全局自定义指令和局部自定义指令。// demoDirective.jslet Opt = { bind:function(el,bind...
- 一、前言Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:... 一、前言Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:...
- 在Vue中，应用watch来响应数据的变化，示例代码如下， 一、第一种方式<input type="text" v-model="userName"/> //监听当userName值发生变化时触发watch: { userName (newName, oldName) { console.log(newName) }}第一种方式有一个缺点： 就是当值第一次绑定的时候不会执行监听函数，只有... 在Vue中，应用watch来响应数据的变化，示例代码如下， 一、第一种方式<input type="text" v-model="userName"/> //监听当userName值发生变化时触发watch: { userName (newName, oldName) { console.log(newName) }}第一种方式有一个缺点： 就是当值第一次绑定的时候不会执行监听函数，只有...
- 一、前言blur与change事件在绝大部分情况下表现都非常相似，输入结束后，离开输入框，会先后触发change与blur，唯有两点例外。1. 没有进行任何输入时，不会触发change。在这种情况下，输入框并不会触发change事件，但一定会触发blur事件。在判断表单修改状态时，这种差异会非常有用，通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。2. 输入后值并没有... 一、前言blur与change事件在绝大部分情况下表现都非常相似，输入结束后，离开输入框，会先后触发change与blur，唯有两点例外。1. 没有进行任何输入时，不会触发change。在这种情况下，输入框并不会触发change事件，但一定会触发blur事件。在判断表单修改状态时，这种差异会非常有用，通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。2. 输入后值并没有...
- 一、前言由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用updated钩子函数。无论是组件本身的数据变更，还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更，都会触发虚拟 DOM 重新渲染和打补丁，并在之后调用 updated。有个值得注意的地方，举例说明：例子<template> <div> <div v-for="(item, in... 一、前言由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用updated钩子函数。无论是组件本身的数据变更，还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更，都会触发虚拟 DOM 重新渲染和打补丁，并在之后调用 updated。有个值得注意的地方，举例说明：例子<template> <div> <div v-for="(item, in...
- 一、介绍这是一个可以快速回到页面顶部的组件，当系统用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。 二、使用方法由于该组件是基于element-UI进行二次封装的，所以在使用该组件时请务必安装element-UI，安装好element-UI后，只需将该组件文件夹BackToTop导入到现有项目中即可使用。 三、使用示例<template> <div id="app"> ... 一、介绍这是一个可以快速回到页面顶部的组件，当系统用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。 二、使用方法由于该组件是基于element-UI进行二次封装的，所以在使用该组件时请务必安装element-UI，安装好element-UI后，只需将该组件文件夹BackToTop导入到现有项目中即可使用。 三、使用示例<template> <div id="app"> ...
- Vue 是一个流行的 JavaScript 框架，提供了丰富的功能和工具，用于构建现代化的 Web 应用程序。而网络请求是前端开发中一个非常重要的方面。本文将介绍 Vue 组合式编程中如何使用 Axios 进行网络请求，并结合实例详细说明其使用方法和最佳实践。 1. 简介1.1 AxiosAxios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境中进... Vue 是一个流行的 JavaScript 框架，提供了丰富的功能和工具，用于构建现代化的 Web 应用程序。而网络请求是前端开发中一个非常重要的方面。本文将介绍 Vue 组合式编程中如何使用 Axios 进行网络请求，并结合实例详细说明其使用方法和最佳实践。 1. 简介1.1 AxiosAxios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境中进...
上滑加载中
推荐直播
-
华为云码道-玩转OpenClaw，在线养虾2026/03/11 周三 19:00-21:00
刘昱，华为云高级工程师/谈心，华为云技术专家/李海仑，上海圭卓智能科技有限公司CEO
OpenClaw 火爆开发者圈，华为云码道最新推出 Skill ——开发者只需输入一句口令，即可部署一个功能完整的「小龙虾」智能体。直播带你玩转华为云码道，玩转OpenClaw
回顾中 -
华为云码道-AI时代应用开发利器2026/03/18 周三 19:00-20:00
童得力，华为云开发者生态运营总监/姚圣伟，华为云HCDE开发者专家
本次直播由华为专家带你实战应用开发，看华为云码道(CodeArts)代码智能体如何在AI时代让你的创意应用快速落地。更有华为云HCDE开发者专家带你用码道玩转JiuwenClaw，让小艺成为你的AI助理。
回顾中 -
Skill 构建 × 智能创作：基于华为云码道的 AI 内容生产提效方案2026/03/25 周三 19:00-20:00
余伟，华为云软件研发工程师/万邵业（万少），华为云HCDE开发者专家
本次直播带来两大实战：华为云码道 Skill-Creator 手把手搭建专属知识库 Skill；如何用码道提效 OpenClaw 小说文本，打造从大纲到成稿的 AI 原创小说全链路。技术干货 + OPC创作思路，一次讲透！
回顾中
热门标签