![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 58
ECMAScripter
这个作者很懒,什么都没留下…
展开
-
同事:这个页面的逻辑没什么能复用的,不抽组件也没什么影响吧?
最近在维护同事的一个项目时,发现有不少单个vue文件一千余行,同一个文件上有倒计时、有输入信息的表单;当时我就在想:是不是策划经常改需求或者排期紧急,所以没抽组件呢。原创 2022-11-16 01:14:57 · 635 阅读 · 5 评论 -
Vue.JS项目输入框中使用v-model导致number类型值自动转换成string问题的解决方案
Vue.JS项目中v-model导致输入框中number类型值自动转换成string问题的解决方案。问题探讨本人项目中有三个端,web、服务端、设备端,服务端在此项目中只是起到转发web端数据给设备的中介作用,web端数据直接由设备解析。设备端协议要求,web端下发数据时传的是JSON对象转化成的字符串,即这种格式: ,请留意其中的Chn字段,转化后仍需要整形,而不是字符串。 由于...原创 2018-04-27 21:33:06 · 22229 阅读 · 5 评论 -
Vue.JS项目导入导出JSON文件的方案之一,其他项目也可参考
此文章用于记录经验,方便下次借鉴,为节省时间用于举例的UI也许有点简陋,将就将就…重要的是方法。1、导出json文件1.1、安装file-saver使用cnpm install file-saver --save安装file-saver 1.2、使用file-saver 进入需要导出json文件的组件,使用file-saver<template> ...原创 2018-05-03 23:48:11 · 11117 阅读 · 5 评论 -
Vue.JS项目同时使用Element-UI与vue-i18n时实现国际化的方案
之前我们谈到过使用vue-i18n实现国际化的方案,但是这个方案的缺点是没有结合Element-UI的国际化,也就是使用了Element-UI的话,Element-UI自带的组件里的文字无法实现国际化,那么应该如何解决?下面介绍vue项目同时使用Element-UI与vue-i18n时实现国际化的经验。 main.js配置:import Vue from 'vue'import App...原创 2018-05-03 22:56:40 · 1871 阅读 · 0 评论 -
Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
1、需求介绍:以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态、设备日志、固件升级,会切换下方内容。 本人对以上需求实现方案:设备列表为一级路由,设备信息主页为二级路由,设备配置、设备状态、设备日志、固件升级在设备信息主页中使用v-if机制切换。1.1、相关路由:1.2、v-if...原创 2018-04-13 19:51:24 · 5253 阅读 · 4 评论 -
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
需求分析:如图,有很多高度不固定的模块(图中只显示两个,本人项目有十三个),点击模块标题展开相应的模块,再次点击此模块匿藏,如何实现此需求并实现复用? 点击红框前: 点击后: 难点分析:模块高度不固定。比如,本人一开始找到的方法如下:&amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;原创 2018-04-17 18:28:01 · 5456 阅读 · 8 评论 -
Vue项目中公用footer组件底部位置的适配问题
vue项目中公用footer组件底部位置的适配问题需求:footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后;有的页面内容很少,高度很低,footer需要放在浏览器可视窗口的最底部;窗口高度的变化时,footer的位置需要重新调整。可能有的伙伴首先想到的是给footer组件添加: position: fixed; bottom: ...原创 2018-03-22 11:57:48 · 9302 阅读 · 2 评论 -
Vue+stylus实现自定义文字的loading组件
loading.vue源码: {{title}} export default { props: { title: { type: String, default: '正在载入...' } } } @import "~common/stylus/variable" .l原创 2017-12-20 06:34:28 · 936 阅读 · 1 评论 -
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换
vue2.0使用嵌套路由实现页面跳转/一级菜单切换/routes配置childrendemo需求分析:图中菜单区域为header公用组件,点击相应的菜单选项跳转到对应的路由,在菜单下区域加载相应组件的内容。以下两图分别为点击“我的电站”、“个人中心”的效果demo结构介绍:登录成功后,跳转到index页面,并默认显示index/UserStation(我的电站),index原创 2018-02-28 19:08:48 · 26575 阅读 · 6 评论 -
使用vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
使用vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题当你的SPA(单页应用程序)变得复杂时,打包构建后的Javascript包会变得非常大,以至于严重影响页面的加载时间。vue-router支持WebPack内置的异步模块加载系统。所以,那些使用较少的路由组件不必打包进bundles里,只需要在路由被访问时按需加载。以下以一个简单的例子展示:1:非懒加载的路由写法...原创 2018-02-27 15:52:51 · 12342 阅读 · 5 评论 -
原生JS基于window.scrollTo()封装垂直滚动动画工具函数
封装原因:在vue项目中,遇到需要实现垂直滚动效果的需求,初步想到的方法有两个: 1:使用window.scrollTo()方法,但是这个方法是没有动画效果的,需要手动封装一下。 2:使用JQuery的动画函数,缺点比较明显:需要引入JQuery。 显然,选择第一种好很多。以下为封装window.scrollTo()的方法scroll(),文件名为scroll.js// Crea...原创 2018-05-30 00:42:35 · 3522 阅读 · 8 评论 -
Node+Express+Vue2.x+Mongodb结合muse-ui、less、rem等实现简易博客
源码地址:https://github.com/XieTongXue/node-blog 请先阅读项目中的readme文件,按步骤启动,避免运行出错。写此demo的缘由最近在看学习express,想找个demo了解一下,发现找到的资源不多,有的难度比较大,不适合新手入门,于是花了几个空闲的夜晚写了个博客demo,熟练一下mongodb、express,同时希望能帮到想入门的朋友。de...原创 2018-05-26 02:16:31 · 1026 阅读 · 7 评论 -
微信小程序开发错误:LoginError {type: "ERR_WX_GET_USER_INFO"}解决方法
错误内容微信小程序登录接口报以下错误: LoginError {type: “ERR_WX_GET_USER_INFO”, message: “获取微信用户信息失败,请检查网络状态”, detail: {errMsg: “getUserInfo:fail scope unauthorized”} message: “获取微信用户信息失败,请检查网络状态” type: “ERR_WX_G...原创 2018-06-07 00:34:32 · 6622 阅读 · 14 评论 -
[Vue源码分析]Vue.use实现原理
最近小组有个关于vue源码分析的分享会,提前准备一下…前言:插件通常会为 Vue 添加全局功能,这个官网文档有说过了,如果对插件不了解,建议先阅读一下官网文档:https://cn.vuejs.org/v2/guide/plugins.html#使用插件使用插件插件的使用很简单,使用Vue.use注册后即可全局使用,比如项目中需要用到vue-router这个插件,如图引用即可:接下来分...原创 2019-03-22 23:26:03 · 7444 阅读 · 8 评论 -
[Vue源码分析]自定义事件原理及事件总线的实现
最近小组有个关于vue源码分析的分享会,提前准备一下…前言:我们都知道Vue中父组件可以通过 props 向下传数据给子组件;子组件可以通过向$emit触发一个事件,在父组件中执行回调函数,从而实现子组件与父组件的通信,如下图:从图可以看到,这种机制兄弟组件之间是通信不了的,假如不借助vuex等库,如何实现兄弟组件之间的通信?接下来说说事件总线。事件总线的实现举个例子,如图,建个vue...原创 2019-02-24 23:21:00 · 4582 阅读 · 7 评论 -
[Vue源码分析] v-model实现原理
[Vue源码分析] v-model实现原理最近小组有个关于vue源码分析的分享会,提前准备一下…前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化。那么v-model是怎么实现这一原理的呢?接下来探索一下这部分的源码。原创 2018-12-28 23:55:06 · 4286 阅读 · 11 评论 -
[Vue源码分析] 模板的编译
最近小组有个关于vue源码分析的分享会,提前准备一下…前言:Vue有两个版本:Runtime + Compiler 、 Runtime only ,前者是包含编译代码的版本,后者不包含编译代码,编译过程需要借助webpack的vue-loader,接下来分析的是Runtime + Compiler版本,编译过程感觉挺复杂的,所以下边只是大概分析一下整个流程,源码理解直接写在源码中。### 模板的编译 之前分析Virtual DOM的时候我们分析过模板到真实 DOM 渲染的过程,中间有一个环节把模板编原创 2019-02-26 00:08:55 · 2870 阅读 · 7 评论 -
[Vue源码分析] Virtual DOM
最近小组有个关于vue virtual dom的分享会,提前准备一下......[Vue源码分析]Virtual DOM本文章涉及源码版本为Vue 2.5.2为什么使用virtual dom做一件事一般都先问问为什么,那么为什么使用virtual dom?真正的 DOM 元素是非常庞大的,因为浏览器的标准把 DOM 设计的很复杂。如果频繁地操作 DOM ,会产生一定的性能问题。举个例子:创建一个header标签,并打印dom的描述信息:原创 2018-10-25 02:11:45 · 1685 阅读 · 15 评论 -
Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言要在vue项目使用百度地图api,首先应做以下配置(1)index.htmlindex.html添加script <script src="http://api.map.baidu.com/api?v=3.0&ak=你的百度地图秘钥(ak)&callback=bMapInit"></script>(2)webpack....原创 2018-07-04 20:18:14 · 22195 阅读 · 12 评论 -
Mpvue微信小程序时间消耗进度条组件的实现
实现效果:组件源码:组件主要涉及时间的计算、闰年的判断,比较简单,因此注释比较少。 &amp;lt;progress&amp;gt;&amp;lt;/progress&amp;gt;组件为微信小程序官方的进度条。&amp;lt;template&amp;gt; &amp;lt;div class=&quot;year-progess&quo原创 2018-06-27 01:05:21 · 1722 阅读 · 5 评论 -
Vue2.x通用条件搜索组件的封装及应用
效果 组件源码&lt;template&gt; &lt;div class="search"&gt; &lt;el-select v-model="type" @change="changeType" class="select"&gt;原创 2018-06-27 00:41:27 · 4517 阅读 · 0 评论 -
Vue2.x通用编辑组件的封装及应用
效果 组件源码&amp;lt;template&amp;gt; &amp;lt;div class=&quot;edit-input&quot;&amp;gt; &amp;lt;div class=&quot;editBox&quot;&amp;gt; &amp;lt;div&am原创 2018-06-25 19:56:45 · 608 阅读 · 0 评论 -
Mpvue+koa开发微信小程序——腾讯云开发环境的搭建及部署实现真机测试
为什么写这篇文章?之前写过一篇文章:mpvue+koa开发微信小程序——上传测试代码到腾讯云以及腾讯云后台本地开发环境的搭建 有的伙伴在这篇文章中评论为什么手机发不了请求,因此写这篇文章解释一下。 之前文章介绍了如何部署过代码到腾讯云,也搭建过本地开发环境,当时我们的小程序前端请求的都是我们本地后端的接口,因此,真机无法获取用户信息等。因为真机的请求,没法转发到电脑上,想真机预览,需要测试...原创 2018-06-26 00:22:04 · 1662 阅读 · 0 评论 -
Vue2.0通过二级路由实现页面切换
vue2.0通过二级路由实现页面切换需求分析:以下歌手列表(singer.vue)页中,点击列表跳转到歌手详情页(singer-detail.vue)。实现方法:使用二级vue-router实现。vue-router配置:设置二级路由后,需要再singer.vue中设置router-view,用于挂载singer-det原创 2017-12-21 01:49:04 · 14896 阅读 · 1 评论 -
利用ES6-Promise()方法封装原始jsonp实现跨域请求公用方法(告别使用JQuery封装好的jsonp)
在项目中,经常需要用到jsonp实现跨域请求,假如使用JQuery封装好的jsonp方法,是很容易实现的,缺点:需要引入JQuery库。 $.ajax({ url : './package.json', type : 'get', dataType : 'jsonp', jsonp : 'jsonpCallback', //原创 2017-12-12 15:21:02 · 1302 阅读 · 1 评论 -
Vue2.0+vuex+H5实现音乐播放及歌曲切换功能的方法及原理解释
最近在用mint-ui重写一个vue.js音乐App项目,做到播放器模块,感觉挺有意思,记录一下播放器歌曲播放及歌曲切换功能实现方法及原理。先上一张运行效果图(歌词尚未抓取、播放进度条及时间尚未开发)所需了解的知识:vue2.0、vuex(mapGetters、mapMutations等)、H5 audio标签原创 2018-01-11 00:24:30 · 11156 阅读 · 2 评论 -
基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释需求分析:①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度;时间实时更新。②:当滑动按钮时,实时更新播放时间,橙色进度条长度也会随着按钮的滑动而改变,当滑动结束时,橙色区域停留在滑动结束的位置,歌曲从当前进度开始播放。③:点击进度条,橙色进度条长度变为点击处至起点的长度,并从当前点开始播放歌曲。原创 2018-01-15 21:49:23 · 13108 阅读 · 3 评论 -
Vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果
vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果需求分析:类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度。progress-circle.vue源码: <circle class="progress-bar" r="50" cx="50" cy="50" fill="t原创 2018-01-16 00:35:40 · 4260 阅读 · 3 评论 -
音乐、视频播放模式切换实现方案及原理解析(基于vue、vuex、h5 audio)
音乐、视频播放模式切换实现方案及原理解析(基于vue、vuex、h5 audio)播放模式有三种:顺序播放随机播放单曲循环定义为一个playMode对象并向外暴露,内含三种播放模式,即为:export const playMode = { sequence: 0, loop: 1, random: 2}数据管理:通过vuex提供的语法当mapGet原创 2018-01-17 03:41:42 · 3176 阅读 · 0 评论 -
歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll),以vue项目为例
歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)1、需求分析:后台歌词接口返回的数据如下(base64字符串): W3RpOua8lOWRmF0KW2FyOuiWm+S5i+iwpl0KW2FsOue7heWjq10KW2J5Ol0KW29mZnNldD owXQpbMDA6MDAuNTZd5ryU5ZGYIC0g...原创 2018-01-23 22:49:09 · 9206 阅读 · 13 评论 -
基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子
直接上源码:组件:scroll.vue,需要先npm install better-scroll import BScroll from 'better-scroll' const DIRECTION_H = 'horizontal' const DIRECTION_V = 'vertical' export default { pr原创 2017-12-20 05:21:17 · 20365 阅读 · 0 评论 -
【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录。首先安装mint:$ npm install mint-ui --save 在main.js中添加如下代码:import MintUI from 'mint-ui'原创 2017-12-17 00:55:33 · 1877 阅读 · 0 评论 -
如何改变请求的host以及referer抓取做了host以及referer限制的接口数据
注:这篇文章为2017年10月发布,可能qq音乐已经做了更改,本例子不一定适用,仅供参考。(提示于:2018-05-01)最近在做一个抓取qq音乐接口数据的音乐App,使用vue开发,数据都从qq音乐中抓取,开发过程中遇到一个问题,比如以下接口:https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg?g_tk=1928093487&...原创 2018-05-01 22:55:43 · 14085 阅读 · 6 评论 -
Vue项目设置代理解决开发环境下的跨域问题
首先需要安装axios,推荐使用npm安装$ npm install axios --save配置config->index.js中的proxyTable,内容如下: proxyTable: { '/api': { target: 'http://happymmall.com',// 请换成你的地址 changeOrigin:...原创 2017-11-29 11:58:05 · 24437 阅读 · 0 评论 -
【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview
今晚看了一下基于vuejs的ui框架iview,感觉UI挺好看的,那么在vue项目中应该如何使用iview呢?以下做简单的记录。首先安装iview:$ npm install iview --save在main.js中添加如下代码:import iView from 'iview';import 'iview/dist/styles/iview.css';Vue.use(iV原创 2017-12-13 01:40:48 · 1742 阅读 · 0 评论 -
【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
看了下iView之后,顺便看了看同样基于vuejs的ui框架Element,那么在vue项目中应该如何使用Element呢?以下做简单的记录。首先安装Element:$ npm install element-ui --save 在main.js中添加如下代码:import ElementUI from 'element-ui'import 'element-ui/lib原创 2017-12-13 02:30:05 · 2369 阅读 · 0 评论 -
Vue2.0中子组件向父组件传递数据的方法,以完整demo演示
子组件child.vue源码:<template> <div class="child"> <button @click="sendData">点击向父组件传数据</button> </div></template><script type="text/ec原创 2018-01-04 20:24:44 · 767 阅读 · 0 评论 -
Vue2.x中vuex的使用方法及应用时的项目文件结构设计以完整demo实例解释
基本概念:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。目录结构:Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:应用层级的状态应该集中到单个 store 对象中。提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。异步逻辑都应该封装到 action 里面...原创 2017-12-21 10:43:11 · 2185 阅读 · 0 评论 -
Vue2.x—理解vuex核心概念action(使用到ES6的变量的解构赋值)
ActionAction 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态。Action 可以包含任意异步操作。让我们来注册一个简单的 action:const store = new Vuex.Store({ state: { count: 0 }, mut...原创 2018-02-24 15:48:13 · 12758 阅读 · 0 评论 -
使用localStorage解决浏览器刷新后无法再从vuex中获取数据的问题
假设有这样一个场景:用户登录后,用vuex管理用户的信息,登录成功后进入主界面,在进入主界面后刷新浏览器,此时vuex中的用户信息将无法获取到。那么应该如何解决?办法之一是使用localStorage保存用户信息。在登录成功后保存用户信息,刷新浏览器后从localStorage中获取用户信息,然后再通过vuex管理(mapMutations、mapGetters)。刷新浏览器后vuex中的数据消失...原创 2018-02-24 11:26:35 · 2739 阅读 · 0 评论