分类：Vue

2020
10-08

VUE 单页面使用 echart 窗口变化时的用法

VUE 单页面使用 echart 窗口变化时的用法 在VUE项目中，为了使echart在窗口变化时能够自适应，要用到window.resize=function(){.......};但是我在项目刚开始的时间就有一个地方的高度变化使用了window.resize，在里面再次使用会覆盖掉原来的，所以在里面图表使用时可以用window.addEventListener('resize',this.resizeFu,false);resixeFu就是图表变化时的方法resizeFu(){letdiv=document.getElementById('changeData');if(div&&this.changeData.DataTi... 继续阅读 >
2020
10-08

解决vue单页面多个组件嵌套监听浏览器窗口变化问题

解决vue单页面多个组件嵌套监听浏览器窗口变化问题 需求最近公司有个大屏展示项目（如下图）页面的元素需要做响应式监听，图表需要跟着窗口响应变化问题每一个图表都被我写成了一个组件，然后就在每一个组件里写了一串代码，监听浏览器变化结果只有父组件的代码生效mounted(){window.onresize=()=>{//当窗口发生改变时触发//};}原因经简单测试后发现，同一个路由页面只能注册一次浏览器窗口监听事件，第二次注册的会覆盖第一次注册下边代码即可测试mounted(){window.onresi... 继续阅读 >
2020
10-08

Vue Render函数原理及代码实例解析

简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h虽然在render里使用createElement函数创建DOM节点不是很直观，但是... 继续阅读 >
2020
10-08

vue - props 声明数组和对象操作

我就废话不多说了，大家还是直接看代码吧~props:{array:{type:Array,default(){return[]}},object:{type:Object,default(){return{}}}}补充知识：Vue项目中，要保证某个部分的高度，应该怎么设置看代码吧~.iconsoverflow:hiddenheight:0padding-bottom:50%background:green以上这篇vue-props声明数组和对象操作就是小编分享给大家的全部内容了，希望能给大... 继续阅读 >
2020
10-08

vue项目,代码提交至码云,iconfont的用法说明

vue项目,代码提交至码云,iconfont的用法说明 一、前期准备首先得有一个码云账号，账号名最好是英文，用于线上仓库其次下载一个git到电脑，因为很多git命令，cmd命令行识别不了最好再有一个Iconfont账号，很多前端用到的图标就不用再自己画了，直接添加到项目下载下来就可以用了还需要用到的有node二、建立项目1、首先在码云上新建一个私有的项目（如果项目是共有的，那么所有人都能看见，一般设为私有，然后将项目组的人拉进来就可以了），使用READERME文件初始化这个项目，语... 继续阅读 >
2020
10-08

vue如何使用外部特殊字体的操作

vue如何使用外部特殊字体的操作 话不多说先看效果：我这里使用的是“优设标题这种字体”，接下来就是实现步骤了：1、先在百度上下载所需要的字体ttf文件2、在src文件夹新建common文件夹再建font文件夹3、在font文件夹里新建font.css文件，以及把下载好的ttf文件放入font.css内容如下4、在App.vue的style里引入font.css文件5、在需要用到特殊字体的地方，把font-family:”自定义字体名”,这里的优设标题就是在font.css文件里自定义的字体名这样就实现使用特殊字... 继续阅读 >
2020
10-08

Vue性能优化的方法

今天来谈一谈Vue中一些性能优化的问题，仅仅是个人使用中的一些小心得，来，今天我一句废话不多说，直接上内容好吧1.v-if和v-show的使用，我们都知道这两个都可以控制显隐，那我们用哪个呢，个人觉得要从两个方面入手来确定使用哪个，1.权限的问题，只要涉及到权限相关的展示用v-if比较好2.切换地频率，如果频繁的切换我们用v-show，不频繁的切换用v-if其实两者各有优缺，就看你是怎么选择了，用v... 继续阅读 >
2020
10-08

vue props default Array或是Object的正确写法说明

vue props default Array或是Object的正确写法说明 1、错误写法demo:{type:Array,default:[]}eslint语法报错：Invaliddefaultvalueforprop“demo”:PropswithtypeObject/Arraymustuseafactoryfunctiontoreturnthedefaultvalue.2、正确的写法应该是：demo:{type:Array,default:function(){return[]}}或是用箭头函数：demo:{type:Array,default:()=>[]}3、对象的箭头函数写法：demoObj:{type:Object,default:()=>({})}或是常规demoObj:... 继续阅读 >
2020
10-08

Vue props中Object和Array设置默认值操作

我就废话不多说，看代码吧~seller:{type:Object,default(){return{}}}seller:{type:Object,default:function(){return{}}}当父组件没有传这个值或者值是空时，输出的话，返回：下面这种是错误的seller:{type:Object,default:()=>{}}当父组件没有传这个值或者值是空时，输出的话，这时是返回underfind，在template中获取里面的值时，就报错。补充知识：解决vueprops默认值为数组或对象时报... 继续阅读 >
2020
10-08

vue prop传值类型检验方式

prop传值检验规则如果是prop是静态传值，则必须是String类型如果是prop是动态传值，则可以验证任意类型示例，如果必须要传一个Number，就必须使用bind//声明Vue.component("blog-post",{props:{postTitle:{type:Number,default:10000}},template:"<h3>{{postTitle}}</h3>"});//在template中调用，静态传值，值必定是String<blog-postpostTitle="54"></blog-post>//在template中调用，动态传值，值... 继续阅读 >
2020
10-08

Vue(定时器)解决mounted不能获取到data中的数据问题

vue中data定义data(){return{isok:10,}}在vue中使用定时器如下mounted是钩子函数mounted(){console.log(this.isok)//能获取isok10setInterval(function(){console.log(this.isok)//不能获取isok},3000);}这是为什么呢？原因就是：定时器的this是指向window的。那有什么方法来解决这个问题呢？答案是有的,两种第一种：用箭头函数：箭头函数中的this指向是固定不变（定义函数时的指向），在vue中指向vue;mou... 继续阅读 >
2020
10-08

vue setInterval 定时器失效的解决方式

vue setInterval 定时器失效的解决方式 正常情况下，在data里定义homeSetInterval保存定时器的ID值，在销毁组件是使用clearInterval方法是可行的但在使用了如下的keep缓存模式在使用销毁模式不行了应该使用离开路由器前方法beforeRouteLeave补充知识：vue中使用定时器的坑我们在使用vue的脚手架去搭建开发环境的时候，在A页面写入一个定时器去定时请求一个接口，但是我们去B页面，C页面的时候都会有这个接口定时请求的现象，那么怎样处理呢？第一步：首先我在data函数... 继续阅读 >
2020
10-08

vue 解决setTimeOut和setInterval函数无效报错的问题

vue 解决setTimeOut和setInterval函数无效报错的问题 1.在vue项目中的js代码语法与之前使用js和jquery还是有所出入的，现遇到一个点击按钮出现倒计时30S的效果相信大家对着两个函数都陌生，就是一个定时器，setTimeOut只执行一次，而setInterval会重复执行需要注意的是：在setInterval不用的时候一定要用clearSetInterval关闭定时器。2.按照最原始的倒计时效果，实现如下：//获取30s控制操作倒计时time(){if(this.timeWait<=0){this.timeWait=0;return;}else{... 继续阅读 >
2020
10-08

浅谈vue 组件中的setInterval方法和window的不同

vue组件中，this指向实例，【实例中重写了setInterval等一整套方法】。所以，千万不能和window下挂载的方法混用具体不同在于，window.setInterval执行完比后返回一个id，而vue实例中返回【定时器对象】，当然该对象中包含一个_id的私有属性因为clearInterval方法参数是id，所以最佳实践是统一使用window的方法，不要使用vue组件的方法vue中的定时器方法，要使用箭头函数，不要出现constthat=this的写法//正确的用法mou... 继续阅读 >
2020
10-08

vue监听dom大小改变案例

vue监听dom大小改变案例 需求描述：layout左边菜单栏收缩，右边的content区域的swiper宽度没有改变（没有图，朋友的问题，大体画一下）类似于点击折叠左边目录会变小，右边内容区域会变大，但是swiper在刚开始的时候就确定了宽度，所以我的想法是监听右边宽度大小去updata一下。但是我用vue的watch监听$refs.swiper.offsetwidth失败了！！！！但是宽度确实是在改变的很费解，先说一下解决方法把1、使用element-resize-detectorvarelementResizeDetectorMa... 继续阅读 >