分类：vue

2021
02-21

如何管理Vue中的缓存页面

<keep-alive><router-view/></keep-alive>Vue中内置的<keep-alive>组件可以帮助我们在开发SPA应用时，通过把全部路由页面进行缓存(当然也可以有针对性的缓存部分页面)，显著提高页面二次访问速度，但是也给我们在某些场景带来了困扰，其中包含两个主要矛盾：缓存页面如何在合适的时机被销毁（keep-alive组件提供了三个参数来动态配置缓存状态，但是作用有限，后面分析）同一个路径如何缓存多个不同的页面(同页不同参)，比如... 继续阅读 >

2021
02-21

手动实现vue2.0的双向数据绑定原理详解

一句话概括：数据劫持（Object.defineProperty）+发布订阅模式双向数据绑定有三大核心模块（dep、observer、watcher）,它们之间是怎么连接的，下面来一一介绍。为了大家更好的理解双向数据绑定原理以及它们之间是如何实现关联的，先带领大家复习一下发布订阅模式。一.首先了解什么是发布订阅模式直接上代码：一个简单的发布订阅模式，帮助大家更好的理解双向数据绑定原理//发布订阅模式functionDep(){this.subs=[]//收集依... 继续阅读 >

2021
02-21

vue使用echarts画组织结构图

昨天，写了一篇关于圆环进度条的博客（请移步：Vue圆环进度条），已经烦不胜烦，今天又遇到了需要展示类似公司的组织结构图的功能需求，要冒了！！！这种需求，自己用div+css也是可以实现的，但是没有什么动画效果，我的css3又很差劲，而且项目中已经使用到了折线图、饼状图、柱状图之类的图表，用的还是百度的echarts，所以这个组织结构图之类的需求也就用了百度的echarts来实现了。以前用echarts写折线图、柱状图、饼状图的较多... 继续阅读 >

2021
02-21

vue 根据选择的月份动态展示日期对应的星期几

我等卑微的码农，依旧还得唱着“你我皆凡人，生在人世间，终日奔波苦，一刻不得闲，既然不是仙，难免有杂念，烦恼放两旁，工资摆中间，多少男子汉，秃顶又肥胖，加班的日夜，没有买保险”。虽一直反抗，却从未奏效。大老板们是梦想照进现实，我等是梦想撞见黑锅！牢骚了那么多，锅还得背，班还得加，code还得继续码！！！来，把标题中所提到的这个效果给实现一下吧。原理其实很简单，先得有一个选择年月的输入框吧，这里我用的是El... 继续阅读 >

2021
02-21

如何封装Vue Element的table表格组件

在封装Vue组件时，我依旧会交叉使用函数式组件的方式来实现。关于函数式组件，我们可以把它想像成组件里的一个函数，入参是渲染上下文(rendercontext)，返回值是渲染好的HTML(VNode)。它比较适用于外层组件仅仅是对内层组件的一次逻辑封装，而渲染的模板结构变化扩展不多的情况，且它一定是无状态、无实例的，无状态就意味着它没有created、mounted、updated等Vue的生命周期函数，无实例就意味着它没有响应式数据data和this上下文... 继续阅读 >

2021
02-21

如何封装Vue Element的table表格组件

在封装Vue组件时，我依旧会交叉使用函数式组件的方式来实现。关于函数式组件，我们可以把它想像成组件里的一个函数，入参是渲染上下文(rendercontext)，返回值是渲染好的HTML(VNode)。它比较适用于外层组件仅仅是对内层组件的一次逻辑封装，而渲染的模板结构变化扩展不多的情况，且它一定是无状态、无实例的，无状态就意味着它没有created、mounted、updated等Vue的生命周期函数，无实例就意味着它没有响应式数据data和this上下文... 继续阅读 >

2021
02-21

Vue实现圆环进度条的示例

数据展示，一直是各行各业乐此不疲的需求，具体到前端开发行业，则是各种各种图表数据展示，各种表格数据展示，烦不胜烦（繁不胜繁）！前几天刚做了折线图、柱状图、饼状图之类的图表数据展示效果，今天又碰到了类似圆环进度条的展示效果。天天跟数据打交道，天天跟接口打交道，项目做了不少，菜逼还是菜逼，都是泪啊！其实说白了，是自己对canvas不熟，对CSS3不熟，所以就找了一个现成的轮子：<template><divclass="content"re... 继续阅读 >

2021
02-20

vue实现禁止浏览器记住密码功能的示例代码

