vue 小结

学校的作业弄完了,好多在文档里就写过一遍,但还是想再来一遍。

首先是对互联网开发的业务的…瞎胡描述一下,就是数据加贴图,一点美工加上增删改查,还有各种零零碎碎的小玩意…好像也没什么神秘的。神秘之处…也许在体量…

对于数据,最常见的形式是键值对,对于这个形式:键是外壳标号、值是内里,内里需要一个外壳标号才能被识别、放在正确的位置。就像快递里的物品本身和运单号或者取货码。
而对于vue,vue中提供了许多各种各样的数据绑定传输的小玩意,从{{ }},v-model,v-bind对具体数据的绑定;到用来监听用户鼠标键盘上操作的v-on的click,keyup等等 这可能是最有趣的一部分了…因为要看的东西很短,有实时的交互,和css样式控制结合,很容易弄出些好玩的小玩具出来。
稍微bb一下,vueComponent里一些东西,name,methods,data,props,mounted……这些东西感觉和java里的注释作用很像,让框架识别那里写的东西都是什么,但…不知道为什么vue里的看着就是舒服好多。



然后是,组件化。
还是糙一点的话,就是高级复制粘贴,让杂乱的重复代码简洁有序起来。

parent-child组件的问题,那个词用的很好,“注册组件”,而非面向对象里的“继承”,组件已经可以看做是一个对象了(虽然它还不是),而不是抽象的、未实现的类。这两个的parent-child根本不是一回事,在很多点上看起来相似又相反,所以对于传统的“父子”类这种叫法,我会想换一个,我会想把这里的parent-child叫成母子组件(其实我有过思考的!不是随便叫的!最简单的,“继承”体现的自顶向下,“注册”体现的是自底向上。)。

组件间通信。

1.大组件朝小组件给数据。
Props,作为子组件的那个组件里的props。那是给妈妈组件开一个接口,从妈妈那里拿数据传到子组件,经过子组件处理后展示在子组件的template里,然后再由妈妈组件调用、一整个展示。(为什么有种奇怪的感觉)(路由的props可以和组件的交互!组件还可以和路由xxoo(不是))
2.大组件从小组件拿数据。
$refs,在元素标签,在vue自定义的小子组件标签里可以写上一个ref=“xxx”,然后就可以在妈妈组件里用this.$refs.xxx.data拿到那个元素,或者不写后面的data,直接拿一整个child-VueComponent,子组件。还有就是在vue里用this,指到的就是那一个vue组件…?
3.小组件给大组件传数据, this.$emit。这个方法…我没怎么用过,听说和之后的一个叫“全局事件总线”的东西很像,只是后者是全局。“全局事件总线”,任意门那种,不用妈妈孩子一层层的传,可以跳。但具体我不了解;在我写在用户、在文章页、在各个地方点击用户头像就能跳转到用户个人页面的时候,写了一遍遍一样的方法时…我想着也许这个可以用,但我没太用。

组件化的具体应用的话,导航栏、页头页脚什么的就不说了,我做作业的过程中弄好的一个有意思的地方在,把“文章们的简略展示”这一模块单独摘成一个组件,用到的传输方式是1.大组件朝小组件给数据。props。
不管是“按时间顺序排布”,“按搜索结果排布“,“按发布作者排布”…,都可以用,在这几个形成了单独页面的大组件中注册用于文章简略展示的小组件,把大组件发送请求后从后端拿到的数据用props传给小组件,进行处理、排版等,然后再由大组件统一展示。



然后是vue的工程文件结构。
vue这边是maim.js引入App.vue,把它作为一个子组件,然后,创建一个妈妈的妈妈?——#app,将App作为子组件;而之后的组件一般都作为App.vue的子组件,或者更常见的、在App里写个router-view然后直接在router的index.js里import一下,直接跳转就好。
对,vue里不可忽略的一个东西就是路由,vue-router,表面上只是一个跳转工具,但…作用可太大了。
首先它把跳转的代码都集中在了一起,虽然这不太重要的。重要的是它能通过router-view、路由传参、等等快速建立起页面间的关系,而且不仅仅是跳转关系,从页面跳转到网页视图显示、在url地址里搞数据传输都藏在这个一上来看起来就只是个跳转功能的玩意下。(如果说组件化主要整理的是一个个功能块的代码,方便程序员去写、修改;那路由整理的就是一个个网页,是直接和网站展示给用户的样子相关的)
另外,main.js也是引插件的地方,要注意的是,这里是全局引入插件,像一些几乎每个vue文件都要用的router,axios、element ui等等,就在这里引。自己写的组件如果用的很多很多可能也可以在这里引…对了上面提到的全局事件总线也是要在这里定义,它本质和$emit也许没太大差,但就是全局。如果那个功能不都用,就在要用的vue组件里面单独配置、引入就好。

2 个赞

数据代理——总是就是很方便。vue之所以能直接用this.xxx直接获取data里的数据,靠的可能就是这个。

生命周期——网页的一部分行为可以写在methods里然后依靠v-on监听用户单击或其他行为进行触发,但另一部分却不可以,这时候提供的生命周期函数,或者叫生命周期钩子的东西,created、mounted等等(它们和methods、data一样,也是个注解)就可以在网页加载的特定时期执行那部分不能靠用户点击才反应的行为(比如向后台发送请求要数据,loadTable,渲染网页不可能等用户反应了再动,一打开就要自动执行)

vue这块你学的内容广度已经超过我了 :rofl:

确实牛皮,学的很快,又快又好.