醉殇姒若梦遗年 ツ的博客

在 Vue 项目中动态更新video标签的 src 属性时，可能遇到视频不刷新的问题。这是由于 Vue 的虚拟 DOM 更新机制对video和source标签的特殊处理导致的。这些方法能确保视频资源正确重载，适用于不同场景需求。

在v-for循环中避免使用拼接index的ref命名方式（如'realVideo'+index），这会导致$refs访问失败。正确做法是...

本文介绍了在Vue中实现按钮长按触发逻辑的解决方案。通过使用Element UI的el-button组件，尝试为按钮添加mousedown和mouseup事件来实现长按效果，但发现事件无法触发。经过排查，发现需要......成功实现了长按触发指定操作的功能。

本文介绍了一种在网页上实现鼠标拖动绘制矩形框的方法。通过Vue框架结合Canvas实现功能，最终效果可直观显示用户框选的矩形区域。这种方法适用于需要交互式标注或监测范围选择的场景。

本文区分了Vue路由中route和router的概念，并对比了query和params两种传参方式的差异。route是路由信息对象，router是路由实例。query通过path传参，参数显示在URL中且刷新后保留；params通过name传参，参数不显示在URL且刷新后消失。接收时分别使用route.query和route.params。主要区别在于传参方式、URL显示、数据持久性三个方面。

本文介绍了三种防止按钮重复点击的实现方法：1）自定义全局指令，通过disabled属性控制按钮状态；2）改进版指令，使用pointer-events或事件阻止来增强兼容性；3）动态控制disabled属性。其中第一种方法仅适用于el-button，改进版通过阻止事件冒泡或修改CSS属性来支持普通元素。第三种方法通过Vue状态管理实现。这些方案都能在点击后禁用按钮2秒（可配置），有效防止重复提交。文章提供了完整的代码示例，包括全局/局部指令注册和动态属性控制两种实现方式。

Vue组件通信方式总结 Vue组件间通信主要包括父子组件和非父子组件两种情况。父子组件通信主要通过props向下传递数据，通过$emit触发事件向上传递数据，以及使用ref调用子组件方法。非父子组件可通过Vuex状态管理或公共Vue实例实现。父子组件通信时，需要注意props数据的单向流动特性，修改父组件数据应该通过事件触发父组件方法实现。ref调用子组件方法时需注意DOM渲染时机，必要时使用$nextTick。

摘要：通过修改.eslintignore文件可以屏蔽ESLint的严格模式检查。具体步骤：1）在根目录创建或编辑.eslintignore文件；2）添加"src/"可屏蔽src目录下所有文件的严格模式检查；3）若要全局禁用严格模式，只需在文件中添加单个""号即可。示例中还展示了其他常见屏蔽路径的写法，如build、public等目录的配置方法。

在src同目录下创建server文件夹，然后依次创建文件，测试服务器是否搭建成功，在server文件夹下cmd执行。

mysql8.0客户端不支持服务器请求的身份验证协议；需要进行一些设置

最近运行之前的项目，发现无法正常启动，报错因为在 node V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制， V17 和之后版本会出现这个错误。

【代码】下载文件（携带token）的方式。

sourceMap的主要作用是让打包后的文件像未压缩的代码一样，方便调试和定位错误。然而，在生产环境中我们通常不需要这些文件，因为它们会增加应用程序的体积。

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement"

开发过程中，图标一直正常。直到打包发布，页面偶然出现图标乱码问题，再次刷新页面后，图标又正常显示。查看打包文件中，发现app.XXX.css中的css图标样式都是content：''

自创建的项目（未使用项目框架），使用weabpack打包，若出现空白页；若加载图片（img标签）成功，加载背景图片（css中）和字体文件失败。

开发时用到了动态cascader级联选择器，发现切换数据源的时候报错。

npm install 默认使用的安装镜像是国外的镜像，所以在国内使用，会受到网络的限制，所以导致安装速度及其之慢，有的时候，会因为网速问题直接报错。如果没有报错就是已经切换成功，然后再次执行 npm install。更换npm的安装镜像源为国内的即可改变。或者可以在安装的时候指定其安装镜像。最后 我们可以查看一下。

尝试了好几种办法，修改.gitconfig文件，配置过tb镜像，也重新配置过GitHub的ssh，还是未能解决，最后参考了一篇直接删除依赖的文章，删除完就解决了。src/router/modules/components.js 搜索markdown，把相应路由代码删除。1、打开package.json把"tui-editor"删掉。Github 地址：（中文）

当时利用页面生命周期控制组件，注销富文本后重新初始化也没有解决，最后发现是keep-alive缓存导致的，通过设置keep-alive不缓存某些页面才解决了问题。下面针对keep-alive缓存进行记录。

