
vue实战
文章平均质量分 66
Poker_旭
用心做事,无悔我心
展开
-
vue父组件传数据给子组件,子组件watch这个数据第一次有效,刷新页面就无效(同时解决请求数据时间过长,导致子组件过早渲染而无法获取到最新数据的问题)
需求&问题本文废话有点多,但我觉得有些业务场景应该也会有人遇到,索性还是把需求和问题都写详细点,看各位路过的朋友不说能解决你的问题,哪怕是对你有一点点帮助的,我也就很高兴了的????,嫌废话多的,直接看图应该就懂我的意思,我只留了关键的代码…问题1:本来是要向后台请求数据的,但是由于数据过大,后台需要处理,所以整个请求时间过长,可是我就是要拿到这个请求数据传给子组件,但实际上假如请求时间需要5s,而子组件渲染完成只需要3s,那就取不到数据了,我想到的解决办法有:法1: 在子组件使用原创 2021-09-23 12:47:49 · 3144 阅读 · 1 评论 -
Echarts点击画布任意位置获取当前位置所对应的坐标值
需求:工作时遇到的一个需求说:给用户展示图表时,希望用户在图表中选取一块又一块的,拿出来用于后续的数据分析思路及问题:既然要选取一段一段的数据,我采取的办法就是用户点一次,我标记此时的x轴,表示起点,用户再点一次,我再记录此时的x轴,表示终点,然后在表中的配置项加个蒙版就是了。问题:只能点击已经标注的地方,无法点击我想要的任意地方,且就算可以能点击任意地方,也无法获取当前的x坐标的值,只能获取它的偏移值解决办法:const assess_chart = echarts.init(this.$原创 2021-08-25 17:59:25 · 6389 阅读 · 8 评论 -
Vue-codemirror的配置信息
value: string|CodeMirror.Doc编辑器的起始值。可以是字符串,也可以是文档对象。mode: string|object使用的模式。如果没有给出,这将默认为加载的第一个模式。它可以是一个字符串,可以简单地命名模式,也可以是与模式关联的MIME类型。或者,它可以是包含模式配置选项的对象,具有name命名模式的属性(例如{name: “javascript”, json: true})。每种模式的演示页面都包含有关模式支持的配置参数的信息。您可以通过检查CodeMirror.mode原创 2021-08-01 23:06:21 · 4935 阅读 · 0 评论 -
Vue中computed的使用
1、需求:在vue模板中要计算某些属性,如下我想要讲mes的内容给反转过来,即本来是helloworld,我要它变成dlrowolleh方法1:使用原生js操作缺点:在模板里面会呈现的非常复杂,不够简洁方法2使用vue中computed属性优点:在模板做中只需要写上函数名即可,达到一个简洁的目的,当页面模板中有大量的这样的步骤时,我们就可以统一在computed中处理,而不是在模板中写一大堆方法...原创 2021-03-17 17:16:38 · 454 阅读 · 0 评论 -
Vue中移动端,只用px即可实现适配,摆脱响应式的困难!
*前言:适配解释:所谓移动端适配就是能够在不同手机尺寸中达到同样的样式效果,避免在大屏幕手机中,字体太小,小屏幕手机中,字体太大等等问题。实现原理:通常使用的是px单位,但适配中是用rem单位来做的,因为rem单位是font size of the root element (根元素的字体大小),意思是每个浏览器有不同的默认根节元素的字体大小,假如你的浏览器的默认根元素字体大小是12px,那么1rem = 12px。假如你的按钮大小宽高分别是1rem * 1rem,换算过来就是12px * 12x,那原创 2021-02-23 14:24:32 · 1214 阅读 · 0 评论 -
使用cordova将Vue项目打包成app完整详细流程
环境搭建与配置一、下载jdk并配置下载地址:https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html往下滑,找到你自己电脑合适的系统,我的是64位的,如下下好之后注意自己的安装目录就行,正常操作即可完成安装。*配置jdk1.打开环境变量,点击新建然后输入JAVA_HOME和你刚才安装的jdk的安装目录,随后点击确定。2.双击path之后,新建两个环境变量:%JAVA_HOME%\jre\bin原创 2020-11-08 11:45:35 · 4305 阅读 · 10 评论 -
Vue中触发子组件的事件时如何阻止父组件的事件的触发(阻止冒泡事件)的分析与解决
这有一个父子组件,如下:子组件函数:deleteClass (classId) { console.log(2); }父组件函数:getMession (item) { console.log(1); }*当点击子组件时,会先触发子组件,再触发父组件:*而当点击父组件时,只会单纯地触发父组件:解决办法:将子组件的事件改成@click.stop=="deleteClass(item)":当我们再次点击子组件时,原创 2020-11-01 11:37:50 · 7328 阅读 · 0 评论 -
Vue中引用qs第三方库
1.进入项目根目录,打开cmd,输入npm install qs安装qs2.打开你想应用组件处,import qs from 'qs',导入第三方库,如下:常用方法:1.qs.parse():将查询字符串转换成json字符串,如下:2.qs.stringify():将json字符串转换成查询字符串,如下:...原创 2020-10-25 23:01:34 · 6260 阅读 · 0 评论 -
vue编程式路由小笔记
首先是来到登录页面,如下:当我点击登录按钮时,进行编程式导航,如下和设置路由一样,只不过这里就不需要设置compoent了,因为在router.js里面我已经设置这个这个路由以及compoent组件了,如下*注意:编程式导航一般只用到this.$router.push()和this.$replace()两种,前者意思是跳转后会堆加一个页面,点了返回,就会返回到历史页面,而后者它是替代当前页面,点了返回,会回不到上一个页面,了解更多路由请点...原创 2020-10-18 19:19:09 · 130 阅读 · 0 评论 -
vue-cli3.0中axios请求跨域问题,有效!!!Uncaught (in promise) Error: Request failed with status code 404
一开始未设置时如下:以及报错如下:解决办法:1.在你的项目的根目录里面的vue.config.js文件添加如下内容(没有这个文件直接新建即可)*内容:module.exports = { publicPath: './', productionSourceMap: false, devServer: { proxy: { '/test': { target: "https://188.62.63",//这个是你要访问的接口地址 changeOrigin: tr原创 2020-10-13 21:23:56 · 3220 阅读 · 7 评论 -
vue中使用vant组件库的轮播图懒加载时无法使用本地图片
1、使用图片链接时*可直接套用模板,如下:2如果要使用本地图片的话需要加上require(),如下:原创 2020-10-05 17:33:57 · 1173 阅读 · 6 评论 -
vue-cli脚手架搭建时基础设置说明
基础选项Check the features needed for your project:(✳) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行( ) Progressive Web App (PWA) Support// 渐进式Web应用程序(✳) Rout原创 2020-10-05 11:18:19 · 441 阅读 · 0 评论 -
Vue中全局组件与子组件的区别及其用法(好理解!)
放码过来*联系:从这里可以看出,全局组件的使用方法就是Vue.compoent(参数1,参数2),其中参数1是这个组件的名字,你自己取;而参数2则是一个对象,和局部组件那个对象一样*区别:引用局部组件的时候,要先在其父组件里面的compoents:{}里面去声明,才能在template:里面去使用;而引入全局组件的时候,直接在你想要的组件里面的template里面使用即可,不用再去声明了...原创 2020-09-26 11:55:38 · 543 阅读 · 1 评论 -
Vue自定义局部组件的创建
1、先在Vue实例外部var一个对象,这个对象和vue实例里面的内容差不多,什么data啊、methods啊、template啊等等属性都有,但是唯独el挂载点这个属性没有,如下:2、在Vue实例里面的components中写入这个自己定义的组件名字叫App,但是由于App与外面的那个对象名名字一样,都是App,所以简写,(其中components的意思是组件,就是专门来存放自定义组件的),效果图如下:...原创 2020-09-25 22:36:59 · 617 阅读 · 0 评论 -
Vue实战axios中data和params的区别
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2020-09-20 20:23:54 · 1677 阅读 · 0 评论 -
vue实战中使用过滤器的使用以及时间戳的转换(不信你来看)
步骤:1、打开你的项目的根目录,用cmd打开,执行代码npm install moment -- save 即可安装moment插件,操作图如下:2、打开你要想使用moment的那个文件,然后在script内部引入即可,操作图如下:3、使用过滤器,让你的时间戳变成正常时间,操作图如下:*过滤器的格式: “变量 + 管道符 + 管道名称”,变量就是你要转换的时间戳,也就是图中的scope.row.publishTime,管道符就是中间那个竖线,管道名称是一个函数,会在vue实例中的filte原创 2020-09-20 16:26:05 · 404 阅读 · 1 评论