越陌度阡

在开发后台管理系统时，时常会遇到数据汇总，为了页面展示更生动，用户体验更好，通常会对汇总的数字加一个逐步递增动画。实现这个效果一般是用的 Vue-count-to这个插件，这是一款简单好用的一个数字滚动插件，并且是一个无依赖，轻量级的组件。

给大家分享一个基于Vue组件设计的文字悬停特效，实现的效果如下，这种效果常见于一些Logo文字或是可点击的链接，使得页面看起来更加生动活跃。

在前端开发中，拖拽排序是一种提升用户体验非常好的方式，常见的场景有单列表拖拽排序，多列表拖拽交换排序，比如以下这种效果。下面将以这种效果为例，设计一个组件。1. 安装所需依赖。本例中目前所用的版本为：2.20.02. 组件设计实现。3. 组件使用示例

Sticky布局即为粘性定位，常见于一些重要的页面区域在向上滚动时不会被卷起来，在CSS中可以通过设置position:sticky来实现这一功能，但是如果出于兼容性考虑或是一些复杂的场景，就需要我们用传统的方法来实现，以下基于Vue封装一个组件给大家参考。

在后台管理系统中基本都会有全屏显示功能，常见于右上角的用户信息旁边，方便在小屏下使用系统。1. 安装依赖，建议安装5以下的版本，全屏插件的版本过高可能会导致无法正常全屏......

表单分页在后台管理系统中最为常见，几乎所有的表格页面都会用到，但是一般的UI框架分页组件在点击切换分页后，都没有自动滚动置顶的功能，为了更好的用户体验以及全局复用，有必要自己封装一个分页组件。

在前端开发中，滚动置顶是一个比较常见的交互设计，特别是在一些大型网站的首页，当内容篇幅较多时，在页面的底部或是侧边都会放置一个滚动置顶的图标，方便用户快速回到顶部。滚动交互注意事项:1. 置顶图标在什么时候显示，什么时候消失；2. 滚动的过程要做缓冲动画处理，即滚动要速度要递减，才不能显的那么的突兀；组件设计考虑因素:1. 组件要可以传参控制滚动置顶的位置；2. 组件要可以传参控制滚动置顶图标在什么时候显示；3.组件的滚动置顶图标最好支持传参自定义的样式；

在做后台管理系统时，登录模块是必不可少的，访模块看似简单，在开发涉及到许多细节，一般来说主要有以下这些：1. 登录输入的信息要进行正则校验；2. 密码输入要可以查看明文；3. 密码输入时要对大写锁定进行提示；4. 表单控件要有Tab键导航操作；5. 输入完成要可以回车确认登录；6. 要有自动登录的功能；7. 二次登录时要有重定向的功能；8.登录界面要进行移动端适配；9.登录成功后的信息要进行全局状态管理；

Clipboard是最常用的复制粘贴插件，以下代码展示如何在Vue中封装和调用该插件。

Vue是数据驱动的一个视图框架，所谓数据驱动就是DOM是通过数据来映射的，只有在数据改变的情况下视图才会发生改变。正常情况下千万不要手工去操作DOM，这样会引发一些不可预知的问题产生。Vue中的数据主要来自三个部分：1. 来自父元素的属性props；2. 来自组件自身的状态data；3. 来自状态管理器vuex；状态data与属性props的区别：1. 状态是组件自身的数据；2. 属性是来自父组件的数据；3. 状态的改变未必会触发更新；4. 属性的改变未必会触发更

1. 安装插件npm install awe-dnd --save2. 引入插件import VueDND from 'awe-dnd'Vue.use(VueDND)3. 使用插件<template> <div class="title-list"> <div v-dragging="{item: item, list:list}" v-for="item in list"

1.下面代码中的selectImage事件是加在所选择的图片上面的，参数为选择图片的地址；2.下面代码中的imgUrl为最终裁剪的图片提交给服务端保存后的图片链接地址；

近期由于需要对公司运营系统进行优化和升级，而原有后台系统所使用的vue-quill-editor编辑器对粘贴进来的内容的行内样式全部进行了过滤，虽然这样可以防止XSS攻击，但是却完全无法满足业务需要，为此对编辑器进行了更换，采用Vue-html5-editor 这个编辑器。这是一个基于Vue 2.0系列的编辑器（官方地址），还不错，但却存在一些问题，以下记录这些问题，并提供解决办法。1. 复制网络图片时无法粘贴成功。主要原因是图片链接存在跨域问题。运营人员复制的内容都是基于微信环境的，微信对所有

Vue中的Slot对于编写可复用可扩展的组件是再合适不过了，常见的用法有以下3种：1. 插入一个匿名的Slot，匿名的情况只适用于只插入一个的时候；2. 插入有名的Slot，当插入的Slot有多个的时候，需要按名占位；3. 在Slot的内部可以将值通过有名Slot传递出去，让外层组件接收；以下是代码实例：首先是App.vue，调用了所有组件，插入了所有的有名和匿名的Slot。<template> <div id="app"> <

Watermark-dom是一个可以给网页添水印、移除水印的插件，并可以对水印的样式进行许多丰富的设置。以下是在Vue中使用该插件的方式：<template> <!-- App.vue 文件--> <div id="app"> <router-view /> </div></template><script>// 安装文件,如果安装报错，可以用cnpm// npm

最近在开发一个公司的投放管理系统的操作日志模块，要查看某条操作日志的请求参数，要将请求的参数以JSON格式的形式展示出来，于是用到了vue-json-viewer这个插件。以下是实现的效果：插件的使用步骤：1. 安装插件npm install vue-json-viewer --save如果npm安装报错，可换成cnpm安装。2. 引入插件引入插件有两种方式，可以全局引入，也可以在单个页面文件中引入该插件。如果在全局main.js中引入，那

两个兄弟组件，需要进行消息通信，当一个组件收到消息后会发起请求，正常情况下只会请求一次数据，实际项目中经常会遇到连续发起多次请求的问题。定义事件总线：第一个组件里发送消息：第二个组件里接收消息：解决多次请求的关键就在于，要进行事件解绑，也就是下面这行代码。.........

熟悉Element-UI的开发者可能都会有这样的经历，它的无限滚动 InfiniteScroll 并不好用，下面介绍两种下拉加载的实现方法：1. 使用el-table-infinite-scroll 插件(1). 安装插件npm install --save el-table-infinite-scroll(2). 全局引入并注册// main.jsimport elTableInfiniteScroll from 'el-table-infinite-scroll';Vue

import axios from 'axios'import { Message } from 'element-ui'// 域名地址axios.defaults.baseURL = '';// REQUEST 请求异常拦截axios.interceptors.request.use(config => { const token = localStorage....

1.Vue.js－是国内开发者尤雨溪开发的js框架，它是实现UI层的渐进式框架, Vue借鉴了Angular的指令、React中组件和props等优点进行设计，从最简单的数据处理，到数据交互，到DOM操作，到路由处理等，VueJS都有完整的解决方案。2.两种开发模式(1). 直接引入vue.js文件即可(2). vue-cli①. 确保电脑上装有NodeJS 4.0以上的............