言vue无忌
文章平均质量分 94
闲人王昱珩
不忘初心,就不错了
展开
-
vue进阶测试——虚拟dom是什么?
在深入探究虚拟dom的原理之前,先了解一下其概念是十分有必要的一件事。 什么是虚拟dom? 官网给出的概念:Vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。 一棵真实DOM树的渲染需要先解析CSS样式和DOM树,然后将其整合成一棵渲染树,再通过布局算法去计算每个节点在浏览器中的位置,最终输出到显示器上,这些步骤在浏览器的渲染过程及页面加载的优化方案一文中有详细的...原创 2018-07-26 11:40:19 · 3882 阅读 · 0 评论 -
vue-router入门(1)—— 基本路由,动态匹配路由,嵌套路由
本系列的第一章,按照惯例,介绍一下vue-router的设计初衷,我第一次接触到vue-router是通过vue-cli的全家桶,vue-router的设计之初是为了适应单页面应用开发,但事实上,你通过新标签页的方式去访问某个路由,和你通过当前页“跳转”到该路由,路由中所包含的信息都不会丢失,当然新标签页打开和当前页打开在某些情况下也是有区别的。(比如你打开../user/123,在通过当前页...原创 2018-09-04 09:23:32 · 6968 阅读 · 7 评论 -
Vuex入门(终章)—— module使用随便讲讲
本文转自https://blog.csdn.net/weixin_38788947/article/details/76034380 关于module的使用,为什么说随便讲讲,因为个人觉得module的分模块本身就毫无意义,如果分模块后可以部分加载什么的可能还有点性能上的优化,然而并没有,事实上在本系列的第一章我就阐述了vuex的初衷——公共状态管理。vuex被设计出来并不是为了代替Vue的...原创 2018-09-03 16:08:27 · 3538 阅读 · 0 评论 -
Vuex入门(5)—— 为什么要用Action管理异步操作
Action 类似于 mutation,不同在于:1.Action 提交的是 mutation,而不是直接变更状态。2.Action 可以包含任意异步操作。 官方给的定义我没什么意见,事实上我通过mutation异步操作,好像跟用action管理也没什么区别。关于为什么要用Action管理异步操作,我会通过一个简单的例子和一个复杂的例子来进行说明,事实上,如果初学者没有考虑到实际场景...原创 2018-09-03 15:21:46 · 28561 阅读 · 6 评论 -
vue-router入门(终章)—— 页面过渡,记住滚动,路由懒加载
vue-router里面提供的功能点除了路由懒加载是须要使用的,其他功能可以当作一个参考,如页面过渡,记住滚动条位置等。页面过渡 先讲页面过渡,关于页面过渡,也就是所谓的切换路由时候的动画效果,我们一般可以借助一些插件实现,如element-ui中就提供了相关的功能,当然vue-router也提供了类似的功能,毕竟是管理路由切换的,所以照顾到切换时候的动画也是正常的。<r...原创 2018-09-05 17:27:08 · 2646 阅读 · 2 评论 -
Vuex入门(3)—— getters,mapGetters,...mapGetters详解
Vuex提供了state这样的状态统一管理树,你可以在vue中用computed计算属性接收这些公共状态,以便使用,当然你也可以在接收原值的基础上对这个值做出一些改造,如computed:{ sex:function(){ return this.$store.state.sex + '加个字符串,算是改造' }} 但是如果你的其他组件也要使用这...原创 2018-08-30 14:38:01 · 148362 阅读 · 15 评论 -
vue-router入门(3)—— 导航守卫的使用和流程探究
在一个网站中,访问除了登录以外的接口往往都需要验证用户的个人信息,由于后台的登录信息在一定的时间后会失效,这个时候我们在跳转页面的时候再访问别的接口的时候,由于没有登录信息可能导致接口报错。一般我们会在vue组件的beforeCreate周期中写一个验证登录信息接口,以验证用户信息是否失效。 事实上上面的操作并没有什么软用,之前我在vue生命周期和异步加载的关系一文中就指出了异步操...原创 2018-09-04 16:57:22 · 4416 阅读 · 0 评论 -
vue-router入门(2)—— 命名视图,重定向和别名,router.push(),router.replace(),router.go()
关于vue-router的入门,个人感觉官网的东西写的有点乱,所以打算整理一些场景搭配使用。所以可能会漏掉一些个人觉得几乎用不到的功能。有兴趣的可以去官网看完整版。1.命名视图需求:首页的头部比较特殊,我们以颜色区分,首页可能需要用到一个绿色的header,其他页面的头部则用红色的header。我们通过命名视图(name),来设置不同的路由中用不同的header和main模板。用命...原创 2018-09-04 10:56:42 · 18423 阅读 · 0 评论 -
Vuex入门(2)—— state,mapState,...mapState对象展开符详解
上一章大概说明了vuex的设计初衷和基本用法,从这一章开始详解一下vuex的几个关键配置.1.state state是什么? 定义:state(vuex) ≈ data (vue) vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新. 虽然...原创 2018-08-30 10:10:40 · 295874 阅读 · 89 评论 -
Vuex入门(4)—— 用Mutation管理状态
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 关于vuex为什么这样做,先不要管,但请相信他这么做必然有很多的好处.在vue中,我们要修改data中的值,一般会怎么做.this.count = 2 //count from 1 to 2,触发视图更新 很简单,直接赋值,这也符合我们写代码的"一般规律",很舒服.但如果我们要修改vuex sto...原创 2018-08-31 16:30:49 · 6876 阅读 · 5 评论 -
Vuex入门(1)—— Vuex的设计初衷和简单使用
开一个Vuex的坑. 先来谈谈个人看法,之前很早的时候就用过Vuex做组件间通信,对于单页面应用来说,也就是不同的router子组件的一些数据通信,当然我也尝试过event bus的解决方案,这里不进行横向对比了,如果想做组件间的复杂通信,直接选择Vuex即可(个人建议).如果有人想学习Vuex,个人推荐是直接去官网的API,当然官网的API会让你先了解一下ES6的语法,当时也是看到那句...原创 2018-08-22 16:43:46 · 8000 阅读 · 11 评论 -
vue.js入门(1)——vue.js核心思想和基础操作(v-text,v-html,v-bind,v-on,v-for,v-show,v-if)
在本章开启之前,由于之前学习nodeJS莫名埋了个坑,因此,需要填一下swig模板渲染双大括号绑定数据,与VUE.JS也是双大括号绑定数据冲突的坑,查阅了官方文档,只要在new一个vue实例的时候,修改下delimiters参数即可,所以以后看到${}请默认为{{}}。这个参数不能设置成全局的,就很烦,所以每次初始化实例的时候都要写一遍。如果只是单纯的想看vue的内容请跳过这个开头。1.基...原创 2018-02-12 14:46:27 · 1883 阅读 · 0 评论 -
vue.js入门(2)——vue.js里的数据操作(data,methods,computed,watch)
关于vue.js的学习官方文档里有教程https://cn.vuejs.org/v2/guide/赞一下vue.js的维护人员,我会按照官方的API里整合的目录分模块进行学习本章内容是有关vue的数据处理,主要介绍data,computed,method,watch,有关props值传递,会单独开一章玩一下。ok,进入正题。(如对数据操作感兴趣的请看 个人对computer和filte...原创 2018-02-24 17:43:09 · 57941 阅读 · 9 评论 -
vue.js入门(3)——vue.js组件学习and组件间通信
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期...原创 2018-02-25 16:35:19 · 980 阅读 · 3 评论 -
构建个人组件库——vue.extend和vue.component
需求:构建一个类似elment-ui的组件库,打包发布到npm 个人探索:webpack打包发布到npm流程 --> 组件开发环境和组件发布环境探索 -->两种类型的组件 个人探索流程和实际流程基本是反着来的 本文目标:完成两种类型的组件,extend生成一个类似alert的组件,component生成一个search框组件 前置条件:本...原创 2018-04-28 10:34:35 · 7146 阅读 · 1 评论 -
vue进阶测试——computed,filters两种数据处理工具的局限性
个人对vue的了解不是非常深入,从自学vue(半个月),到正式使用vue,现在差不多用了快3个月的时间,期间遇到了大大小小的坑可以说是不计其数,有些领域(如生命周期和异步操作的“冲突”)都没时间好好研究,甚至是碰都不敢碰,大部分情况都是敷衍了事(遵循,你先把东西做出来,且看起来是好的原则,实际上是胡搞毛搞搞好的),本文单纯的整理了一些自己在用vue的过程中遇到的一些“跳过的”坑,今天花一个...原创 2018-07-13 16:54:31 · 6638 阅读 · 0 评论 -
vue进阶测试——生命周期和异步加载的微妙关系
本文继续探索vue中的坑,关于vue的生命周期和异步加载相关处理的文章还比较少,可能是自己没有用谷歌而用百度的缘故吧。关于异步操作和生命周期,会牵扯到浏览器的单线程处理机制,以及ES中的promise对象,有兴趣的可以事先了解一下再看下去,当然我自己对单线程的处理机制可能了解的也不是很深,写的不对,请指正。 关于本文中生命周期的理解,一切以实际出发,为什么要强调这个,因为实际情况...原创 2018-07-16 11:03:39 · 6562 阅读 · 8 评论 -
vue进阶测试——数据双向绑定原理探究
本课题研究承接浏览器的渲染机制一文,写文章前感谢一下趣链大佬的面试点播,虽然不知道听来了什么,哈哈~ 依旧是放上详细的参考链接 用了vue几个月后,写前端的思维方式逐渐从操作dom的方式中解脱出来,现在思考问题的时候,几乎都是带着如何以数据驱动模板的方式思考,因此,了解一下数据是如何驱动模板是一件十分必要的事情。 关于双向绑定一词(mvvm),可以分开来解读,即:如何监...原创 2018-07-25 17:30:20 · 2603 阅读 · 1 评论 -
vue中的methods和computed数据处理机制探索——多行文字的随机飘动效果
在用vue实现文字随机飘动效果的时候,引出了一些在vue中处理随机函数的一些小技巧。 如果你是为了文字随机飘动效果而来,也请了解一下我探索的历程。 如何实现一个随机飘动的多行字呢? 第一步:有多行字,暂时称他为子标签,相对于父容器绝对定位。 第二步:动态修改子标签的style,如left,top值,当然你也可以用transform中的tranla...原创 2018-09-26 16:53:27 · 1124 阅读 · 1 评论