![](https://img-blog.csdnimg.cn/20191212005942740.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue 2.0
Vue是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计。Vue 的核心库只关注视图层,容易学习,也容易与其它库或已有项目整合。另一方面,Vue 完全有能力采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
aiguangyuan
要全身心的投入,程序才会有些感觉!
展开
-
Vue 2.0使用Vue-count-to给数字添加增长动画
在开发后台管理系统时,时常会遇到数据汇总,为了页面展示更生动,用户体验更好,通常会对汇总的数字加一个逐步递增动画。实现这个效果一般是用的 Vue-count-to这个插件,这是一款简单好用的一个数字滚动插件,并且是一个无依赖,轻量级的组件。原创 2024-05-30 11:46:01 · 447 阅读 · 3 评论 -
Vue 2.0组件设计-文字悬停特效
给大家分享一个基于Vue组件设计的文字悬停特效,实现的效果如下,这种效果常见于一些Logo文字或是可点击的链接,使得页面看起来更加生动活跃。原创 2023-05-04 14:13:20 · 495 阅读 · 0 评论 -
Vue 2.0组件设计-多列表拖拽交换排序
在前端开发中,拖拽排序是一种提升用户体验非常好的方式,常见的场景有单列表拖拽排序,多列表拖拽交换排序,比如以下这种效果。下面将以这种效果为例,设计一个组件。1. 安装所需依赖。本例中目前所用的版本为:2.20.02. 组件设计实现。3. 组件使用示例原创 2023-05-04 11:03:22 · 654 阅读 · 0 评论 -
Vue 2.0组件设计-Sticky布局
Sticky布局即为粘性定位,常见于一些重要的页面区域在向上滚动时不会被卷起来,在CSS中可以通过设置position:sticky来实现这一功能,但是如果出于兼容性考虑或是一些复杂的场景,就需要我们用传统的方法来实现,以下基于Vue封装一个组件给大家参考。原创 2023-04-28 21:43:02 · 599 阅读 · 0 评论 -
Vue 2.0组件设计-全屏显示
在后台管理系统中基本都会有全屏显示功能,常见于右上角的用户信息旁边,方便在小屏下使用系统。1. 安装依赖,建议安装5以下的版本,全屏插件的版本过高可能会导致无法正常全屏......原创 2023-04-28 20:35:18 · 421 阅读 · 0 评论 -
Vue 2.0组件设计-表单分页
表单分页在后台管理系统中最为常见,几乎所有的表格页面都会用到,但是一般的UI框架分页组件在点击切换分页后,都没有自动滚动置顶的功能,为了更好的用户体验以及全局复用,有必要自己封装一个分页组件。原创 2023-04-28 11:19:46 · 376 阅读 · 0 评论 -
Vue 2.0组件设计-滚动置顶
在前端开发中,滚动置顶是一个比较常见的交互设计,特别是在一些大型网站的首页,当内容篇幅较多时,在页面的底部或是侧边都会放置一个滚动置顶的图标,方便用户快速回到顶部。滚动交互注意事项:1. 置顶图标在什么时候显示,什么时候消失;2. 滚动的过程要做缓冲动画处理,即滚动要速度要递减,才不能显的那么的突兀;组件设计考虑因素:1. 组件要可以传参控制滚动置顶的位置;2. 组件要可以传参控制滚动置顶图标在什么时候显示;3.组件的滚动置顶图标最好支持传参自定义的样式;原创 2023-04-27 10:34:07 · 822 阅读 · 0 评论 -
Vue 2.0后台管理系统-前端登录设计
在做后台管理系统时,登录模块是必不可少的,访模块看似简单,在开发涉及到许多细节,一般来说主要有以下这些:1. 登录输入的信息要进行正则校验;2. 密码输入要可以查看明文;3. 密码输入时要对大写锁定进行提示;4. 表单控件要有Tab键导航操作;5. 输入完成要可以回车确认登录;6. 要有自动登录的功能;7. 二次登录时要有重定向的功能;8.登录界面要进行移动端适配;9.登录成功后的信息要进行全局状态管理;原创 2023-04-26 19:07:41 · 1453 阅读 · 0 评论 -
Vue 2.0组件设计-复制粘贴
Clipboard是最常用的复制粘贴插件,以下代码展示如何在Vue中封装和调用该插件。原创 2022-11-18 16:42:38 · 1104 阅读 · 0 评论 -
Vue 2.0中组件是如何触发更新的?
Vue是数据驱动的一个视图框架,所谓数据驱动就是DOM是通过数据来映射的,只有在数据改变的情况下视图才会发生改变。正常情况下千万不要手工去操作DOM,这样会引发一些不可预知的问题产生。Vue中的数据主要来自三个部分:1. 来自父元素的属性props;2. 来自组件自身的状态data;3. 来自状态管理器vuex;状态data与属性props的区别:1. 状态是组件自身的数据;2. 属性是来自父组件的数据;3. 状态的改变未必会触发更新;4. 属性的改变未必会触发更原创 2022-04-09 23:15:11 · 3223 阅读 · 0 评论 -
Vue 2.0中使用Awe-dnd进行拖拽排序
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"原创 2021-11-09 12:24:56 · 2072 阅读 · 3 评论 -
Vue 2.0中使用Vue-cropper进行图片裁剪
1.下面代码中的selectImage事件是加在所选择的图片上面的,参数为选择图片的地址;2.下面代码中的imgUrl为最终裁剪的图片提交给服务端保存后的图片链接地址;原创 2021-11-08 23:54:24 · 1246 阅读 · 0 评论 -
Vue 2.0中使用Vue-html5-editor 编辑器的一些问题解决
近期由于需要对公司运营系统进行优化和升级,而原有后台系统所使用的vue-quill-editor编辑器对粘贴进来的内容的行内样式全部进行了过滤,虽然这样可以防止XSS攻击,但是却完全无法满足业务需要,为此对编辑器进行了更换,采用Vue-html5-editor 这个编辑器。这是一个基于Vue 2.0系列的编辑器(官方地址),还不错,但却存在一些问题,以下记录这些问题,并提供解决办法。1. 复制网络图片时无法粘贴成功。主要原因是图片链接存在跨域问题。运营人员复制的内容都是基于微信环境的,微信对所有原创 2021-08-24 19:44:53 · 6527 阅读 · 6 评论 -
Vue 2.0中slot的常见用法
Vue中的Slot对于编写可复用可扩展的组件是再合适不过了,常见的用法有以下3种:1. 插入一个匿名的Slot,匿名的情况只适用于只插入一个的时候;2. 插入有名的Slot,当插入的Slot有多个的时候,需要按名占位;3. 在Slot的内部可以将值通过有名Slot传递出去,让外层组件接收;以下是代码实例:首先是App.vue,调用了所有组件,插入了所有的有名和匿名的Slot。<template> <div id="app"> <原创 2021-05-26 11:05:27 · 14016 阅读 · 0 评论 -
Vue 2.0中使用watermark-dom 添加水印
Watermark-dom是一个可以给网页添水印、移除水印的插件,并可以对水印的样式进行许多丰富的设置。以下是在Vue中使用该插件的方式:<template> <!-- App.vue 文件--> <div id="app"> <router-view /> </div></template><script>// 安装文件,如果安装报错,可以用cnpm// npm原创 2020-12-10 18:52:20 · 6113 阅读 · 2 评论 -
Vue 2.0中使用Vue-json-viewer 展示JSON格式数据
最近在开发一个公司的投放管理系统的操作日志模块,要查看某条操作日志的请求参数,要将请求的参数以JSON格式的形式展示出来,于是用到了vue-json-viewer这个插件。以下是实现的效果:插件的使用步骤:1. 安装插件npm install vue-json-viewer --save如果npm安装报错,可换成cnpm安装。2. 引入插件引入插件有两种方式,可以全局引入,也可以在单个页面文件中引入该插件。如果在全局main.js中引入,那原创 2020-12-10 18:26:34 · 11278 阅读 · 8 评论 -
Vue 2.0中使用EventBus接收消息后发起多次请求的问题解决
两个兄弟组件,需要进行消息通信,当一个组件收到消息后会发起请求,正常情况下只会请求一次数据,实际项目中经常会遇到连续发起多次请求的问题。定义事件总线:第一个组件里发送消息:第二个组件里接收消息:解决多次请求的关键就在于,要进行事件解绑,也就是下面这行代码。.........原创 2020-12-01 18:28:57 · 1284 阅读 · 0 评论 -
Vue 2.0实现下拉加载更多
熟悉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原创 2020-12-01 14:26:26 · 10543 阅读 · 1 评论 -
Vue 2.0中封装Axios请求方法
import axios from 'axios'import { Message } from 'element-ui'// 域名地址axios.defaults.baseURL = '';// REQUEST 请求异常拦截axios.interceptors.request.use(config => { const token = localStorage....原创 2019-03-08 10:47:46 · 2281 阅读 · 9 评论 -
Vue 2.0实用手册
1.Vue.js-是国内开发者尤雨溪开发的js框架,它是实现UI层的渐进式框架, Vue借鉴了Angular的指令、React中组件和props等优点进行设计,从最简单的数据处理,到数据交互,到DOM操作,到路由处理等,VueJS都有完整的解决方案。2.两种开发模式(1). 直接引入vue.js文件即可(2). vue-cli①. 确保电脑上装有NodeJS 4.0以上的............原创 2019-01-25 17:31:29 · 2743 阅读 · 2 评论