vue
关注
分享
扫一扫
文章平均质量分 90
Facechat
Life is in the details
展开
-
vue 中echarts的使用
在项目项目中,需要用到图表echarts,在这就不做解释了,只是把项目中用到的echarts记录一下echarts官方地址:https://www.echartsjs.com/zh/index.htmlecharts w3c文档:https://www.w3cschool.cn/echarts_tutorial/vue-echarts:https://v-charts.js.or...原创 2019-10-30 15:29:14 · 713 阅读 · 0 评论 -
文字无限循环滚动
在项目实现过程中,需要实现文字垂直循环滚动,第一时间想到使用css实现,不过先介绍一下js实现.注:以下代码是基于vue的1.js实现原理: 实际上就是一个计时器定时执行 top ++ ,当执行到底部时,top 值置0,回到顶部继续执行滚动,但这个会有一个明显的缺点,用户会明显的的感觉到,滚动到底部时,有一个跳跃到顶部的过程实现: const...原创 2019-10-30 14:35:40 · 4760 阅读 · 0 评论 -
mavon-editor 保存的html显示问题
之前使用mavon-editor作为富文本编辑器，保存之后，在vue中直接使用v-html对返回的html数据进行展示。 预期的结果： 本应该和编辑过程中预览框里的样式相同。 实际结果： 没有任何样式。 查找问题： 1.第一次尝试 感觉应该是引入问题，but，仔细查看了很多遍...原创 2018-10-25 15:32:06 · 9996 阅读 · 8 评论 -
axios的二次封装-vue
axios基于promise用于浏览器和node.js的http客户端特点支持浏览器和node.js 支持promise 能拦截请求和响应 能转换请求和响应数据 能取消请求 自动转换JSON数据 浏览器端支持防止CSRF(跨站请求伪造)默认配置全局修改axios默认配置global.js文件信息/** * 全局常量配置 */let BASE_URL = ...原创 2018-10-26 11:03:54 · 623 阅读 · 0 评论 -
vue 数据更新不渲染
情景： 在使用vue element的table表格时，想对table的cell进行编辑。 点击修改实现如下功能：代码：<el-table-column label="名称"> <template slot-scope="scope"> <div v-if=...原创 2018-11-08 18:08:35 · 4663 阅读 · 0 评论 -
vue入门
什么是VUE？Vue.js（读音 /vjuː/, 类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据...原创 2018-12-22 20:00:16 · 864 阅读 · 2 评论 -
一个简单的web json编辑器
在实现需求的过程中，需要对权限进行编辑，具体的一张图表示吧。传入一个json，可以对其进行编辑，并有规则验证和回撤功能。当时收到需求的时候，第一时间想到的是手撸一个组件，但是撸到一半（不要多想，撸代码）发现坑太多，自己手撸太不划算。然后打算找一些符合或者稍微符合的第三方的插件，然后修改源码成自己需要的，然后github整理了一些基于vue实现的json编辑器。以下只是做一个简单...原创 2019-02-22 15:52:16 · 34100 阅读 · 6 评论 -
简谈vuex
Vuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex原理resetStoreVM(this, state)他就是整个vuex的关键// src/store.jsfunction resetStoreVM (store, state, hot)...原创 2019-04-03 13:49:32 · 369 阅读 · 0 评论 -
按钮级的权限控制
1.背景 近期在开发云服务项目，对于button级别的权限控制有一定的要求，但是一处处改的话比较吃力不讨好，费时费力，就想着做一个封装。基础环境：vue + element2.尝试 1⃣️封装button组件 第一想法就是封装一个button组件，然后在需要的地方引用，但是这个想法还是有个bug，不管button组件封装的如何，但...原创 2019-04-23 16:31:15 · 8420 阅读 · 0 评论 -
7个有用的Vue开发技巧
1 状态共享随着组件的细化，就会遇到多组件状态共享的情况，Vuex当然可以解决这类问题，不过就像Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是vue.js 2.6新增加的Observable API ，通过使用这个api我们可以应对一些简单的跨组件数据状态共享的情况。如下这个例子，我们将在组件外创建一个store，然后在App.vue组件里面使...转载 2019-07-05 15:34:38 · 6878 阅读 · 0 评论 -
electron-vue实战--MAC
electron-vue官方文档:https://simulatedgreg.gitbooks.io/electron-vue/content/cn/一、场景: 日前有个查询手机积分和归属地的桌面应用,当然可以直接使用electron创建项目,但我想直接使用vue实现基本功能,然后通过electron打包成不同环境下的桌面程序.二、安装 该样板代码被构建为vue...原创 2019-07-30 14:41:36 · 3019 阅读 · 0 评论 -
webpack优化-速度优化-Dll
一、DLLPlugin的使用 1、背景 对于vue项目而言，不可避免的会使用一些第三方的库，这些库本身并不会运行，我们也不会修改这些库的代码，但是每当我们修改了业务代码之后，这些库也会被重新打包，极大的浪费了时间，这时我们就需要使用工具预先把静态资源提前打包，以后修改源文件再打包时就不会打包这些静态资源文件了。而webpack在打包的时候，对于一些不经常更新的第三方库，...原创 2018-09-18 14:48:16 · 1433 阅读 · 0 评论 -
如何在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。事实上真的不完美？其实不然。最近为...转载 2018-09-03 09:45:44 · 1739 阅读 · 0 评论 -
vue webpack error
vue webpack error对于现阶段而言，浏览器只识别es5，而无法识别es6，简单的说，es6代码在浏览器里会报错。这是在webpack压缩文件时，出现未转化的es6语法，导致报错。简单的解决办法：找到错误点，例如当前的错误出现在node_modules里的jsdom文件夹下，你只需要修改webpack.base.conf.js文件，include中加入报原创 2018-01-16 21:59:01 · 911 阅读 · 0 评论 -
vue项目的webpack构建优化
vue项目的webpack构建优化值得一提的是，在说webpack的速度优化之前，按需加载和按需引入，是你先要做好的，之后再说速度优化的问题。按需加载，参考：https://segmentfault.com/a/1190000011519350对参考博客中的一些问题的补充，当前router.js中代码为const Index = () => import('@/compo...原创 2018-02-06 18:42:38 · 5121 阅读 · 0 评论 -
vue 混合开发 和 组件
vue 混合开发 和 组件刚开始接触vue时，没有什么组件意识，对于混合开发还没接触，一个页面的所有逻辑都写在一个.vue文件中，逻辑比较简单的还比较好，没有很明显的差别，但是对于逻辑比较复杂的，问题就出现了，首先，加载比较慢，而且代码冗长，不利于代码的维护和梳理。这个时候接触到组件，用组件开发，可以把一个模块分割为多个子模块，每个模块代表着一种逻辑，这样的好处就体现出来了，维护比较简单，原创 2018-01-26 21:59:31 · 5362 阅读 · 0 评论 -
electron + vue 协作开发桌面端项目
自从eclectron出现，到现在已经很久了，在这里，历史就不谈了，直接上干货。本人也是刚开始接触electron，只是对前端也能实现桌面开发有点好奇，就玩了一下，刚开始看electron的文档一脸懵，耐着性子看完了。着手写一个简单的项目，如果你着手写一个electron的项目，只需要具备两个条件，第一个你仔细阅读了electron的文档，并有了一定的了解和看法，第二你的js很熟练。所以相对于实现...原创 2018-06-13 18:52:47 · 29879 阅读 · 1 评论 -
2018年最值得关注的30个Vue开源项目
2018年最值得关注的30个Vue开源项目原文链接：blog.fundebug.com译者按： 学习优秀的开源项目是提高代码水平最有效的方式。原文: 30 Amazing Vue.js Open Source Projects for the Past Year (v.2018)译者: Fundebug为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。在过去的一年中...转载 2018-05-31 13:53:41 · 17089 阅读 · 4 评论 -
atom的使用（常用插件和vue语法高亮）
对于atom的使用，也是一次偶然，之前一直使用sublime，对于sublime的一些快捷使用也是比较熟悉了，换了一家公司，公司都在使用atom，入乡随俗吧，也改玩atom。发现atom还是很不错，和sublime很像，很多package都很全，具体的一些介绍，大家可以自己慢慢看。现在给大家说一些常用的插件：（如果插件安装，并且配置也已经完毕，但没达到期望的效果，退出重新打开就可以了）...原创 2018-06-01 16:02:52 · 21841 阅读 · 5 评论 -
mavon-editor + multer 制作图片上传
开始学习node，想开发一个简易版的blog系统，前端用vue，后端使用node，第一次接触后端代码，还是有点不熟悉的。不说没用的了，我想实现blog发表。1.第一次尝试把文字和图片提取出来，然后整个markdown数据全部存入数据库async saveNote (value, render) { let imgStr = render.match(/<img[^&...原创 2018-07-19 10:53:11 · 2437 阅读 · 3 评论 -
vue 中 滚动条始终定位在底部
vue 中 滚动条始终定位在底部滚动条定位在底部，首先想到的是，动态修改滚动条到顶部的距离等于div的高度，代码实现：var div = document.getElementById('data-list-content')div.scrollTop = div.scrollHeight但是问题来了，滚动条并没有到达底部，而是距离底部还有一点距离（一脸懵逼）估计是动态加...原创 2017-12-10 19:59:12 · 19132 阅读 · 2 评论 -
vue + node模仿简书
近期公司的事相对少了些，就打算学学node，毕竟一个不会node的前端不是一个好前端，不过发现自己学的不怎么样，数据库建表也是一塌糊涂，但是不管怎么说，项目也算是上线了，只能后期慢慢完善我那自己都不敢看的代码。在这里写这篇博客，只是记录一下，我在实现过程中碰到的坑。在这个项目里主要使用的是vue + node + mysql（他们都说节点配mongoDb，我就是喜欢用mysql），样式和排...原创 2018-08-09 14:25:58 · 1700 阅读 · 1 评论 -
Vue 列表渲染性能优化原理
Vue列表渲染性能优化原理Vue 是一个高效的 mvvm 框架，这得益于作者已经帮我们框架内部做了足够的优化，比如各个细节的缓存( parseText 结果的缓存，compile 编译结果的缓存等)。大列表是容易造成性能问题的地方，一不小心就会造成大量的重绘和重排。Vue 的列表渲染实现在 v-for 指令的 update 方法， 性能优化的大部分细节在 diff 函数。列表渲染时会为转载 2017-11-27 11:31:08 · 8756 阅读 · 0 评论