Vue.js

Vue仿今日头条实例详解

Vue仿今日头条实例详解

前言vue也弄了一段时间了, 前段时间一直想用vue写个移动端,加之年底也不是很忙,于是前几天便着手开始弄了,到今天为止也算是勉强能看了因为也是纯粹的写写前端页面,所以数据方面用的是mock.js,为了真实的模拟请求,可以直接在 Easy Mock 自己生成API也可直接登陆我这项目的Easy Mock账号密码:账号: vue-toutiao密码: 123456如果你想修改接口,请copy一份在修... »

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

我给每个订单状态的组件一个不同的数字,根据这个数字,判断组件是左滑动的动画还是又滑动的动画 总结以上所述是小编给大家介绍的基于Vue、Vuex、Vue-router实现的购物商城,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。 »

Vue侧滑菜单组件——DrawerLayout

Vue侧滑菜单组件——DrawerLayout

本文介绍一个简单的DrawerLayout布局组件的实现,基于Vue.js。介绍的内容已经制作成 vue-drawer-layout 组件。前言大家有兴趣先用手机扫一扫这个二维码,或者点我然后点击页面中左上角的头像打开drawer或者向右向左拖拽,就可以看到下面gif的效果,打开自己的手机QQ,是不是很像:)谷歌官方把这种布局叫做DrawerLayout。所以绑定 touchend 事件的方法时要... »

Vue.JS项目中5个经典Vuex插件

Vue.JS项目中5个经典Vuex插件

