![](https://img-blog.csdnimg.cn/20190904144456247.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue.js
vue.js专栏更新vue.js知识点原理剖析以及vue.js组件库或第三方组件库的使用
有梦想的咸鱼前端
这个作者很懒,什么都没留下…
展开
-
vue实现输入框的模糊查询(节流函数的应用场景)
上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量、内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数;原创 2019-09-04 13:39:06 · 4796 阅读 · 2 评论 -
vue-router路由元信息及keep-alive组件级缓存
路由元信息?(黑人问号脸???)是不是这么官方的解释很多人都会一脸懵?那么我们说meta,是不是很多人恍然大悟,因为在项目中用到或者看到过呢? 是的,路由元信息就是我们定义路由时配置的meta字段;那么这个meta的作用是什么呢? 首先看一个场景: 通常我们在开发网站或者移动应用的时候,我们通常会有网页权限验证的需求(别说你没有,你肯定有),这种需求一般是指需要登录后才可...原创 2019-09-28 16:03:37 · 301 阅读 · 0 评论 -
理解Vue.mixin,利用Vue.mixin正确的偷懒
关于Vue.mixin在vue官方文档中是这么解释的: 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 我们的理解:Vue.mixin给我们提供了一种混入Vue实例的方法,创建了混入对象之后,我们自定义的方法或者变量可以很轻松的挂载...原创 2019-09-26 13:37:56 · 233 阅读 · 0 评论 -
vue-router钩子函数实现路由守卫
接上一篇,我们一起学习了vue路由的基本使用以及动态路由、路由嵌套以及路由命名等知识,今天我们一起来学习记录vue-router的钩子函数实现路由守卫; 何为路由守卫?路由守卫有点类似于ajax的请求拦截器,就是请求发送之前先给你拦截住做一些事情之后再去发送请求,同样这里的路由守卫意思差不多;简单理解为就是你在进路由之前,首先把你拦住,对你进行检查;这是不是有点中学门口的保安?进来之前拦...原创 2019-09-24 11:10:09 · 312 阅读 · 0 评论 -
Vue路由(vue-router)详细讲解指南
中文文档:https://router.vuejs.org/zh/Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转;首先我们来学习三个单词(route,routes,router): route:首先它是个单数,译为路...原创 2019-09-21 15:09:01 · 532 阅读 · 0 评论 -
一文轻松搞懂Vuex
概念: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式(官网地址:https://vuex.vuejs.org/zh/)。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 换成我们大白话来说:Vuex就是一个状态管理模式,可以简单的理解为一个全局对象,然后我们可以修改这个全局对象里面的属性或者添加方法,但是我们不能像传统...原创 2019-09-20 16:49:56 · 156 阅读 · 0 评论 -
H5中的history方法Api介绍
最近公司在做一个微信公众号,看了项目源码,看到项目中用到了history的Api来进行控制浏览器的历史记录及前进/后退键;下面来跟大家一起来捋捋history的Api方法和使用:history.pushState(data,title,url):在浏览器中新增一条历史记录;data会在onpopstate事件触发时作为参数传递过去,title为页面标题,url为页面地址;history.r...原创 2019-09-04 14:07:25 · 862 阅读 · 0 评论 -
vue.js中ref及$refs的使用及讲解
关于ref和$refs的用法及讲解,vue.js中文社区( https://cn.vuejs.org/v2/api/#ref )是这么讲解的: ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件;vue.js中文社区文档上的说明已经就比较通俗易懂了,其实...原创 2019-09-04 14:05:06 · 2901 阅读 · 0 评论 -
vue中的v-if和v-show的区别
v-if和v-show的区别是前端面试中常问的基础知识点,v-if、v-show顾名思义就是用来判断视图层展示效果的。那么具体是怎么展示呢?v-if和v-show的区别又是什么呢?首先我们可以来看一下Vue中文社区说明文档的介绍:Vue中文社区说明文档中简单来说是:初始渲染的时候进行条件判断展示;在实际开发中我们会经常使用到v-if和v-show来进行判断展示,我们可以这么理解:<...原创 2019-09-04 14:02:10 · 635 阅读 · 0 评论 -
vue-cli+v-charts实现可视化图表
v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具,在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。v-charts的中文社区文档(...原创 2019-09-04 13:59:16 · 1660 阅读 · 0 评论 -
vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:方法一:params传参:this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) ...原创 2019-09-04 13:54:00 · 6517 阅读 · 3 评论 -
AntV F2+vue-cli构建移动端可视化视图
AntV F2是蚂蚁金服旗下的一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(Node, 小程序,Weex),完备的图形语法理论,满足你的各种可视化需求,专业的移动设计指引为你带来最佳的移动端图表体验。AntV F2官方文档地址:https://antv.alipay.com/zh-cn/f2/3.x/话不多说,直接进入正题:Antv F2官方比较友好,给我...原创 2019-09-04 13:52:18 · 2702 阅读 · 0 评论 -
vux-scroller实现移动端上拉加载功能
本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能:纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态管理工具,vux是一款移动端的UI组件库;vux(官方文档:https://doc.vux.li/zh-CN/)是基于WeUi和vue(2.x)开发的移动端的UI组件库,主要服务于微信页面。基于we...原创 2019-09-04 13:47:10 · 513 阅读 · 0 评论 -
vue实现手机号码的校验(防抖函数的应用场景)
上一篇博文我们讲到了节流函数的应用场景,我们知道了节流函数可以用在模糊查询、scroller、onresize等场景;今天这篇我们来讲防抖函数的应用场景: 通过上一篇博文的学习,我们知道了防抖函数的原理:只有在事件触发的时候才会延迟加载,如果在延迟加载之前再次触发,则会刷新延迟时间重新延迟,触发次数有且只有触发一次; 如果对防抖函数原理有疑惑,请点击链接跳转到关于防抖函数讲解的...原创 2019-09-04 13:44:11 · 1037 阅读 · 0 评论 -
简单理解Vue中的nextTick
Vue.nextTick是Vue官方给我们提供的一个API(方法),作用是在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM; 那么我们的理解是:当数据发生变化之后,DOM视图并不会立即更新,如果我们在发生变化之后立马去获取某个节点或者某个节点的值,很有可能结果就是undefined;因为Vue实现响应式并不是数据发生变化之后DOM立即变化,而是...原创 2019-10-07 15:29:55 · 233 阅读 · 0 评论