海贼王某人的博客

video播放视频组件，复制即可用免安装，支持自定义参数

起因：项目需要加一个视频播放功能，线上资源和网页url不是一个域名，导致跨域了无法播放，报错。我真的服了，网上答案十个九个都是错的，那些人发出来的东西自己都不验证一下吗，多了一个 i 让我好找啊，最后还是解决了，如果你用crossOrign无法解决就把 i 加上吧，我也不知道什么原因，反正的我不加 i 就可以播放了，记录一下这个大坑。注意：是crossOrign=“anonymous”，不是crossOrigin=“anonymous”

scripts里面就是我们的运行配置，当我们执行npm run dev的时候就会读取env.dev文件里面的配置，其他同理，需要运行test环境就用test,最后是我们的接口请求配置文件，request.js，import.meta.env.VITE_APP_BASE_UR这个就是引用env文件里面的域名了。env.dev就是dev环境的域名，.test就是test环境域名，其他同理，然后配置package.json文件。首先创建不同环境的配置文件，比如域名和一些常量，创建一个env文件,先看看文件目录。

vue大数据表格上万条数据，树型表格，解决el-table表格数据量过大渲染卡死的问题，使用umy-ui的大数据表格虚拟表格虚拟滚u-table解决。，先看看效果吧，拿实例说话，直接渲染四万多条数据不分页，树形表格可以展开。

Cannot create property 'xxx参数名' on string 这个问题结局办法,前端开发，vue开发中遇到的小问题

js锚点跳转添加过度动画，vue锚点跳转js添加平滑过度效果

先看一下效果图，点击右侧导航栏，左侧显示相应的版块内容 a标签锚点定位跳转 看代码,我这里用的循环，原理很简单，a标签绑定需要跳转到内容div的id,每一个内容div绑定一个唯一id，即可实现点击跳转 <!-- 右侧悬浮导航栏 --> <div v-for="(item,indext) in fixList" :key="indext">

v-for为什么要加key 值？vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区别各个组件,key的作用主要是为了高效的更新虚拟DOM。v-if和v-for 不能同用的原因？当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，所以不推荐v-if和v-for同时使用，可以把list放在计算属性中遍历v-model的实现原理是什么？v-model主要提供了两个功能，view层输入值影响data

