VUE
关注
分享
扫一扫
文章平均质量分 57
传而习乎
你知道的越多，你不知道的就越多
展开
-
【Vue】移动端访问Vue项目页面无数据，但是PC访问有数据
但实际上我赋的值是可以打印出来的，有判断了下window.localStorage，发现浏览器不支持window.localStorage，于是改变使用sessionStorage，问题解决了。这次的问题我感觉很奇葩，明明测试环境localStorage是支持的，到了正式环境就不支持了。冷静分析了下，与浏览器抓到的东西进行了比对，发现移动端是没有进行接口请求的，那估计是我的代码出了问题，推测是vue生命周期问题，但是在浏览器访问该页面的时候又没有报错。原创 2024-09-13 09:21:12 · 362 阅读 · 0 评论 -
构建工具对比：6种（Npm Script、Grunt、Gulp、Fis3、Webpack、Rollup）
历史上先后出现了一系列构建工具，它们各有优缺点。由于前端工程师很熟悉JavaScript，Node.js又可以胜任所有构建需求，所以大多数构建工具都是用Node.js开发的。本文就来一一介绍它们。本文选自《深入浅出Webpack》。前端技术发展之快，各种可以提高开发效率的新思想和框架层出不穷。但是它们都有一个共同点：源代码无法直接运行，必须通过转换后才可以正常运行。构建就是做这件事情，将源代码转换成可执行的JavaScript、CSS、HTML代码，包括如下内容。代码转换：将TypeScript原创 2021-08-02 12:40:03 · 1907 阅读 · 0 评论 -
双因素认证（2FA）
转自: http://www.ruanyifeng.com/blog/2017/11/2fa-tutorial.html所谓认证（authentication）就是确认用户的身份，是网站登录必不可少的步骤。密码是最常见的认证方法，但是不安全，容易泄露和冒充。越来越多的地方，要求启用双因素认证（Two-factor authentication，简称 2FA）。本文介绍它的概念和实现方法。一、双因素认证的概念一般来说，三种不同类型的证据，可以证明一个人的身份。秘密信息：只有该用户知.原创 2021-07-29 13:18:03 · 7001 阅读 · 0 评论 -
VUE const、var、let区别
js 中 const、var、let 区别今天第一次遇到const定义的变量，查阅了相关资料整理了这篇文章。主要内容是：js中三种定义变量的方式const， var， let的区别。1.const定义的变量不可以修改，而且必须初始化。1 const b = 2;//正确2 // const b;//错误，必须初始化 3 console.log('函数外const定义b：' + b);//有输出值4 // b = 5;5 // console.log('函数外修改const定义b：' +原创 2021-07-20 16:01:55 · 944 阅读 · 0 评论 -
VUE Object.assign()的使用
【ES6语法】基本用法Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b:2, c:3}Object.assign方法的第一个参数是目标对象，后原创 2021-07-20 15:59:20 · 8402 阅读 · 1 评论 -
VUE 对象的拷贝：解决vue A对象赋值给B对象,修改B属性会影响到A的问题
1、直接拷贝let origin = { name: '张三', age: 12}let target = origin;target.name = '李四';上面将target对象的属性修改之后，origin也会相应的改变，因为这里的target与origin这两个引用实际上是指向同一个对象。2、深拷贝let target=JSON.parse(JSON.stringify(this.origin));上面这种方式不仅仅是增加一个引用，而是将属性也拷贝...原创 2021-07-20 15:49:22 · 8151 阅读 · 0 评论 -
vue数组去重2种方法
方法一：用2个for循环，判断每一项的id案列： that.positions.map(train=>{ that.new_Positions.push( train.trainId) }) that.resultArr = [];//去重后的数组...原创 2021-07-20 15:41:16 · 8239 阅读 · 0 评论 -
Vue 数组添加元素的三种方式
1、push() 结尾添加 数组.push(元素)参数 描述 newelement1 必需。要添加到数组的第一个元素。 newelement2 可选。要添加到数组的第二个元素。 newelementX 可选。可添加多个元素。 2、unshift() 头部添加 数组.unshift(元素)参数 描述 newelement1 必需。向数组添加的第一个元素。 newelement2 可选。向数组添加的第二个元素。 newel原创 2021-07-20 15:38:22 · 11019 阅读 · 0 评论 -
VUE this.$nextTick()的使用场景
【TAG - 1】：官网解释：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。个人理解：用于直接操作dom元素的时候使用，由于直接操作dom元素时页面拿到的状态是修改之前的数据，这时需要使用到this.$nextTick，相当于setTimeout。代码展示：<template> <button ref="bo..原创 2021-07-19 16:54:47 · 5106 阅读 · 0 评论 -
VUE 表单input保留n位小数【1/2】（input=“number“类型，防止输入多个小数点，自定义NumberInput组件）
背景：Vue开发移动端应用时，难免用到表单输入，比如金额。需求：这时就需要吊起移动端数字键盘，input的type就必须设置成number，当然tel类型也可以，但是无法输入小数点。当然如果精力允许，你也可以自定义数字键盘是最好的，网上也有很多Vue数字键盘组件。踩坑：一但用了input[type=number]类型有很多的坑。vue在申明表单model的时候必须是整形，要不然一堆红报错。maxlength属性不生效了，无法限制表单输入长度。可以多次输入小数点，其实这个model已经变成空值原创 2021-07-19 15:12:27 · 623 阅读 · 0 评论 -
vue 强制类型转换 数字类型转为字符串
原数据 ID ，类型是数字类型后端需要的是字符串类型只需要在后面加上 + ' '，数字后拼接一个空字符串，即可转数字类型为字符串类型原创 2021-07-19 15:03:02 · 1654 阅读 · 0 评论 -
vue+element文本域设置自适应和默认高度
<el-form-item label="私密" :label-width="'140px'" prop="private_key"><el-inputsize="small"v-model="form.private_key"placeholder="请填写"type="textarea":autosize="{ minRows: 2, maxRows: 4}"></el-input></el-form-item>通.原创 2021-07-15 13:21:48 · 2207 阅读 · 0 评论 -
理解vue中的scope的使用
我们都知道vue slot插槽可以传递任何属性或html元素，但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值，获取到的值是一个对象。注意：scope="它可以取任意字符串";上面已经说了 scope获取到的是一个对象，是什么意思呢？我们先来看一个简单的demo就可以明白了~如下模板页面：<!DOCTYPE html><html> <head> <title>Vue-scop原创 2021-07-14 10:33:20 · 10085 阅读 · 1 评论 -
VUE 中使用rules的定义和校验规则
表单内容里面定义属性:<From ref="rulesForm" :model="rulesForm" :label-width="100" :rules="rules"> <FormItem label="名称" prop="name"> <Input v-model="rulesForm.name" placeholder="名称"/> </FormItem></Form>在data()里面写具体的规则:...原创 2021-07-12 17:18:27 · 1718 阅读 · 0 评论 -
VUE 时间转换的几种方式
时间转换做一个项目肯定会关系到很多的数据类型,数据类型之间都是可以转化的,，前端有时候从后端拿到的时间不符合标准，此时就需要转换以后再去使用，转换有两种方式，看你个人比较喜欢哪一种。这里已时间转换为例子过滤器filter全局过滤器在main.js写入// 时间戳过滤器Vue.filter('dateFormat', (dataStr) => { var time = new Date(dataStr) function timeAdd0 (str) { if原创 2021-07-12 16:30:30 · 2272 阅读 · 0 评论 -
Vue @click.stop 与 @mousewheel.prevent
@click.stop 点击子标签不需要触发父标签的事件<div @click="tempClick"> <div @click.stop="subTempClick"></div></div>盖上遮罩之后不需要下面内容支持滚动@mousewheel.prevent 表示添加了这个修饰符的标签以下的标签内容无法接受滚动事件<div class="mask"></div><div class="content".原创 2021-07-12 14:19:16 · 692 阅读 · 0 评论 -
【VUE】 input输入框设置type=number时，去掉后面的上下按钮
当 input type=number 时，去掉后面的上下按钮在style里面添加此段代码即可input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ -moz-appearance: textfield; }在现在项目中，使用的是vue+element，通常...原创 2021-07-12 10:18:33 · 6117 阅读 · 2 评论 -
css关于/deep/和＞＞＞和::v-deep的解释和用法
/deep/和>>>和::v-deep我们在style lang="scss"时经常用scoped属性实现组件样式私有化的时候，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，比如:.conBox /deep/ .el-input__inner{ padding:0 10px;}注意，VUE3.0下/deep/的使用可能会有报错如果/deep/报错，可采用::v-deep，效果基本一样，有人说原创 2021-07-06 17:48:24 · 20475 阅读 · 1 评论 -
vue ivew的input type=“number” 只能输入数字，且去右侧上下箭头按钮完美解决方法
方法：<template> <Input v-model="value" placeholder="微信内部号码" type="number" number="true" class="aaaa" :maxlength="20" clearable style="width:80%;ime-mode:Disabled" @on-keydown="changeaa(event)"> <span slot="prepend">微信</span&...原创 2021-07-06 17:32:30 · 1344 阅读 · 1 评论 -
VUE axios 后台请求地址可动态修改
1、方便多端打包，baseURL引用全局变量◇ static下新建config.js文件，设置一个BASE_APIvar BASE_API='/default'复制代码◇ 根目录下找到.eslintrc.js文件 修改配置修改完毕则可以全局使用这个变量（防止编辑器报错提醒）◇ 在index.html引入这个静态js文件，为方便打包可以再写一个打包后的路径2、封装的axios文件修改脚手架搭建的一般为baseURL:process.env.BASE_AP...原创 2021-06-09 16:51:48 · 6261 阅读 · 0 评论 -
elementUI表格 el-table-column 的 prop属性 如何通过判断转换值
将某prop 参数的值，转换显示为 自定义的值替换createTime那一行：<el-table-column :label="htmlText.tbDate" width="80"> <template slot-scope="scope"> <span v-if="scope.row.createTime == 0">正常</span> //这里使用===还是==得看返回值是什么类型的，需不需要转换啥的，自己尝试一下就..原创 2021-06-09 10:14:21 · 18161 阅读 · 1 评论 -
npm run 时报错：This is probably not a problem with npm 错误的解决方法记录
产生的错误解决方法：1、先删除掉 node_modules 文件夹2、 npm cache clean --force清理掉缓存3、 npm install 重新安装依赖包4、重新运行就欧克了————————————————原创 2021-05-19 11:01:28 · 3224 阅读 · 0 评论 -
npm run build无法打包的可能原因 npm ERR! missing script: build
结果报错npm ERR! missing script: build，后来发现package.json中scripts参数为"scripts": {"dev": "vue-cli-service serve","build:prod": "vue-cli-service build","build:stage": "vue-cli-service build --mode staging","preview": "node build/index.js --preview","l.原创 2021-05-14 17:23:57 · 1064 阅读 · 0 评论 -
VUE项目 解决：DevTools failed to load SourceMap：... net::ERR_HTTP_RESPONSE_CODE_FAILURE的问题
解决：DevTools failed to load SourceMap：... net::ERR_HTTP_RESPONSE_CODE_FAILURE的问题在Google chrome开发人员控制台中一直报此错误。（虽然只是一个警告，但是体验还是非常不好）先说解决方案：第一种：在Google chrome浏览器调试工具中，设置该调试工具，点开之后选择Settings关闭此选项虽然这种方式是隐藏错误的好答案，但它并不能使错误消失，只是您无法在控制器中看到它。另一种方法是原创 2021-05-07 16:52:20 · 4951 阅读 · 1 评论 -
VUE项目一直报错 GET http://localhost:9001/sockjs-node/info?t=1600331944800 net::ERR_CONNECTION_REFUSED
【问】为什么本地运行项目就会有这个请求呢？ 而且我的项目也没有装这个依赖,通过webpack的打包依赖图发现包很大，并且它在请求的时候会会有一个很长的stalled状态。导致我的首页加载时间过长。使用官方脚手架(vue-cli)搭建的项目启动的时候流程是这样：先启动一个本地 Web 服务器，然后将你的项目代码进行编译为浏览器能够直接运行的静态代码资源，然后放置到数据本地Web服务器的静态资源目录，再然后打开系统默认浏览器并访问这个本地 Web 服务器。同时建立"全双工[计算机网络用语，不理解自己百度哈]原创 2021-05-07 16:49:56 · 4339 阅读 · 2 评论 -
vue 文件导入导出/上传下载并与后端交互操作
上传/导入1、前端解析文件处理后再传递依赖—解析文件import Papa from 'papaparse'html<div class="_importIn"> <img title="导入文件" src="../../assets/image/tech/importIn.png" alt=""> <!--css中将导入文件隐藏在导入图片上,即通过绝对定位使input与img重合，且input在上opacity为0--> <inp...原创 2021-05-07 14:57:25 · 3874 阅读 · 0 评论 -
JavaScript 中 双感叹号语法、加号(+)操作符
1、javascript中的双感叹号语法（!!）var o={flag1:true}; var test1=!!o.flag1;//等效于var test1=o.flag1||false; console.log(test);//truevar test2=!!o.flag2;//等效于var test2=o.flag2||false; console.log(test);//false 而不是undefined 或 null由于对null与undefined用 !! 操作符时都会...原创 2021-05-07 14:44:09 · 1076 阅读 · 0 评论 -
Vue slot-scope的理解（适合初学者）
百度上已经有很多的关于slot-scope的文章，但我感觉都是那些以前没学好，又回头学的人，他们都使用了.Vue文件，我觉得有点不适合初学者，所以我就写一篇适合初学者的。先抛例程：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件之通过插槽(slot)分发内容</title> <script src="你的...原创 2021-04-07 11:24:10 · 571 阅读 · 0 评论 -
vue 遍历数组取出字符串用逗号拼接 及 forEach 和 for 的区别
数组字转符串拼接成逗号去掉最后的逗号 var arr=[2,3,4,5] var str = ""; for (var i = 0; i < arr.length; i++) { str += arr[i]+ ","; } //去掉最后一个逗号(如果不需要去掉，就不用写) if (str.length > 0) { str = str.substr(0, str.length - 1); }或者直接判...原创 2021-04-07 10:49:23 · 7005 阅读 · 0 评论 -
前端开发技术博客收藏
web前端开发技术 https://www.cnblogs.com/mengfangui/default.html?page=2 【内容说明：开发中问题记录与解决办法分享】原创 2021-04-07 10:47:27 · 137 阅读 · 0 评论 -
Vue 中判断浏览器的类型、识别浏览器
在开发过程中经常遇到的问题就是兼容性问题项目中使用到了vue这个框架, 并且使用了一些弹性布局的的盒子, 导致项目在不同浏览器中出现样式错乱的现象一个很简单的例子remove()方法在 IE 中不能运行，这就需要针对 IE 单独做处理 var userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; //.原创 2021-01-22 15:31:25 · 4598 阅读 · 1 评论 -
安装node、vue、依赖包、demo下载与运行
node.js下载 http://nodejs.cn/download/淘宝 NPM 镜像https://npm.taobao.org/downloading WebStorm! https://www.jetbrains.com/webstorm/download/download-thanks.html?platform=windowshttps://www.jetbra...原创 2019-08-24 16:06:07 · 700 阅读 · 0 评论 -
vue一次注册多个全局组件
项目中肯定会常用的一些基础组件，比如弹窗，toast之类的，要是在每个页面去引入的话那也太麻烦了，还好vue提供了一个全局注册组件的apiVue.compomentVue.component('my-component-name', { // ... 选项 ...})然后在入口文件main.js里import需要的组件，使用Vue.compoment注册即可// src/main.jsimport model from '@/components/BaseModel'import原创 2020-12-15 14:52:19 · 3108 阅读 · 0 评论 -
Linux安装nginx及部署vue项目
一、下载nginx使用的版本是：nginx-1.19.4.tar.gz官网：http://nginx.org/en/download.html百度网盘：链接：https://pan.baidu.com/s/1knGWwg-Sk2CxtwnTqTgqqw提取码：t3fe二、连接服务器（本人使用：SecureCRT）1、创建nginx目录：mkdir nginx2、cd nginx3、配置nginx安装所需的环境yum install gcc-c++...原创 2020-12-09 16:12:23 · 3439 阅读 · 0 评论 -
VUE相关技术社区集合（更新中）
1、Vue专业中文社区https://www.vue-js.com/原创 2020-08-07 15:24:28 · 671 阅读 · 0 评论 -
Vue开源项目汇总(史上最全)
转自：https://blog.youkuaiyun.com/aaronzzq/article/details/80936708目录UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例UI组件element★13489 - 饿了么出品的Vue2的web UI工具套件 Vux★8133 - 基于Vue和WeUI的组件库 iview★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui★6253 - Vue 2的移动UI元素 muse-ui★3...原创 2020-08-07 15:17:31 · 3165 阅读 · 0 评论 -
甘特图
https://npm.taobao.org/package/croud-vue-gantt/v/2.0.0https://www.npmjs.com/package/vue-frappe-gantthttps://dhtmlx.com/docs/products/dhtmlxGantt/10_task_constraints.htmlhttps://code.daypilot.org...原创 2019-10-23 09:58:18 · 1354 阅读 · 0 评论 -
NodeJs安装与配置淘宝镜像
1. 安装：https://nodejs.org/en/，一般下载安装最新稳定版本2. 配置2.1 查看安装结果与版本 node -v #查看安装版本 npm -v #查看npm安装版本2.2 使用国内的淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org12.3...原创 2019-10-22 16:14:12 · 981 阅读 · 0 评论 -
npm install 报错（npm ERR! errno -4048，Error: EPERM: operation not permitted,）解决方法
本文链接：https://blog.youkuaiyun.com/qq_35624642/article/details/78393035这个问题已经遇到过很多次，也试了很多方法。npm ERR! path E:\SouthernPowerGridProject\web_project\AutoOPS\autoops\node_modules\fsevents\node_modules\dashdash...原创 2019-10-22 16:13:15 · 6063 阅读 · 1 评论 -
Vue中slot的使用（通俗易懂）
个人理解：是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参；开发背景(slot出现时为了解决什么问题)：正常情况下,<Child><span style=”color:red;”>hello world</span></Child>在组件标签Child中的span标签会被组件模板templa...原创 2019-04-12 19:02:44 · 881 阅读 · 0 评论