分类：Vue

2020
10-08

解决vue组件销毁之后计时器继续执行的问题

直接上代码，以下window.setTimeout(function(){if(this&&!this._isDestroyed){//_isDestroyed组件是否被销毁return;}window.location.href="/serverMonitor?t="+newDate().getTime();}，5000）很粗暴的方法，在执行之前看是否被销毁就行，第二种方法，调用路由组件内的钩子函数beforeRouteLeavebeforeRouteLeave（to，from，next）{clearTimeout（window.timer）；next（）；}补充知识：vue销毁时事件，created... 继续阅读 >

2020
10-08

vue 实现setInterval 创建和销毁实例

问题setInterval是间隔调用，与之类似的还有setTimeout。这两个API通常用来做ajax短连接轮询数据。比如有一个logs.vue是用来展示某个正在执行的进程产生的日志：<template><div><pv-for="iteminlogList":key="item.time"><span>{{"["+item.time+"]"}}</span><span>{{item.log}}</span></p></div></template><script>import{Component,Vue,Watch,Prop,Emit}from'vue-property-decorator'impor... 继续阅读 >

2020
10-08

Vue清除定时器setInterval优化方案分享

两种方案清除定时器，开发者经常使用方案1，建议使用方案2方案1首先我在data函数里面进行定义定时器名称：data(){return{timer:null//定时器名称}},然后这样使用定时器：this.timer=(()=>{//某些操作},1000)最后在beforeDestroy()生命周期内清除定时器：beforeDestroy(){clearInterval(this.timer);this.timer=null;}方案1有两点不好的地方，引用尤大的话来说就是... 继续阅读 >

2020
10-08

解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题

问题：从第一个页面跳转到第二个页面后,如果停留在第二个页面，定时器还在运行。如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时，也会出现重复创建setTimeout的情况。原因：当我们刷新页面时，会将当前页面之前创建的setTimeout以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的。data(){return{ct:null}}，methods:{start(){this.ct=setTimeout(()=>{that.countdown(end)},1000)}end()... 继续阅读 >

2020
10-08

Vue 解决父组件跳转子路由后当前导航active样式消失问题

举个栗子，导航栏如下图，当前新闻资讯的路由是：localhost:8083/#/new，导航栏样式如图所示：随便挑个新闻点击后会跳转到子路由：localhost:8083/#/new/newDetail，这时候新闻资讯的主路由style样式出现消失的问题，如下图：style代码：.router-link-exact-active{color:#8fc526!important;border-top:4pxsolid#8fc526!important;}router.js代码：{path:'/new',name:'new',component:news,children:[{pat... 继续阅读 >

2020
10-08

Vue切换组件实现返回后不重置数据,保留历史设置操作

版权1、<router-view></router-view>外层包围<keep-alive></keep-alive>keep-alive作用将组件实例缓存下来<keep-alive><router-view></router-view></keep-alive>2、清除组件缓存使用keep-alive的exclude="组件名"属性<keep-aliveexclude="home"><router-view></router-view></keep-alive>补充知识：vue简单的页面刷新或者跳转页面的数据保存问题当我们想刷新页面也保存当时的数据的时候，会遇到这样那样的问题，其... 继续阅读 >

2020
10-08

vue 实现tab切换保持数据状态

页面做tab切换，由于组件每一次切换都会重新实例化组件，我们想要页面不论怎么切换都仍然保持tab里面的内容不会刷新，减少页面重新渲染以及减少请求实现方法：使用<keep-alive></keep-alive>包裹组件<el-tabsv-model="activeName"@tab-click="handleClick"><el-tab-panelabel="记录"><keep-alive><child1v-if="isChildUpdate"></child1></keep-alive></el-tab-pane></el-tabs>列表页面跳转详情，列表页面保持上一次操作... 继续阅读 >

2020
10-08

vue通过过滤器实现数据格式化

一、本节说明在使用插值表达式的时候，我们通常会有一种需求，就是将数据进行二次的格式化。VUE的过滤器的实现参考了linux的shell命令的管道的实现原理：即上一个命令的输出，是下一个命令的输入。所以过滤器可以串接使用：{{数据|过滤器A|过滤器B}}除了在插值表达式中可以使用过滤器，在后文中将要学习到的v-bind指令中也可以使用过滤器。用法是一致的，到时候我们再看一看。二、怎么做全局过滤器（定义一个用于做日期格式化... 继续阅读 >

2020
10-08

一文读懂vue动态属性数据绑定（v-bind指令）

v-bind的基本用法一、本节说明前面的章节我们学习了如何向页面html标签进行插值操作，那么如果我们想动态改变html标签的属性，该怎么办呢？这就是我们这节开始要讲的内容v-bind.二、怎么做“:”为v-bind的简写形式，也可称为语法糖三、效果四、深入在上图中将a标签的href属性值设置为toutiao，VUE实例将自动去data里面寻找toutiao属性进行值绑定。不只是a标签，所有的html标签属性都可以通过v-bind进行值绑定，然后通过... 继续阅读 >

2020
10-08

在Vue 中实现循环渲染多个相同echarts图表

在开发过程中我们常常需要，在一个页面中使用相同的图表来展示同级别的多个事物（如：同级别的多个不同id的仓库、同级别的多个不同id的设备等）。上图效果实现代码：<template><divclass="projectCost"><divclass="container"><divclass="wrapper"v-for="(item,index)inlist":key="index"><divclass="roseChart"></div>//使用class,不是id</div></div></div></template><script>exportdefault{data(){ret... 继续阅读 >

2020
10-08

详细分析vue表单数据的绑定

v-model的基本用法一、本节说明前面的章节我们学习了v-bind指定，可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的，那么视图是如何影响数据的呢？那就要学到我们这一节的内容v-model。v-model可以将表单输入绑定到对应的模型数据。二、怎么做我们通过v-model实现一个简单的需求通过表单input绑定模型数据message，表单数据变化data.message也发生变化然后通过Mustache表达式，将变化之后的message数据显示到视图... 继续阅读 >

2020
10-08

在vue中使用echarts(折线图的demo,markline用法)

公司最近在用vue开发项目，项目接近尾声了，趁休息时间写点demo——vue引入echarts（折线图的demo）主要是解决引入echarts，markline的使用（基准线）这是demo的效果图：vue脚手架不多赘述1.安装依赖cnpminstallecharts-S2.在main.js中引入echartsimportechartsfrom'echarts'3.在main.js中安装Vue.prototype.echarts=echarts;一般来说能正常挂载上组件，就可以在页面中正常使用了废话不多说上代码（因为自己也是小白阶段所... 继续阅读 >

2020
10-08

解决Vue + Echarts 使用markLine标线(precision精度问题)

在VUE实例中使用Echarts安装echarts依赖：npminstallecharts-s编写代码：引入echarts对象：鉴于准备工作中已经通过npm安装了echarts依赖，所以可以直接在vue文件中使用代码importechartsfrom“echarts”引入echarts对象：<script>importechartsfrom'echarts/lib/echarts'</script>注意：只引入了echarts还不能直接使用markLine（作为前端菜鸟爬坑了好久?）引入markLine对象：<script>importechartsfrom'echarts/... 继续阅读 >

2020
10-08

解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)

1.问题描述：在echarts弹框中嵌入echarts，在页面数据改变时，echarts视图不更新；2.解决办法：数据更新时以为drawLine()函数在updated()里面执行（这种情况之前碰到过），后来发现热更新之后视图更新了，所以跟周期函数没有关系；参考了一下网上的一些资料，发现可以用vue中的watch()函数来监听数据的更新，一旦数据更新了，那么就在watch()函数中调用drawLine()函数，发现视图更新了，完美解决。补充知识：vueechartsline动态... 继续阅读 >

2020
10-08

在vue中使用Echarts利用watch做动态数据渲染操作

依旧直接上代码～首先安装引入Echarts，我是直接把Echarts挂到VUE全局变量上了//引入echartsimportVuefrom'vue';importechartsfrom'echarts';Vue.prototype.$echarts=echarts;<template><divclass="demo-container"><divref="chart_wrap"class="chart_wrap"></div></div></template><script>exportdefault{name:"demo",computed:{},data(){return{seriesData:[]};},created(){},mounted(){... 继续阅读 >

2020
10-08

vue-router之解决addRoutes使用遇到的坑

最近项目中使用了vue-router的addRoutes这个api，遇到了一个小坑，记录总结一下。场景复现：做前端开发的同学，大多都遇到过这种需求：页面菜单根据用户权限动态生成，一个常见的解决方案是：前端初始化的时候，只挂载不需要权限路由，如登陆，注册等页面路由，然后等用户登录之后，后端返回当前用户的权限表，前端根据这个权限表遍历前端路由表，动态生成用户权限路由，然后使用vue-router提供的addRoutes,将权限路由表动态添加到... 继续阅读 >