话不多说，直接上代码，跨域的问题一般只存在本地开发的时候，生产环境下一般是不存在跨域的，如果有，那也是后端去解决，开发时遇到跨域，要莫找后端处理，另一种就是前端配置代理请求解决：vue.config.js的配置如下，主要是proxy里面的配置module.exports = { lintOnSave: false, devServer: { overlay: { warning: false, errors: false }, open: true

第一步引入第三方插件：npm install –save qrcodejs2第二步，在vue页面中引用：<template> <h2>微信扫码支付</h2> <div id="qrcode"></div></template><script>import QRCode from 'qrcodejs2'export default { data() { return { } },

看一下实现的效果：代码奉上：<link rel ="shortcut icon" type="image/x-icon" href="./logo.png"><title>海行后台</title>直接找到index.html把文件修改一下即可解决，如果没显示就刷新或者从新运行一下项目：项目目录如下：...

别急着划走，看看我的顺序，我之前就是顺序放错了，项目启动不了，复制粘贴到vue.config.js文件即可module.exports = { lintOnSave: false, devServer: { overlay: { warning: false, errors: false } }}...

vue-router的使用，以及路由守卫的使用，复制直接用！import Vue from 'vue' // 引入VUE实例import VueRouter from 'vue-router' // 引入vue路由Vue.use(VueRouter) // vue实例调用路由const routes = [ // 配置路由 { path: '/', // 进入系统首次加载的路由 一般都是登录页面 redirect: { name: 'Customer'...

先来说一下v-show和v-if最本质的区别，v-if是直接销毁DOM,从虚拟树直接移除，需要的时候在创建从新挂载，而v-show是通过css样式display：none来隐藏与显示DOM，使用场景就是需要频繁的切换显示和隐藏的话优先v-show,如果模板调用比较少，则可以选v-if,道理不必多说，频繁的创建移除dom肯定有损性能，不经常调用就在关闭的时候销毁，这样也可以减少dom树，提高性能。开发中遇到的坑：1.如果你使用的模板用prop传了参数，建议使用v-show,我今天就遇到了这个问题，用v-i

首先我们在src文件里面新建一个style文件夹，根据个人习惯来，放在assets文件夹下面也可以,然后在创建一个index.scss文件，如下图接下来就是添加class样式了，简单添加几个，如下图接下来是引入全局样式引入后就可以在页面中任何地方随意调用了,使用方法如下图，直接调用...

先来一段代码，我们分别声明一个methods方法newName()，computed新增一个计算属性newNames，然后分别在页面中调了各四次，我们来看一下打印结果：如下图可以看到计算属性newNames只被执行了一次，这就是computed的好处，他是具有缓存性的，当计算第一次结果后会存入缓存，第二次调用该计算属性的时候，他会先读取需要返回的结果是否发生改变，如果没有就直接返回缓存的结果，如果改变了才会从新计算，而method就不会，直接执行了四次，所以处理效率上面不用多说，你明白了吗，合理的利用计

<div class="item" v-for="(item,index) in dataList" :key="index"> <div :style="{background:item.value ? '#FFFFFF' : '#000000'}"> </div></div>以上是一个简单的循环列表，根据每一项不同的的value值来显示对应的颜色...

这个坑我已经踩过三次了，今天才来写，虽然是个小bug，但我希望能帮到正在踩坑的你，看一段代码： <el-input v-for="(item, index) of dataList" :key="index" :value="item.value" />这只是个实例，element输入框，dataList是循环的input框，每一个input有一个指定的id,不一样，然后循环出来的数据，我们会发现，改变了其中某一个的值其他的值会跟着

不多说直接上代码，无效你顺着网线来打我：第一步：找到wangEditor.js文件，一下代码直接全选复制，到wangEditor.js文件里面Ctrl+A 在Ctrl+V全部替换掉，这个我已经改好了，不用你再去找什么方法改指定的地方了，然后执行第二步：(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(

第一步：安装Node.js和npm官网下载：https://nodejs.org/en/download/下载好了安装一直点就好了，npm不要再次安装，node安装包里面自带的有，安装完成在cmd 命令输入 node -v npm -v 回车查看，如下图看到版本号即为安装成功。 第二步： 安装cnpmcnpm和npm的区别就在于下载路径不一样，cnpm走的是国内下载路径，很快，但npm 走的是国外的，下载速度要慢很多，建议使用cnpm但不是必须使用，安装直接在cmd命令里面继续输入

两个方法结决this.$forceUpdate()直接在钩子函数里面吊用，或者通过refs属性再目的页面调用自定义重置方法吧需要重置的data数据全部写在一个方法里，进到页面调用此方法即可

computedcomputed适合处理的场景是，一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性，computed是带缓存的，只有其引用的响应式属性（属性绑定）发生改变时才会重新计算(如果引用的属性没有改变，则调用上一次缓存值)watchwatch适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化（该数据影响别的多个数据）=...

准备 ：安装 node.js 通过node自带的npm（包管理工具）下载 vue-cli脚手架 并安装 官网下载node: https://nodejs.org/en/download/下载所需操作系统对应的安装包 双击安装即可 安装成功后： Linux/unix 打开终端 Win 进入cmd 输入：node -v 命令，出现版本号既安装成功安装淘宝镜像（使用cnpm） npm install -g cnpm --registry=https://registry.npm.tao

今天用vue写项目，用$refs调用子组件方法遇到这样的问题，如下图：大概就是这样子的问题，在网上查了很多资料，终于解决了，解决办法就是这样：出现这个问题的原因主要是在vue还没进行加载完方法的时候就开始进行执行组件方法就会报这个错误，解决的办法很简单，只要在让方法在vue加载完组件之后再进行执行就好了！希望对你有帮助...

vue全家桶介绍：vue全家桶是基于vue开发必备的也是必学的东西，概括起来就是：、1.项目构建工具、2.路由、3.状态管理、4.http请求工具。最常见常用的vue全家桶简单的介绍一下，希望可以帮助你了解认识学会vue全家桶！1.vue-clivue-cli就是快速创建搭建一个vue项目的脚手架工具，安装vue-cli，直接在cmd命令执行：npm install -g vue-cli（安装的cnmp直接把npm改一下就可以），之后需要填写一些项目信息，不会的可以去网上搜一下。2.vue-rou

在vue开发的时候最常遇到的问题就是我们通过methodsethods里面的方法改变了data里面数据的值，我们发现在js里面这个数据已经改变了，但页面渲染数据时却还是之前的状态，这个问题最常见的解决方案：方案一：深浅拷贝数据赋值时发生了问题深浅拷贝不多讲了，不懂得可以去看下面这篇文章或者自己先去学习了解一下：JavaScript深浅拷贝最简单的例子let arr = this.dataListjs逻辑处理完arr后在this.dataList = arr给dataList赋值；这样虽然确实改变

最近项目需要im在线聊天功能，消息发送enter键，换行ctrl+enter，找了很多资料才解决，结合自己理解也扩展了一些内容，希望可以帮大家解决问题：下面是HTML代码<el-input @keydown.enter.native="keyDown" type="textarea" :rows="4" class="text-input" placeholder="请输入内容" v-model="textarea"></el-input>下面是js代

最近项目需要im在线聊天功能，消息发送enter键，换行ctrl+enter，找了很多资料才解决，解决问题的小伙伴可以点个赞，感谢感谢：直接看代码;<el-input @keydown.enter.native="keyDown" type="textarea" :rows="4" class="text-input" placeholder="请输入内容" v-model="textarea"></el-input>我用的element组件，这个不影

这个问题看个人习惯了，裸奔很爽而且看了舒服，就是大家说的可读性高，如果项目就你一个人开发的话看个人习惯就好，如果团队开发还是统一一下风格比较好，别一个团队写出千军万马就难搞了。其实要不要分号都不影响程序执行对于vue来说，但对于原生js的话还是带上分号比较好，因为大巴压缩后没有分号的话，有可能会上下两行代码当一个程序执行，但vue就不存在这个问题了，下面给两个图，自己比较一下吧————end…...

今天遇到一个奇葩事请，需要获取部门树，按道理因该是后端直接返回一个树状直接给我的，但是他只返回一个Array数组，让我根据pid找下级，自己组一个树状的，来就来，谁怕谁，直接上代码：这是后端返回的数据格式： [ {id: 1, organizationId: 1, name: "有限公司", pid: 0} {id: 2, organizationId: 1, name: "键管部", pid: 1} {id: 3, organizationId: 1, name: "技术部", pid:

好了先看看实现后的效果吧，样式可以自定义修改的，代码很容易看懂，新手都可以用；上面是选中状态，下面是未选中状态，支持反选多选取消选中，看下面代码：<!-- HTML部分 --><div class="checkbox"> <input type="checkbox" id="checkbox1"/> <label for="checkbox1"><span class="icons"></span></labe

axios+vue项目请求跨域：has been blocked by CORS policy: Response to preflight request doesn’t pass前端请求接口报错401/402/403怎么解决！最直接有效的解决方法就是直接叫后台开启跨域，前端解决跨域虽然有办法，但是难保上线不出问题，如果只是本地开发环境用的话可以配置反向代理，重写api/，或者配置请求头，Ajax就用jsonP啦，所以前端不用为难自己，接口问题找后端就行了！...