测试圈相亲平台开发流程(7):详情页基础信息部分-前端开发

·  阅读 53

本平台并非真实运营和使用,仅在于学习研究平台前后端研发技术使用。

今天继续开始做这个平台的三大页之一:详情页的基本信息部分

Part1清理出中间页面的战场:

图片

结果如下:

图片

Part2创建组件

然后我们去src/components文件夹下新建一个组件,为什么要新建组件呢?因为这里的内容太多了,直接都写到Home.vue中并不好,正好也带大家先熟悉下vue-cli的组件化结构开发:

名字就叫Detail.vue ,注意首字母大写。图片

里面的具体内容,很简单,就是一堆输入框:

图片

Part3引入组件

我们创造了组件后,自然要去Home.vue中引入才能看到它:打开Home.vue,在底部的script中改成如下:

图片如上图所示,就是给弄进来了,并且取名为Deatil

然后去dom层去使用,即可在指定位置显示我们组件的全部内容:

图片

效果如下:

图片

好了,本节课到此了,下节课我们搞定择偶标准组件,规则和这个几乎一样。

(如果觉得这个系列讲的过快可以私聊作者哦~ 话说作者培训班讲的可是非常细致的,每一句代码每一个操作都实际的展现在你面前,想报名的也私聊~)

分类:
开发工具
标签:
收藏成功!
已添加到「」, 点击更改