![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
加鸡腿
此人不懒,仍然什么都没有写
展开
-
package.json文件详解
packages.json文件里面配置的属性的含义。原创 2024-02-20 16:24:45 · 529 阅读 · 0 评论 -
表格翻页或切换页容量时,滚动条回到顶部
表格翻页或切换页容量时,滚动条回到顶部原创 2023-10-08 19:14:24 · 678 阅读 · 0 评论 -
element-ui实现表格多选和禁用;实现表格内单选操作;
多选和禁用;实现表格内单选操作;转载 2022-10-14 10:38:41 · 4427 阅读 · 0 评论 -
踩坑记录(31--40)
踩坑记录原创 2022-09-28 14:10:04 · 151 阅读 · 0 评论 -
踩坑记录(21--30)
踩坑记录原创 2022-09-09 14:46:02 · 346 阅读 · 0 评论 -
踩坑记录(10--20)
踩坑记录原创 2022-08-02 15:46:39 · 539 阅读 · 0 评论 -
踩坑记录(1-10)
摘要原创 2022-06-16 15:32:42 · 851 阅读 · 1 评论 -
子页面里created的事件提前执行
子页面里created的事件提前执行原创 2022-02-27 17:03:40 · 264 阅读 · 0 评论 -
vue报错:can‘t read properties of undefined(reading ‘0‘)的解决办法
vue报错:can't read properties of undefined(reading '0')的解决办法转载 2022-02-18 17:48:05 · 13577 阅读 · 0 评论 -
element-ui的el-table表格实现无限滚动,使用自带的infinite-scroll
背景:需要在el-tablel里实现滚动到底部加载更多数据问题:使用element自带的无限滚动,但是实际用下来发现,指令只能作用于当前绑定的元素上,如下: <ul class="infinite-list" v-infinite-scroll = "load" style="overflow:auto; height: 200px;"> <li v-for="(item, index) in tableData" :key="index">{{ item.n转载 2021-12-10 21:48:08 · 15092 阅读 · 4 评论 -
vue跳转的path和name的区别及使用
vue实现路由跳转有两种组合:name 和 params 组合使用path 和 query 组合使用区别:params 跳转过去的页面,若刷新页面,会丢失参数(若页面有相关操作,可能会报错)query 刷新不会丢失params传参在地址栏看不到query参数会显示在地址栏,若对地址栏保密有要求,则不建议用这个用法:this.$router.push({ name: 'hello', params: { id: this.info.id }})this.$router原创 2021-12-08 17:24:46 · 1226 阅读 · 0 评论 -
后台返回的时间戳(13位)如何放到el-date-picker(转化为时间格式)
把:value-format=“yyyy-MM-dd HH:mm:ss”改为::value-format=“timestamp”或者去掉参考:使用饿了么el-date-picker里及如何将后台给的时间戳js转化为时间格式原创 2021-11-07 21:00:58 · 1267 阅读 · 0 评论 -
[Vue warn]: Invalid prop: type check failed for prop “disabled“
[Vue warn]: Invalid prop: type check failed for prop “disabled“翻译:属性无效:属性“禁用”的类型检查失败。应为布尔值,得到的字符串值为“isdisabledFn()”解决:代码中:disabled是布尔值,但判断语句结果不是布尔值,进行转化即可。...原创 2021-11-07 20:57:27 · 410 阅读 · 0 评论 -
data里有,但是propery or method ‘‘ is not defined
查了一下午吧,原因是:data写成了date错误:date (){}正确:data(){}原创 2021-04-07 16:56:35 · 248 阅读 · 0 评论 -
vue子组件的created和mounted中获取不到props中接收到的值
父子组件通信:父组件中通过v-bind绑定传送,子组件通过props接收例如:父组件:<template> <div> <div> <h2>标题</h2> </div> <chart :chartData="chartData"></chart> </div></template><script>转载 2021-03-22 11:07:25 · 6770 阅读 · 2 评论 -
can’t read ‘label’ of undefined解决
原因是后端把数据库改了,数据是错的,改回来就好了[doge]原创 2021-03-22 10:46:53 · 286 阅读 · 1 评论 -
vue递归组件实现子向父传值
本次需求:实现每次点击折叠面板重新拿到高度// 效果如下图:所用框架:antd+vue难点:折叠面板点击之后,直接调用获取高度的方法,高度是滞后的,每次拿到的都是点击之前的高度;递归组件子向父传值,如果利用之前的emit,emit,emit,on传值,子组件里又同时包含子和父,无法使用解决办法:高度滞后,设置一个定时器使用eventBus传值核心代码:1. 在src目录下新加bus.js作为一个公共的实例import Vue from 'vue'export var bu原创 2020-10-29 16:57:33 · 1912 阅读 · 0 评论 -
组件之间的数据的传递 (子传父详细解析)
在父组件中在子组件上添加事件监听格式: <子组件 @子组件发回事件名="父组件要执行的方法" />代码:上面的addmsg是在父组件中收到了子组件发布这个事件后,要做的事情,所以还要定义一个方法:在子组件中,某一个时间通过this.$emit发出这个事件在子组件,点击按钮之后,执行函数,在函数代码中,通过this.$emit方法向父组件发送这个事件。此时,定义在父组件中的addmsg方法就会执行。this.$emit 格式This.$emit(“事件转载 2020-10-28 15:53:39 · 1107 阅读 · 0 评论 -
vue设置动态的栅格占位、水平偏移量、类名、样式
根据需求,有些样式需要在特定情况下触发,有的占位需要在特殊条件下展示,那么vue中设置动态如下:代码:<template> <a-row style="border: 1px solid"> <a-col :span=" bool1 ? '6' : '10'" :offset=" bool1 ? '6' : '2'" :class="{ 'left-style': bool1, 'right-style':!bool1 }"原创 2020-10-26 13:43:48 · 1711 阅读 · 0 评论 -
Expected indentation of 14 spaces but found 16
vue项目里,命令行报了很多错,几乎全是Expected indentation of 14 spaces but found 16类似这样的,翻译过来是:预期缩进14个空格,但找到16个空格,解决方法很简单,就直接删除多余的空格。然而这种问题太多了,只要用Tab键,就会有这种错。原因:ESLint是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。默认要求2个空格解决办法:不是关闭ESLint,因为用了它之后代码比较规范,应该刻意使用,养成良好的代码习惯。找到setti原创 2020-09-30 16:12:32 · 8154 阅读 · 0 评论 -
vue中set的简单使用
代码展示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>set</title> <script src="https://static.runoob.c原创 2020-09-30 15:08:11 · 187 阅读 · 0 评论 -
DOMException: Failed to execute ‘setAttribute‘ on ‘Element‘: ‘1‘ is not a valid attribute name.
项目报错,信息如下:DOMException: Failed to execute 'setAttribute' on 'Element': '1' is not a valid attribute name.页面刷不出来查找了半天发现是代码里多了一个1原创 2020-09-25 14:09:09 · 1921 阅读 · 1 评论 -
npm run dev 与 npm run serve
1、npm run dev 还是 npm run serve最近运行一些前端项目的时候,发现不同的项目有使用npm run dev,有的使用npm run serve,所以就很好奇,这是怎么回事,输入命令错误后,会报如下错,所以就想探究一下原因。下面是一些相关报错如下:npm run devnpm ERR! missing script: devnpm ERR! A complete log of this run can be found in:npm ERR! E:\nodejs\n转载 2020-09-24 10:00:46 · 2431 阅读 · 0 评论 -
vscode-settings.json配置
vscode从插件库里安装eslint和prettier点击左上角【文件】–>【首选项】–>【设置】把下面的内容粘贴进去即可{ "extensions.ignoreRecommendations": false, "team.showWelcomeMessage": false, "git.enableSmartCommit": true, "vsicons.dontShowNewVersionMessage": true, "git.auto转载 2020-09-22 15:06:21 · 10746 阅读 · 4 评论 -
vue报错:the template root disallows ‘v-for‘ directives解决办法
原代码:<template> <div v-for="(item, index) in apps" :key="index"> {{ item.name}}</div></template >报错:the template root disallows 'v-for' directives原因:根元素只能有一个,v-for是个循环,它返回更多的元素,所以v-for放在根元素上Vue会不知道怎么渲染。代码改进:(添加根节点)<te原创 2020-09-21 17:15:32 · 6968 阅读 · 0 评论 -
vue 组件传值 父子组件传值,兄弟组件传值
父子组件中的传值父向子 v-bind props<!-- 组件使用v-bind传值 --> <router :msg="msg"></router>子组件:<p>子组件 ----- {{msg}}</p> props: ["msg"], //props接收props:验证props: { // fooA只接受数值类型的参数 fooA: Number, // fooB可以接受字符串和数值类型的参转载 2020-09-10 13:52:30 · 501 阅读 · 0 评论 -
provisional headers are shown解决办法
成功请求过一次,第二次再看,点击提交按钮,没有任何反应,看newwork里的信息,发现Request Headers一栏报这个问题:provisional headers are shown网上查了很多办法,也设置preventDefault了,也隐身窗口看了,都是这个报错,换个浏览器干脆打不开这个网页,比较乌龙的是解决办法很简单,后台断点断住了,不能往下走,但是我明明按了F9下一步,也没有解决,应该是以前打了断点没取消,所以这次的问题比较蠢,记录一下。以后打完断点一定记得取消。在IDEA里查看所有原创 2020-08-27 14:48:22 · 1443 阅读 · 0 评论 -
Unknown custom element: - did you register the component correctly?
ant design结合vue项目报错,出现如下问题:原因:按需加载,剔除掉了一些不需要的框架组件,减少了编译支持库包大小。当需要更多组件依赖时,在文件加入即可解决:找到components_use.js 文件,import { autoComplete, }Vue.use(autoComplete)保存刷新即可...原创 2020-08-21 10:51:21 · 678 阅读 · 1 评论 -
vue获渲染页面后获取内容高度
页面使用了组件,渲染完之后获取到的高度明显不对,原来写在mounted里getHeight()获取不到。解决办法:用$nextTickVue.nextTick( [callback, context] )法一:在请求成功之后调用:this.$nextTick(() => { this.getHeight();});我用了这种可以使用。法二:假如法一拿不到,就用watch当获请求成功获取到值(监测到值发生变化)之后,调用$nextTick参考:vue中如何获取元素正确的宽原创 2020-08-03 14:29:26 · 2762 阅读 · 0 评论 -
VUE项目中CSS设置动态宽度的方法
网上找到三种方法:一、使用cumputed首先你务必看Vue的官方文档。涉及到的基础知识有:绑定内联样式的使用computed的使用文档写的都是基础使用。那么在项目实战中如何使用,2步就能实现,下面提供一个参考方案:需求场景:获取当前手机屏幕高度,设置container div的可滚动区域范围。step1: 添加样式绑定<div class="container" :style="{height: scrollerHeight}"></div>step2: 添加转载 2020-07-15 11:13:06 · 10934 阅读 · 1 评论 -
vue在IE11中报错js语法错误2行字符1
网上查了许久,总结解决方案如下:可能与IE的某些插件冲突。请把所有无关的IE加载项全部禁用后尝试引用了不存在的js文件页面的某些文件在文档模型还没建立时就已经开始引用相关的节点我最后是通过禁用了IE中的插件才解决的。参考:IE网页js语法错误2行字符1,FF中正常...转载 2020-07-07 17:40:41 · 1232 阅读 · 0 评论 -
Vue项目在ie11浏览器点击跳转时无法跳转,报Loading chunk {n} failed,其他浏览器都没任何错误,解决方法
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。但是这个问题的根本原因没有被找到,因为这个问题出现的偶然性太高了,而且有的手机上会出现,有的不会,用模拟器不会出现,用真机又会出现,不知道是网络原因还是webpack的bug。在github、stackoverflow等各种地方也找不到原因和解决方案,这是github上关于这个问题的讨论:Loading chunk {n}转载 2020-07-07 17:34:51 · 3531 阅读 · 1 评论 -
vue样式穿透
有时候在修改样式时,即便权重比较大还是起不了作用,网上查了方法,可以解决样式问题,如下:vue中的样式穿透法一:使用>>>外层 >>> 第三方组件{样式}.ant-card >>> .ant-card-head{ background: #fff}法一:使用/deep/外层 /deep/ 第三方组件 { 样式.ant-card /deep/ .ant-card-head{ background: #fff;}...原创 2020-06-29 22:09:36 · 223 阅读 · 0 评论 -
js实现点击button新开一个页面
点击button实现target=_blank,新开一个页面<button @click="goPage('https://www.baidu.com')">点我到百度</button>goPage(url) { window.open(url, '_blank') }原创 2020-05-13 22:43:13 · 1874 阅读 · 0 评论 -
icon should have 'type' prop or 'component' or 'children'解决方法
项目用了eslint,在vscode里安装eslint插件,icon下面出现红曲线,鼠标悬浮上去,右边会显示【Quick Fix…】,点击它,会出来三个选项,选择第一个【Disable no-unused-vars for this line】,即可自动添加一行注释,如下:// eslint-disable-next-line no-unused-vars...原创 2020-04-22 15:15:25 · 3480 阅读 · 0 评论 -
vscode如何查询某个文件
众所周知,VS code有一个查询的图标,但是不是我要的查找方式这里查找的是文件里的内容,查询文件名不太管用。解决办法:快捷键ctrl+p可弹出弹框,输入文件名即可查询如下:...原创 2020-04-03 11:09:20 · 6119 阅读 · 0 评论 -
element-UI的表格点击某一行触发事件
事件名说明参数row-click当某一行被点击时会触发该事件row, column, event举个栗子: 1 <template> 2 <el-table 3 :data="tableData" 4 stripe 5 @row-click="handdle" 6 style="width: 1...转载 2019-11-21 11:18:09 · 12162 阅读 · 0 评论