查找资料网上查到的一些方法：使用autocomplete="off"（现代浏览器许多都不支持）使用autocomplete="new-password"在真正的账号密码框之前增加相同name的input框使用readonly属性，在聚焦时移除该属性初始化input框的type属性为text，聚焦时修改为password使用type="text"，手动替换文本框内容为星号“*”或者小圆点“●”实现过程用到的字段data(){return{username:'',password:'',... 继续阅读 >

2021
02-20

Vue常用API、高级API的相关总结

最近手痒痒，玩儿了一下Vue3.0，很舒服，赶紧把这几期Vue2.0弄完，写一些3.0的东西。本文主要罗列和解析一些个人认为常用或有大用途的Api，作为自我总结的笔记和探讨。nextTick功能：添加在下次Dom更新循环结束之后的延迟回调，修改数据之后，可以获取更新后的Dom。用法：Vue.nextTick([callback,context])vm.$nextTick([callback])//用法2//作为一个Promise使用(2.1.0起新增)Vue.nextTick().then(function(){//D... 继续阅读 >

2021
02-02

Vue项目打包部署到apache服务器的方法步骤

vue项目在开发环境下，让项目运行起来，是通过npmrundev命令，原理是在本地搭建了一个express服务器。但是在服务器上就不是这样的，必须要通npmrunbuild命令来对整个项目进行打包，打包后会在项目目录下生成一个dist文件夹，内容如下：然后就是把这些文件丢到服务器上的某个文件夹下，我这里的文件夹名字是ibms遇到的问题：1.直接去访问http://www.xxx.com/ibms/，会发现网页是白屏的，什么都没有，这就比较奇怪了，其实是因... 继续阅读 >

2021
02-02

如何在vue中使用video.js播放m3u8格式的视频

@[toc]注意："vue":"^2.6.11","video.js":"^7.10.2","videojs-contrib-hls":"^5.15.0","mux.js":"^5.7.0"一、安装yarnaddvideo.jsyarnaddvideojs-contrib-hls//这是播放hls流需要的插件yarnaddmux.js//在vue项目中，若不安装它可能报错二、引入videojs1.在src文件夹下新建plugins文件夹，并新建video.js文件；video.js文件的内容如下：import"video.js/dist/video-js.css";//引入video.js的cssimporthlsf... 继续阅读 >

2021
02-02

Vue 实现可视化拖拽页面编辑器

在线地址(用梯子会更快些)可视化页面编辑器，听起来可望不可即是吧，先来张动图观摩观摩一番！实现这功能之前，在网上参考了很多资料，最终一无所获，五花八门的文章，都在述说着曾经的自己！那么，这时候就需要自己去琢磨了，如何实现？需要考虑到：拖拽的实现数据结构的定义组件的划分可维护性、扩展性对象的引用：在这里是我感觉最酷的技巧了，来一一讲解其中的细节吧！！拖拽实现拖拽事件这里使用H5的拖拽事件，主... 继续阅读 >

2021
02-02

vue-video-player 断点续播的实现

最近的项目中需要实现视频断点续播的功能，一听到这个功能。内心方张了..但却又有点小窃喜，小懵乱。抱着求学态度去挑战一下。1.安装插件npminstallvue-video-player--save2.Main.js引入组件importVideoPlayerfrom'vue-video-player'require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')Vue.use(VideoPlayer)3.页面使用组件<el-tree:data="ChapterOptions":props="defaultProps"... 继续阅读 >

2021
02-01

如何使用RoughViz可视化Vue.js中的草绘图表

介绍图表是数据的图形表示，用于使数据集更易于阅读，并且易于区分各部分。虽然大多数用户习惯于看到简洁而正式的图表，但一些用户更喜欢看到手绘或素描的图表，这就是roughViz的用武之地。roughViz是一个基于D3.js和Rough.js的JavaScript库。该库旨在帮助构建看起来像草图或手绘图的图表，如下例所示。在本指南中，你将学习如何使用vue-roughviz在Vue.js应用程序中显示类似草图的图表，以及如何使用vue-cli配置Vu... 继续阅读 >

2021
02-01

vue监听键盘事件的相关总结

按键修饰符在监听键盘事件时，我们经常需要检查详细的按键。Vue允许为v-on在监听键盘事件时添加按键修饰符：<!--只有在`key`是`Enter`时调用`vm.submit()`--><inputv-on:keyup.enter="submit">你可以直接将KeyboardEvent.key暴露的任意有效按键名转换为kebab-case来作为修饰符。<inputv-on:keyup.page-down="onPageDown">为了在必要的情况下支持旧浏览器，Vue提供了绝大多数常用的按键码的别名：-enter ... 继续阅读 >

2021
02-01

Vue 实例中使用$refs的注意事项

在开发过程中，经常会通过实例的vm.$refs(this.$refs)取得通过ref注册过的组件，并进行相应操作，但存在取不到元素的情况，其根本原因是因为$refs只能取得mounted（渲染）之后的元素。例如，在这种情况中，若flag从真值切换到假值取不到节点是正常的，因为v-if如果为假值，那么该节点不会被渲染。但如果从假值切换到真值时，也可能取不到节点，这是因为渲染需要时间，通常可以使用$nextTick()解决。...<el-tablev-if="flag"ref="... 继续阅读 >