父组件中直接通过ref调用子组件（headTop）中的（hideTab）方法，在子组件中定义了这个方法，但是一直报undefined。最后通过加入判断解决，先判断子组件存在，然后再调用子组件中的方法。

最近给使用的富文本wangeditor进行了一个升级，升到了目前最新的版本wangeditor5把wangeditor5引入vue项目中，启动项目一直报错一开始尝试很多方法都没解决，后来留意到控制台报错，猜测可能和es6中（…）的写法有关，所以后面具体查询了一下兼容es6的问题，了解到。

跳转重复路由报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location解决方案

2022年2月7日，vue3就成为了默认版本。并且vue3成为默认版本的同时，vuex也更新到了4版本。也就是，现在如果直接执行安装vuex，安装的是vuex4。而vuex的4版本只能在vue3中使用。在vue2的项目当中使用vuex的4版本，就会出现如上图所示的报错。那么，我现在用的是vue2，要安装vuex的3版本；（1）Vue2中，要用vuex的3版本；（2）Vue3中，要用vuex的4版本。可参考我另一篇详细描述的文章。...

在某些场景会希望滚动条消失，无法滚动。例如预览图片时，点击图片预览大图后调用stop（），禁用滚动条；关闭预览时调用move（），取消禁用滚动条methods : { //禁止滚动 stop(){ var mo=function(e){　　　　　　e.preventDefault();　　　　 }; document.body.style.overflow='hidden'; document.addEventListener(

在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象this.$nextTick(() => { console.log(this.$refs['hello'].innerText); });

this.$axios.put('url',obj).then((response)=>{ }).catch((error) => { console.log('error',error); console.log(error.response); });error.response可以获取到接口返回的数据，从而拿到message等提示信息

在v-html属性标签的标签上添加getImg方法<div class="content" v-html="content" @click="getImg($event)"></div>getImg方法,通过$event可获取用户当前点击的元素相应的内容,这里可以获取所点击图片对应的src。判断拿到src后，添加图片的预览效果就可以了getImg($event){ console.log($event) console.log($event.target.curr

一、将【favicon.png】格式图片转换为【favicon.bmp】格式ps打开图片- 存储为 BMP格式保存的【favicon.bmp】 格式的图片重命名为【favicon.ico】二、将【favicon.ico】图片保存到public文件夹在index.html文件中修改 <link rel="icon" type="image/x-icon" href="<%= BASE_URL %>favicon.ico">...

1.选一个存放项目的文件夹，例如在sum2.在电脑的搜索框输入cmd，启动cmd黑窗口3.在cmd黑窗口中输入 cd /d 文件路径，进入到该路径下4.在命令行继续输入vue init webpack “项目名称”（我的项目名称为sell，所以输入vue init webpack “sell”），回车后会进行如下选择5.在命令行输入cd 项目名称（我这里是输入cd sell）,会发现路径进入了sell中6.然后给项目安装依赖，输入cnpm install。7.最后一步输入cnpm

第一步：安装 less 和less-loadernpm install less less-loader --save第二步：修改webpack.base.conf.js文件找到build文件夹下的webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', op

使用element框架的NavMenu 导航菜单时，有一个index的属性，如果index的值使用的接口数据，就可能出现这个错误。这是因为 index 的值不能有空格，并且要为string类型，出现这个错误大多就是因为index填入了一个int型的数值。使用 toString() 将其转为字符串就不会报错了。<el-menu-item v-for="(item,index) in Lis...

使用element框架的NavMenu 导航菜单时，collapse参数必须为boolean值当你在代码中直接写成collapse="true"的方式，会认为true是string类型，不是boolean类型，正确的写法应该为 :collapse=“true”，此时认为填写的是boolean值。<el-menu :default-active="activeIndex" class="...

1.在Vue项目中config文件下的index.js添加proxyTable配置proxyTable:{ '/api': { target:'http://xxxxxx.com', changeOrigin:true, pathRewrite: { '^/api': '' } } }//api这个词可以任意换,但文下的词要...

1.在Vue项目中config文件下的index.js添加proxyTable的代码dev: {// 静态资源文件夹assetsSubDirectory: 'static',// 发布路径assetsPublicPath: '/',// 代理配置表，在这里可以配置特定的请求代理到对应的API接口// 例如将'localhost:8080/api/xxx'代理到'http://xxxx...

Vue项目中使用swiper1.在项目中引入swipernpm install swiper --save-dev2.在Vue项目中需要用到swiper的组件里写入以下代码：<template> <div class="swiper-container"> <div class="swiper-wrapper"> <di...

1.vue全家桶包含哪些？答案：vue全家桶与react全家桶介绍2.v-model是什么？怎么使用？vue中标签怎么绑定事件？答案：v-model可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：<input @click=doLog()/>3.v-model的实现原理？答案：vue数据双向...

1.Vue简介Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。2.Vue安装方法一：在 Vue.js 的官网上下...