分类：VUE

2021
04-09

详解vue computed的缓存实现原理

本文围绕下面这个例子，讲解一下computed初始化及更新时的流程，来看看计算属性是怎么实现的缓存，及依赖是怎么被收集的。<divid="app"><span@click="change">{{sum}}</span></div><scriptsrc="./vue2.6.js"></script><script>newVue({el:"#app",data(){return{count:1,}},methods:{change(){this.count=2},},computed:{sum(){r... 继续阅读 >

2021
04-09

Vue 如何import服务器上的js配置文件

背景项目中有一个本地配置文件：//src/image-position.jsexportdefault{label:'首页',value:'home',data:[{label:'轮播',value:'carousel'}]}如何引用一个本地文件大家都知道：importImagePositionfrom'./image-position.js'现在需要把image-position.js文件丢到服务器上去，得到它的链接：xxx.com/static/imag…这个时候你直接引用文件地址自然是行不通的。importImageP... 继续阅读 >

2021
04-09

vue+canvas实现数据实时从上到下刷新瀑布图效果(类似QT的)

话不多说了，先上一张Demo图，实现的功能有：左侧图例、右侧瀑布图、鼠标移入弹出当前坐标对应的数据信息（有优化的空间，大家自由发挥）。图例使用到的插件这里推荐使用安装npm插件colormap瀑布图主体内容这里不多做解释了，都是一些原生标签还有vue绑定的事件，可以根据实际项目情况自己封装成组件，我这里是写在一起的。<template><div><divclass="content"><divclass="neirong"><!-... 继续阅读 >

2021
04-07

vue backtop组件的实现完整代码

效果：代码：<template><divclass="back-top"><div><imgsrc="imgsrc"class="line":class="isHide?'isHide':'isShow'":style="{display:(firstShow?'block':'none')}"@click="backTop"></div></div></template><script>exportdefault{name:"backTop",data(){return{firstShow:false,//初始化隐藏组件isHide:false,scrollFLag:true,}},created(){document.addEventListener... 继续阅读 >

2021
04-07

Vue中bus的使用详解

vue总线机制(bus)vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。bus适合小项目、数据被更少组件使用的项目，对于中大型项目数据在很多组件之间使用的情况bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过$on监听事件。vuex适用中大型项目、数据在多组件之间公用的情况。组件通信bus的使用在utils文件下下... 继续阅读 >

2021
04-07

vue实现登录注册模板的示例代码

模板1： login.vue<template><pclass="login"><el-tabsv-model="activeName"@tab-click="handleClick"><el-tab-panelabel="登录"name="first"><el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-itemlabel="名称"prop="name"><el-inputv-model="ruleForm.name"></el-input></el-form-item><el-form-itemlabel="密码"prop="pass"... 继续阅读 >

2021
03-30

vue+element+oss实现前端分片上传和断点续传

纯前端实现：切片上传断点续传。断点续传需要在切上上传的基础上实现前端之前上传OSS，无需后端提供接口。先上完整代码，直接复制，将newOSS里的参数修改成自己公司OSS相关信息后可用，如遇问题，请继续往下看。oss官方文档https://help.aliyun.com/document_detail/111268.html?spm=a2c4g.11186623.6.1111.5a583a07LknRUO代码允许所需环境：vue+element+ali-oss安装ali-oss：cnpminstallali-oss代码实现<template... 继续阅读 >

2021
03-30

vue移动端项目中如何实现页面缓存的示例代码

背景在移动端中，页面跳转之间的缓存是必备的一个需求。例如：首页=>列表页=>详情页。从首页进入列表页，列表页需要刷新，而从详情页返回列表页，列表页则需要保持页面缓存。对于首页，一般我们都会让其一直保持缓存的状态。对于详情页，不管从哪个入口进入，都会让其重新刷新。实现思路说到页面缓存，在vue中那就不得不提keep-alive组件了，keep-alive提供了路由缓存功能，本文主要基于它和vuex来实现应用里的页面跳转缓存。vuex... 继续阅读 >

2021
03-30

vue 数据(data)赋值问题的解决方案

总结一下我遇到的一个纠结很久的问题。在项目中需要用到后台的数据对前端渲染，使用到了vue整合的axios，使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data（）中定义的属性：执行后前端报错：原因：在请求执行成功后执行回调函数中的内容，回调函数处于其它函数的内部this不会与任何对象绑定，为undefined。解决方案：一）将指向vue对象的this赋值给外部方法定义的属性，然后在内部方法... 继续阅读 >

2021
03-30

Vue 重置data的数据为初始状态操作

在某些情况下，需要重新使用data中的数据，但是data中的数据已经被各种表单、变量等赋值，那么怎么重置data的值呢？1.逐个赋值...data(){return{name:'',sex:'',desc:''}}...//逐个赋值this.name=''this.sex=''this.desc=''这个方法比较笨，当然也可以实现效果，但是一个一个去重新赋值比较麻烦而且代码看起来也会比较乱。下面这个方法肯定是你喜欢的，一行代码搞定～2.使用Object.assign()MDN关于该方法的介绍... 继续阅读 >

2021
03-30

Vue2.x 项目性能优化之代码优化的实现

众所周知，Vue项目采用了数据双向绑定和虚拟DOM基础，在数据驱动代替DOM频繁渲染已经算是非常高效了，对开发者而言已经非常优化了，那为什么还会有Vue性能优化这一说呢？因为目前Vue2.x使用了webpack等第三方打包构建工具，并且支持其他第三方的插件，我们在项目中使用这些工具时可能不同的操作在运行或打包效率上会有不同的效果，下面就来详细说明优化的方向。1v-if和v-show的使用v-if为false的时候不会渲染DOM到视图，为... 继续阅读 >

2021
03-30

如何让vue长列表快速加载

vue-long-list-load，满足特殊条件的长列表加载。支持：1、各个节点高度不同且可自由设定2、各个节点可修改不影响加载效果3、可精确的滚动到指定位置。背景有个长列表渲染的需求，本来用vue-virtual-scroll-list的。但是每个节点的高度不一样，用着有点问题。如果也有相应的需求可以参考下我的方案。欢迎大家交流！vue-long-list-load满足特殊条件的的长列表加载。列表内各个节点高度不一，各个节点可以进行修改，定位到指定位... 继续阅读 >

2021
03-30

开发一个封装iframe的vue组件

VUE的基本组成单元，我看应该是组件。用VUE开发前端项目，就是开发一个个组件，然后搭积木一样，将项目搭建出来。组件包含在页面，或者是更大的组件里面。在这里，组件与页面的界限，好像并不明显。事实上，对于单页应用，只有一个页面。组件的好处，一是可以加强复用；二是能够将特定功能封装，利于调用；三是由于职责分明，组件高内聚，组件间低耦合，利于系统功能的优化、扩展和维护。好处多多。开发组件，主要有2部分内容：1、... 继续阅读 >

2021
03-29

Vue3 Composition API的使用简介

vue3.0在7月发布了rc版本，vue-cli4.5后也支持选择vue3作为备选版本可以体验了，vue3的正式版本相必也不远了。学不动了呀!!!!相比vue2.0版本(OptionAPI)，CompositionAPI（组合API）算是3.0的重大变更之一了。概述CompositionAPI主要灵感来源于ReactHooks，目的是通过一组低侵入式的、函数式的API，使得我们能够更灵活地「组合」组件的逻辑。示例<template><div>{{count}}</div><button@click="addCount">添加</button></... 继续阅读 >

2021
03-29

vue3常用的API使用简介

vue3.x已经发布了这么久，相关的生态也慢慢起来了，包括vite这个新的打包工具，在vue3.0学习过程中有一些实用性的api对比，希望能在开发中给大家做个示范，准确的使用对应的api去完成我们的项目开发生命周期的变更要特别说明一下的就是，setup函数代替了beforeCreate和created两个生命周期函数，因此我们可以认为它的执行时间在beforeCreate和created之间Vue2Vue3beforeCreates... 继续阅读 >

2021
03-29

Vue+node实现音频录制播放功能

实现效果：主要实现代码逻辑部分，具体页面结构就不一一介绍了。vue部分：安装recorderxcnpminstallrecorderx--save或者npminstallrecorderx--save在具体的组件中引入<script>importaxiosfrom"axios";import{Toast}from"vant";importRecorderx,{ENCODE_TYPE}from"recorderx";constrc=newRecorderx();exportdefault{data(){return{startime:null,endtime:null... 继续阅读 >