使用 Vuex 来管理 Vue 的状态,有很多好的理由。其中之一就是,通过 Vuex 插件可以非常容易的扩展一些很酷的功能。Vuex 社区中的开发人员已经创建了大量的免费插件供你使用,有许多你能想象的功能,还有一些你可能没有想到的功能。 状态持久化同步标签页、窗口语言本地化管理多个加载状态缓存操作 1. 状态持久化 vuex-persistedstate 使用浏览器的本地存储( local sto... »

基于Vue的移动端图片裁剪组件功能

基于Vue的移动端图片裁剪组件功能

最近项目上要做一个车牌识别的功能。其中两个canvas都会加载同一张图片,只是起始坐标不一样。取消 确认 三、初始化canvascanvas绘制的图片在hdpi显示屏上会出现模糊,具体原因这里不作分析,可以参考下这里。最后还要记录一下两个canvas坐标原点的x, y差值。 »

路由效果图

Vue.js系列之vue-router(上)(3)

说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。  1.Vue.js系列之项目搭建... »

vue下axios拦截器token刷新机制的实例代码

//创建http.js文件,以下是具体代码: //引入安装的axios插件 import axios from 'axios' import router from '@/router'; import Vue from 'vue' const qs = require("qs"); let _this = new Vue(); let isLock = false; let refreshSub... »

Vue实现商品飞入购物车效果(电商项目)

Vue实现商品飞入购物车效果(电商项目)

各位掘友,好久不见,最近利用工作之余开源了Vue电商项目,高仿某知名O2O买菜平台,整个项目做下来收获还是蛮多的,可以扫描下方二维码体验,本篇是项目的核心知识拆解篇,主要是拆解增加商品飞入购物车的实现过程。 »

Vue+Element实现网页版个人简历系统(推荐)

Vue+Element实现网页版个人简历系统(推荐)

这篇文章介绍一个使用Vue+Element实现的个人简历系统,主要用到的技术有:vue、element、css3、css定位。 作者在window10进行开发,目前只在chrome上进行过测试,没有大的毛病。但是还有很多小功能还不完善,代码也未进行优化,后续会继续完善功能,优化代码。 声明:项目相对来说就是一个纯静态页面,代码都比较简单,大佬可闭眼绕过,或者看一眼留下宝贵意见也可   一... »

详解Vue.js项目API、Router配置拆分实践

详解Vue.js项目API、Router配置拆分实践

前后端分离开发方式前端拥有更高的控制权 随着前端框架技术的飞速发展,Router这个概念也被迅速普及到前端项目中,在早期前后的没有分离的时期下,并没有明确的路由概念,前端页面跳转大多是通过后端进行请求转发的,比如在Spring MVC项目中,进行一个页面跳转如下(画红线部分): 前端需要一个超链接,链接的href=/manager,这样这个超链接被转发到scs/waitFollowed路径指定的页... »

基于vue-draggable 实现三级拖动排序效果

基于vue-draggable 实现三级拖动排序效果

vue-draggable 之前项目中需要用到拖动排序,就去网上找资料,本来最开始是想用jquery-ui里的拖动的,后面发现不符合我的预期也不知道能不能跟vue.js兼容,后面我试过了,单个的可以但是层级太多就不一样了。 废话少说直接上代码 先看数据结构,和页面的呈现,等会再来上代码。 这就是三层结构渲染出来的图。那个海锚一样的东西是可以点击的,点击后会出现当前类型所带的产品。等会会说的 我们现... »

用vscode开发vue应用的方法步骤

用vscode开发vue应用的方法步骤

现在用VSCode开发Vue.js应用几乎已经是前端的标配了,但很多时候我们看到的代码混乱不堪,作为一个前端工程师,单引号双引号乱用,一段有分号一段没有分号,有的地方有逗号有的地方没有逗号,空格回车都对不齐,还说自己做事认真,这不是开玩笑的事情。 我们今天从头开始,完整地讲述一下一个重度代码洁癖患者该如何用vscode开发vue,以及如何把一个已经可以宣判死刑的全身各种格式错误几万条的项目整容成标... »

vue中利用simplemde实现markdown编辑器(增加图片上传功能)

vue中利用simplemde实现markdown编辑器(增加图片上传功能)

前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果   安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplem... »

vue.js iview打包上线后字体图标不显示解决办法

在vue+cli项目中使用iview组件及icon图标,打包后icon不显示,解决办法: 1.在build文件夹下找到utils.js文件,把publicPath改为 ../../ if (options.extract) { return ExtractTextPlugin.extract({ publicPath:'../../', use: loaders, fallback: 'vue-s... »

Vue引入Stylus知识点总结

Vue引入Stylus知识点总结

项目中使用引入文件有时候路径比较深,需要使用”../../../xx.js”这种类似的路劲引入,这种方式比较笨,可以使用webpack的别名alias配置来解决。 首先,先确定项目中是否有path模块: 如果没有path模块需要先安装path npm install path --save 以下为vue.config.js配置 const path = require("p... »

vue elementui 实现搜索栏公共组件封装的实例代码

vue elementui 实现搜索栏公共组件封装的实例代码

1、背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一。 所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一。 完成后的效果大概就是长这样: 2、分析 项目使用的是elementui框架,搜索栏这种表单提交,首先要使用el-form组件... »

vue项目中使用eslint+prettier规范与检查代码的方法

vue项目中使用eslint+prettier规范与检查代码的方法

使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量。EsLint 则是其中一个很好的工具。并使用 Prettier 格式化代码,使样式与规则保持一致。 »

阿望教你用vue写扫雷小游戏

阿望教你用vue写扫雷小游戏

前言 话说阿望还在大学时,某一天寝室突然停网了,于是和室友两人不约而同地打开了扫雷,比相同难度下谁更快找出全部的雷,玩得不亦乐乎,就这样,扫雷伴我们度过了断网的一周,是整整一周啊,不用上课的那种,可想而知我们是有多无聊了。 这两天临近过年了,该放假的已经放假了,不该放假的已经请假了,公交不打挤了,地铁口不堵了,公司也去了大半部分的人了,就留阿望这种不得不留下来值班的人守着空荡荡的办公室了,于是,多... »

vue-cli3 取消eslint校验代码的解决办法

vue-cli3 取消eslint校验代码的解决办法

在网上找了各种办法都没解决,看了下文档就解决了关闭vue-cli3.0 报错:eslint-disable-next-line to ignore the next line. 注意我这里是VUE3.0解决方法:找到文件vue.config.js 打开文件修改lintOnSave 为false,如果没有就添加lintOnSave 为false下图: »

Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

这几天做个了项。就是微信扫描二维码的然后进入公众号网页巴拉巴拉的,然后就很顺利的遇到了在安卓端扫码的时候,顺利的一塌糊涂,然后到了苹果端的时候,就只能出现一个保存图片,然后就写一下记录一下这问题的解决方法。 问题 机型:iphone 7p 这里的二维码是一张图片,微信返回的图片,具体下图   然后是正常情况下。当我们开始扫码的时,应该是这个样子   这个是正常的,但是在苹果端的... »

关于vue3.0中的this.$router.replace({ path: ‘/’})刷新无效果问题

关于vue3.0中的this.$router.replace({ path: ‘/’})刷新无效果问题

首先在store中定义所需要的变量可以进行初始化,再定义一个方法,登录成功后A页面,跳转到B页面之前,需要直接调用store中存储数据的方法,全局可以使用 诸如以上所示,该问题,百度了好久,多亏群里大佬。 vue使用less报错的解决方法 安装less less-loader cnpm install less less-loader --save-dev app.vue是所有XXX.vue文件的... »

vue项目中监听手机物理返回键的实现

背景:项目中有一个场景要监听android手机物理返回键,但是app和js的中间件又没提供这个事件的监听,只能百度纯js实现了第一步:xback.js;! »

Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)

Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)

平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏。 简单写个Demo <!-- 按钮 --> <button @click.stop="ShowHidden = !ShowHidden">显示或隐藏</button> <!-- 下拉列表 --> <div v-if=... »

vue中js判断长时间不操作界面自动退出登录(推荐)

需求说明,后台有做半个小时不请求接口的话返回标识退出登录,但是要请求接口才行,现在要实现前端用js判断半个小时不操作界面的话自动跳转到登录页面。 创建一个.js文件,在main.js引入此js(vue框架) 在登录成功的时候保存当前时间localStorage.setItem("lastTime",new Date().getTime()); 然后在点击的时候更新这个时间 var lastTime... »

vue组件内部引入外部js文件的方法

vue组件内部引入外部js文件的方法

之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位。如果放在index.html,这样每个组件都会有这个js。 »

Page 1 of 257123»