项目下载地址 vue-cli多页面多路由项目示例 ：vue+webpack+vue-router+vuex+mock+axios Usage This is a project template for vue-cli. github上找到某大神的一个基于vue-cli模板的vueAdmin后台管理的模板，根据项目需求改成一个多页面多路由的vue项目。 PC端：后台管理页面，单独的页面入口，单独的路由。 移动端：业务展示页面，单独的页面入口，单独的路由。 踩了无数的坑，终于是初见效果了，随后继续优化更新 Install # inst...
前言 记得以前偶然有一次浏览过一个开源的cms项目，发现这个项目的左边的菜单已经超出了windows的宽度，我就好奇为什么没出滚动条呢？然后我仔细一看，发现它左侧有一个小的div，然后我尝试着拖动它，发现竟能和原生的滚动条一样！可以通过查看它的源码，发现了这款滚动条的叫做slimScroll，然后我去它的github仓库 看了下，研究了一下源码，给我的感觉是我也能做出来一样的滚动条！通过vue实现！ 设计 好， 现在开始我们的设计滚动...
写在前面的话： 上一篇文章实现了滑动效果，这部分来试试左右联动效果的实现方法吧 效果：滑动右侧时，左侧也能有相应的变化；点击左侧时，右侧也能自动定位到相应的位置。 如下图所示界面，左侧为分栏，右侧为分栏详情。滑动右边使左边联动的大概的思路： 1）要知道右侧的列表中，每一个分栏所占的高度，存进一个数组中。 2）实现左边联动，则必须要监控 “scroll”事件，获取其高度 3）将scroll 的高度与右侧分栏的高度进行比较，...
问题描述: 列表页进入详情页，或者tab页切换，然后再返回列表页，希望能切换到之前滚动位置 解决问题思路: 切换到其他页面前记录位置，返回列表页的时候返回位置。这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现. 还有一种更简单粗暴的方法， vue-scroller.min.js源码中添加宽高不为零判断，实现方式见评论，是最近代码优化的时候发现的。 代码部分:beforeRouteEnter(to,from,next){if(!sessionStor...
本文介绍了Vue+Flask实现简单的登录验证跳转，分享给大家，具体如下:文件位置： login.html <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Login</title><script type="text/javascript" src="../static/vue.js"></script><script type="text/javascript" src="../static/axios.js"></script></head> <body><div id="login"><form action="#" novalidate><label for="username">Username</label><input t...
前言最近接手一个老项目，典型的 Vue 组件化前端渲染，后续业务优化可能会朝 SSR 方向走，因此，就先做些技术储备。如果对 Vue SSR 完全不了解，请先阅读官方文档。 思路Vue 提供了一个官方 Demo，该 Demo 优点是功能大而全，缺点是对新手不友好，容易让人看蒙。因此，今天我们来写一个更加容易上手的 Demo。总共分三步走，循序渐进。 写一个简单的前端渲染 Demo（不包含 Ajax 数据）；将前端渲染改成后端渲染（仍然不包含 Ajax 数...
本文介绍了Vue+jquery实现表格指定列的文字收缩的示例代码，分享给大家，具体如下：效果很简单，但是写起来真的不容易，因为Vue对于没有React这种前端框架经验的人是不友好的 （少吐槽，多工作，省下时间出去hi） 先说一下我走过的弯路：我之间想通过 v-if 指令去操作这一列代码是这样的： <el-table-column width="250" align="center" label="比较基准"><template scope="scope"><span v-if="isAllTxt">{{getShortStr(scope.row....
笔者在做一个个人博客项目的时候需要一个富文本框输入组件与后台进行交互，但是官方配置里面没有关于nodejs的，于是自己查阅资料研究了一下，最后终于应用到了系统中。 一、后台配置 首先是找到了这个项目：https://github.com/netpi/ueditor，可以通过他开源的代码将ueditor应用的node上面，大概方法如下： 1.先安装依赖： npm install ueditor --save2. 配置Node设置 //引入接口文件 const api = require(./api); //引入文件模块...
分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能。具体如下： 文件page.vue为一个pc端的分页组件,基础的分页功能都有，基本的思路是，页面是用数据来展示的，那就直接操作相关数据来改变视图 Getting started import Page from ./page.vue 从目录引入该文件,在父组件注册使用代码如下: <page :total=total :current-index="currentIndex" :listLen=listLe...
本文介绍了Vue树形组件的示例代码，分享给大家，具体如下： 使用SemanticUI和vue做一个menubar组件，实现方法大概是这样的：<template> <div class="ui menu"> <template v-for="item in leftItems"> <a " v-if="!item.children" @click="item.click"> <i class="{{ item.icon }} icon" v-if="item.icon"></i>{{item.text}} <div class="ui mini {{item.labelColor }} label" v-if="item.label"> {{item.label}} </div> </a> //如...
写在前面 工程为前后端分离设计，使用Nginx为前端资源服务器，同时实现后台服务的反向代理。后台为Java Web工程，使用Tomcat部署服务。 前端框架：Bootstrap4，Vue.js2后台框架：spring boot，spring data JPA开发工具：IntelliJ IDEA，Maven实现效果：会员信息 如何使用Bootstrap+Vue来实现动态table，数据的新增删除等操作，请查看使用Bootstrap + Vue.js实现表格的动态展示、新增和删除 。交代完毕，本文主题开始。 一、使用Boo...
本文介绍了vue组件中使用iframe元素的示例代码，分享给大家，具体如下：需要在本页面中展示vue组件中的超链接，地址栏不改变的方法:<template><div class="accept-container"><div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul><li v-for="item in webAddress"><a :href="item.link" rel="external nofollow" target="showHere" @click="showIframe">{{item.name}}</a></li> </ul> <iframe v-show="ifr...
这段时间告诉项目需要，用到了vue。刚开始搭框架的时候用的是vue-resource后面看到官方推荐axios就换过来了 顺便封装了一下 //引入axios import axios from axioslet cancel ,promiseArr = {} const CancelToken = axios.CancelToken; //请求拦截器 axios.interceptors.request.use(config => {//发起请求时，取消掉当前正在进行的相同请求if (promiseArr[config.url]) {promiseArr[config.url](操作取消)promiseArr[config.url] =...
朋友的项目里要实现一个消息无缝滚动的效果，中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题，我研究了一天终于解决了这个1S的小问题 项目环境vue-cli ，请自行配置好相应的，环境及路由，这里主要介绍实现的方法第一步在模板中 使用v-for方法循环出消息列表<template><div id="box"><ul id="con1" ref="con1" :class="{anim:animate==true}"><li v-for=item in items>{{item.name}}</li></ul> </div>...
iView 是一套基于Vue.js的开源UI组件库，主要服务于PC界面的中后台产品。 1、iView的特性1) 高质量、功能丰富 2) 友好的API ，自由灵活地使用空间 3) 细致、漂亮的 UI 4) 事无巨细的文档 5) 可自定义主题2、iView的安装：1) 使用npm：npm install --save iview 2) CDN引入：<link rel="stylesheet" href="css/iview.css" rel="external nofollow" > <script src="js/iview.min.js"></script> 由于公司项目需要，所以目前捣鼓了vu...