vue element admin学习过程

最近提了新的需求,让我去看一下vue element admin,由于之前并没有接触过vue,所以看起来有点云里雾里的,看的都懂,写起来又是另一回事了。

这边记录下学习过程。

我的学习资料主要是vue的官方文档,以及b站的一个视频

这个视频还不错,挺细的,零基础看应该没问题,我先看的文档,所以视频这块基本上是倍速,加快进。

vue是中国人开发的,官方文档也好理解,所以看的比较多。

学习前,先问了大佬需要掌握的一些入门知识。

学习过程应该是vue基础知识-->vuex,vue router-->vue element。

vue element是vue的一个组件库,个人感觉可能不用太花时间学习。

由于之前没有接触过vue,所以这里vue的基础知识可能记载的比较多。

首先是vue的生命周期,主要之前我写android的,所以有点在意,官方的图我就不上了,这里说一下个人的理解。

首先是初始化一个vue,然后执行对应的钩子函数,created,mounted,updated,destory。这四个还有对应的before,如beforecreate函数。

带before前缀的函数比不带的要稍早些。

所以这个流程是create,然后mounted,之后就是模版渲染,渲染完了之后根据数据不断的update。

当数据被修改,先执行beforeupdate,然后虚拟Dom重新渲染,然后在updated。

当然也可以从字面上去理解,更新前,和已更新。

接下来是代码这边的,我就记一些要点,这些要点都要自己写html页面写过之后才可以理解的。

首先是v-bind,官网给了一个鼠标悬停显示时间的例子,这个我理解为绑定html属性,当然他可以搭配别的方法玩出花来。这里抛个砖,加个v-on就可以实现根据不同事件显示不一样的属性。

v-on,可用@代替,vue中的事件监听,也是比较重要的东西。

v-model,vue中的数据绑定,可以绑定表单数据,用处数据处理应该会比较方便。

v-if,v-else,v-else-if。这三个是vue的条件分支语句。注意,当他用于是否显示某个div的时候,可用v-show代替。

v-for,vue的循环。这个可以在前端处理对象信息。比如说在data中绑定了一个user对象,可以用v-for来循环获取每一个user对象。

v-once,这个不知道能干什么,只获取一次数据,之后不管。

v-html,可以把html内容插入到网页中。这样说可能会有点迷糊。可以看作,后台传了一个html内容过来,把它插进对应的div里。

v-text,同v-html,插入文本。

v-show,控制页面元素是否隐藏。原理是将display属性值变为none,修改的是css属性,而如果用v-if来操控的话是涉及了js了,效率上说肯定是css比js好。

当然还有computed和watch。computed用于计算属性,它里面的函数是一个对象。watch是监控属性变化。

vue更改样式的方法,通过v-bind绑定html中的class属性进行更改。或者,用computed,这部分没仔细看,视频教程中有说。

vue实现效率更快的原因是虚拟Dom和diff算法。所谓虚拟Dom就不是真正的Dom,Vue页面上的元素都是虚拟Dom,当你修改一个div的宽高时,diff算法会算出这个虚拟Dom修改前后的区别,然后在虚拟Dom上直接进行修改。相对在Dom树上进行修改来说,效率快很多。

到此,vue基础知识我觉得看的差不多了,像组件那块我就简单的看了下,觉得还是用到的时候再深入看看。

这边开始讲vue router。

这块主要讲的是路由,他有一个router文件用来分发路由,这块我以前接触过django感觉有点类似,匆匆看一下就算了。然后还有一个就是路由传值过去。

这边有两个方法,一个是params和query。后者传的值会在url中明文显示。

这两种方法在推路径的时候语句也不相同,这块login我实在路由表里配好了,可以仔细看一下这两句的区别,query用的是path,params用的是name。

this.$router.push({path: '/Login', query: {username: this.message1}})
          
this.$router.push({name: 'login', params: {username: this.username}})
          

这边接受的话就比较好理解了。

this.$route.query.username

this.$route.params.username   

这样即表示第一个页面的username参数。

感觉到了这一块路由应该算看完了。

然后是vuex,看到后面有些浮躁,我好像也没找到一些比较好的资料来讲这块的,所以简单的理解了下他的概念。

他在项目的目录为store。有四种属性(不知道这么说对不对)。

state,仓库,把数据存在这里面。

getters , 把仓库里的数据拿出来。

mutations , 更新getters数据,(同步更新)

actions, 异步操作(更新数据)

他还有一个module,可以把这四个整合起来,作为一个对象。

这些我大概了看了一整天整理下来的,要学习vue element admin可能只是微不足道的前置知识吧。

vue element admin的作者也开了博客讲这个,可以参考下。

https://juejin.im/post/59097cd7a22b9d0065fb61d2

原文地址:https://www.cnblogs.com/afei123/p/12980331.html