Vue
文章平均质量分 70
success400
这个作者很懒,什么都没留下…
展开
-
vuex实现数据持久化(二)
数据持久化依赖浏览器的 LocalStorage,使用 lowdb (opens new window)API 加自己的取值包装实现了便捷的的操作和取值方法,通过不同的接口可以访问到持久化数据不同的内容,例如不同用户独有的存储区域,系统存储区域,公用存储,根据路由自动划分的存储区域等。npm install lowdbnpm i --save lodash1.在libs目录下创建util.db.jsimport low from 'lowdb'import LocalStorage from原创 2021-05-10 19:45:59 · 628 阅读 · 0 评论 -
使用Vue.js 2.0搭建单页应用(一)
总览对数据持久化做了更清晰的包装。数据持久化依赖浏览器的 LocalStorage,使用 lowdb (opens new window)API 加自己的取值包装实现了便捷的的操作和取值方法,通过不同的接口可以访问到持久化数据不同的内容,例如不同用户独有的存储区域,系统存储区域,公用存储,根据路由自动划分的存储区域等。项目环境搭建// 安装vuexnpm install vuex --save// 安装vue-routernpm install vue-router...原创 2021-05-10 11:48:43 · 429 阅读 · 0 评论 -
vue中使用scrollreveal制作滚动动画
现在很多产品展示的网页在滚动的时候会触发动画,如果用js去写的话需要监听scrolltop,会很繁琐,而scrollreveal.js可以完美地实现这样的效果,满足我们自定义css3动画以及支持animated.css。首先,安装用npm插件:npm install scrollreveal引入到main.js中,利用Vue原型链继承,初始化,引入封装好的动画库。import scrollReveal from "scrollreveal";// 引入初始css样式import "./asse原创 2021-05-08 15:38:37 · 2368 阅读 · 1 评论 -
解决vuex页面刷新异步数据丢失问题
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。1.产生原因其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被清空。就相当于你声明的全局变量存储在堆和栈内存当中,页面刷新之后就会全部销毁,需要你进行重新赋值。更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的原创 2020-11-12 15:50:56 · 4224 阅读 · 14 评论 -
vue中封装富文本编辑器Quill
quill,样式不用多说,也是主流的黑白清新风,美观,功能上虽然不是很多,甚至还没有表格,网络图片上传(可以通过复制网络图片并黏贴解决)等功能,但它的代码高亮是最完美的,同样支持行内编辑模式,可自定义,总的来说,这是一款优点多但缺点同样明显的编辑器,以前用过UEditor,区别大概就是UEditor需要在config文件配置参数,比如上传图片路径之类,Quill不需要,另外就是有个vue-quill-editor包,配合vue使用比较简单吧,所以我比较喜爱这款。安装npm install quill@1原创 2020-10-23 10:49:45 · 1236 阅读 · 5 评论 -
Animate.css在vue中没生效
"animate.css": "^4.1.1",第一步第二步>V4版本使用第一步npm install animate.css --save// oryarn add animate.css//or cdn<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /></hea原创 2020-09-22 15:01:56 · 2901 阅读 · 2 评论 -
vue组件之间通信方法
万金油:vue中央事件总线的使用vue中央事件总线这种方法适用于任何情况的父子组件通信,同级别组件通信,相当于组件通信间的万金油。但是碰到多人合作时,代码的维护性较低,代码可读性低(这个缺点可以忽略)。在vue-cli中使用 集中式事件管理机制:第一步:在 src/main.js新建一个$bus对象,其实他是一个全新的Vue实例// main.jslet $bus = new Vue()Vue.prototype.$bus = $bus示例:index.vue为父组件,两个子组件 heade原创 2020-09-04 10:59:22 · 363 阅读 · 0 评论 -
Vue校验规则
内置了一些校验规则,如是否手机号,邮箱号,URL等这些规则方法,挂载在==$r==下面,如果验证通过,返回true,否则返回false导入脚本大家可以通过本链接: GitHup.地址进行代码下载是否邮箱号email(email)校验是否邮箱号,返回true或者false// email <String> 字符串console.log(this.$r.email('123465798@gmail.com'));是否手机号mobile(mobile)校验是否手机号,返回true或原创 2020-07-22 11:53:09 · 1794 阅读 · 0 评论 -
Vue2.0项目工程升级3.0
建议读者先通过通过官网先了解一下链接: Vue CLI3.0下面就简单分享一下我的升级过程因为我构建项目都是基于3.0的,所以对于2.0的用户可以先升级一下脚手架工具已经装了2.0的话就需要先卸载npm uninstall vue-cli -g 或 yarn global remove vue-cli安装新版本脚手架npm install -g @vue/cli 或 yarn global add @vue/cli然后创建一个新的项目工程,如果没有创建过3.0项目工程建议先阅读一下这原创 2020-07-16 15:31:34 · 14065 阅读 · 8 评论