vue
关注
分享
扫一扫
CurryChou777
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue中使用layzr.js实现图片懒加载
vue中使用layzr.js实现图片懒加载文章目录vue中使用layzr.js实现图片懒加载前言一、Layzr.js是什么？二、使用步骤1.引入库2.设定图片3注意事项前言什么是懒加载：懒加载是一种网页性能优化的方式之一，它能极大的提升用户体验。比如图片加载一直是影响网页性能的主要元凶，一张图片超过几兆已经是很经常的事了，尤其是图片量大页面卡顿更明显。如果每次进入页面就请求所有的图片资源，可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。懒加载的原原创 2020-10-21 15:56:49 · 294 阅读 · 0 评论 -
vue-ace 代码编辑器
目录Ace Editor相关网址实现效果具体实现使用Ace EditorAce是一个功能非常强大的编辑器。它实现了语法着色，缩进，代码提示功能。且具有大量的主题，支持大量语言。但是官方并没有提供vue的官方版本，不过跟 vue 集成的步骤并不复杂。相关网址1、官方地址实现效果具体实现1、首先需要执行命令 npm install ace-builds -S 安装依赖2、创建一个名称为 codeEditor.vue 文件，代码如下<template> <div cl原创 2020-09-30 10:57:02 · 8228 阅读 · 6 评论 -
基于vue-cli3.x脚手架下打包的spa项目缓存机制方案
基于vue-cli3.x脚手架下打包的spa项目缓存机制方案欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所原创 2020-07-08 11:03:08 · 368 阅读 · 0 评论 -
vue首屏加载优化总结及整理
基于vue的页面加载优化详谈，主要列举了部分优化的点，包括客户端以及服务端原创 2020-06-28 16:21:41 · 3133 阅读 · 0 评论 -
html5 video视频播放时自动全屏，播放完时自动退出全屏
直接上代码注：这里是在vue中使用的，根据需要自行调整<template> <video ref="myVideo" class="w-100 h-100" controls="controls" :src="videoUrl"></video></template><script>export default { name: 'video', mounted() { const myVi原创 2020-05-09 17:26:43 · 5754 阅读 · 0 评论 -
echarts自定义renderItem柱状图，每个系列柱子数不一样
话不多说，先上图业务需求是，在【前期库存中】，显示四年的数量；后面的1-12月每个系列中最多显示两个柱子。在echarts官方实例中，系列的数量是由 series 数组中的数量决定的，也就是说该数组中有几个数据项，就有几根柱子，但是每个系列项的柱子数是一样的。这样是不满足我的需求的。所以接下来就要开始寻找其他解决方式。后来发现了echarts提供了自定义的渲染方式，series-c...原创 2020-04-11 11:44:02 · 19054 阅读 · 21 评论 -
前端生成下载文件，兼容浏览器写法
通过获取后端接口，返回二进制内容，前端根据二进制数据生成文件这里以excel为例，具体生成文件可以修改文件名即可API_SYSTEMSET.logDownload(param).then(data => { let content = data let filename = '名称.xls' const blob = new Blob([content])...原创 2019-05-13 11:31:37 · 889 阅读 · 0 评论 -
element-ui中el-input数字和小数输入
oninput ="value=value.replace(/[^\d]/g,'')"//只能输入数字oninput ="value=value.replace(/[^0-9.]/g,'')"//只能输入数字和小数原创 2019-04-01 10:22:06 · 28758 阅读 · 2 评论 -
vue项目前端node部署方式
前端在开发完成之后，首先需要部署，然后才能访问。当然打包部署的方式有很多种，这里简单介绍一下使用vue开发时，前端简单进行打包并部署的方式，方便快捷，毫不费力。首先在根目录下增加两个文件，分别是server.js和webpack-server-config.js，如图所示其中，server.js中内容如下：const express = require('express')...原创 2019-04-01 10:20:32 · 2930 阅读 · 0 评论 -
在 vue 的幸福国度，当 v-if 遇见 v-for
在vue这个幸福国度中，可惜的是v-if 遇到 v-for 注定不会有好的结果。更狠的是，我们永远不要让它们在一个地方遇见（不要把 v-if 和 v-for 同时用在同一个元素上）一般我们在两种常见的情况下会倾向于这样做：为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属...原创 2019-03-01 11:48:43 · 360 阅读 · 0 评论 -
vue浏览器全屏实现
项目中有要实现全屏的需求，而且全屏和非全屏的状态有差异。1、项目中使用的是sreenfull插件，执行命令安装npm install --save screenfull2、安装好后，引入项目，用一个按钮进行控制即可，按钮方法如下：toggleFullscreen() { if (!screenfull.enabled) { this.$message({ ...原创 2018-11-06 11:43:01 · 10176 阅读 · 1 评论 -
关于npm引入gojs以及去除水印的方法
最近项目中有需要画图的需求，挑来挑去还是选了go.js。虽然这个画图工具的效果略显老套，但是总起来说api还算友好，可以自定义自己想要的东西，灵活性也较好。但是但是，在项目开始之后想要npm安装一直错误，安装不上，执行的命令是npm install gojs --save检查多次，也没有发现问题，很是忧伤。最后执行下面的命令就ok了，别我问我为什么，我也不知道-/\-npm i gojs --sa...原创 2018-05-16 16:32:15 · 5306 阅读 · 18 评论 -
vue项目中引入noVNC远程桌面
注：看大家都在问按照以下方式会报错，原因是版本问题。看API文档新的版本，一些传参形式发生了变化，可能需要自己按照新版本的文档进行完成。如果不想改的话，我这里用的版本是0.6.11 首先，先简单介绍一下概念。VNCServer 是一个为了满足分布式用户共享服务器资源，而在服务器开启的一项服务，对应的客户端软件有图形化客户端 VNCViewer，而 noVNC 则是 HTML5 VNC 客户...原创 2018-01-23 18:03:09 · 12949 阅读 · 12 评论 -
vue-cli打包问题
关于npm run build打包问题在项目中使用vue-cli脚手架搭，由于实际项目问题，与自定义安装的项目目录略有差异。 自定义安装的项目是：test => src => 源码也就是在test项目下，安装node依赖，进入src下，是项目的源码部分。 然后实际项目部分是，test2 => src => vue1、vue2在src目录下是真正的项目部分，原创 2018-01-15 14:03:23 · 1108 阅读 · 0 评论 -
关于异步组件的部分
Vue的异步组件用法解释 首先上官网说明。 —— [ 异步组件 ]虽然官网有介绍，但是感觉不太适合新手，自己最开始看的时候也是一脸懵逼。 它只是做了概念的介绍，详细的使用方法和技巧并没有说明。【1】官方示例Vue.component('async-example', function (resolve, reject) { setTimeout(fu原创 2017-07-25 10:47:40 · 416 阅读 · 0 评论 -
node-sass安装失败问题
在node 中安装sass依赖总会出现各种各样的问题，第一次遇见这样的问题Cached binary found at C:\Users\ltzhouhuan\AppData\Roaming\npm-cache\node-sass\4.5.3\win32-x64-57_binding.node报了这个错误，大概含义是本地环境发生了一些改变可以手动下载，然后放到nod原创 2017-10-13 11:14:09 · 5418 阅读 · 0 评论 -
vue 实现表格合并
1 背景本身有vue进行渲染的数据表格，，但是出于整体考虑，需要对相同的列信息进行单元格合并。由于使用的是vue，想到MVVM是要用数据驱动的思想，所以考虑在Model做手脚，而不是渲染出数据来后做DOM操作，当然基本的CSS还是要有的。因此这个方法对所有 数据驱动的框架都有效，比如说Angular和React。最后的实现效果是这样的：2 思路原本的正常表格是这样的：<table >原创 2017-08-11 10:42:30 · 6111 阅读 · 11 评论 -
vue 生命周期
【1】官方的图示【2】代码示例<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script></head><body><div id="app"> <p>{{ mes原创 2017-07-25 15:26:16 · 718 阅读 · 0 评论 -
vue打包后样式会变化
有段时间发现本地npm run dev的时候样式好好的，npm run build后在手机里样式就变了，后面发现是一个插件搞的鬼，修改/build/webpack.prod.conf.js文件：...new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true }}),...重点就是这个cssProcessorOptions转载 2017-07-31 11:08:17 · 17728 阅读 · 4 评论