2020/10/23、 周五、今天又是奮斗的一天。

@Author：Runsen
@Date：2020/10/23

寫在前面：我是「Runsen」，熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。大四棄算法轉前端，需要每天的日積月累， 每天都要加油！！！

今天將完成Vue項目去哪兒網首頁圖標區域邏輯實現，下面是在本次慕課網完成Vue項目去哪兒網首頁圖標區域邏輯實現的總結和感受。

文章目錄

• 創建分支
• 在Home.vue導入Icons組件
• Icons.vue
• 推送

創建分支

在碼云項目中，創建一個新的分支index-icons。

然后通過git pull和git checkout index-icons進行圖標區域功能的開發。

在Home.vue導入Icons組件

Icons.vue

<template><div class="icons"><swiper><!-- pages指的是計算屬性 --><swiper-slide v-for="(page, index) of pages" :key="index"><divclass="icon"v-for="item of page":key="item.id"><div class='icon-img'><img class='icon-img-content' :src='item.imgUrl' /></div><p class="icon-desc">{{item.desc}}</p></div></swiper-slide></swiper></div> </template> <script> export default {name: 'HomeIcons',// 子組件的data必須是函數 ES6 data后面有空格data () {return {iconList: [{id: '0001',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',desc: '景點門票'}, {id: '0002',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1711/df/86cbcfc533330d02.png',desc: '滑雪季'}, {id: '0003',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1710/a6/83f636bd75ae6302.png',desc: '泡溫泉'}, {id: '0004',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/35/2640cab202c41b02.png',desc: '動植園'}, {id: '0005',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1711/df/86cbcfc533330d02.png',desc: '滑雪季'}, {id: '0006',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1711/df/86cbcfc533330d02.png',desc: '滑雪季'}, {id: '0007',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1710/a6/83f636bd75ae6302.png',desc: '泡溫泉'}, {id: '0008',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/35/2640cab202c41b02.png',desc: '動植園'}, {id: '0009',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/a9/ffc620dbda9b9c02.png',desc: '一日游'}]}},// 計算屬性computed: {pages () {const pages = []// forEach遍歷iconList，計算page頁數this.iconList.forEach((item, index) => {const page = Math.floor(index / 8)// 這里的pages是兩級數組if (!pages[page]) {pages[page] = []}pages[page].push(item)})return pages}} } </script> <style lang="stylus" scoped>@import '~styles/varibles.styl'@import '~styles/mixins.styl'.icons >>> .swiper-containerheight: 0padding-bottom: 50%.iconposition: relativefloat: leftwidth: 25%height: 0padding-bottom: 25%.icon-imgposition: absolutetop: 0left: 0right: 0bottom: .44rembox-sizing: border-boxpadding: .1rem.icon-img-contentdisplay: blockmargin: 0 autoheight: 100%.icon-descposition: absoluteleft: 0right: 0bottom: 0height: .44remline-height: .44remtext-align: centercolor: $darkTextColorellipsis() //ellipsis這里是限制字體的描述的 </style>

推送

完成功能需求后，推送到對于的分支，在回到主分支，將開發的分支合并的主分支中，再提交代碼到倉庫。

在本次課程中，學到使用Vue.js devtools插件

參考課程：慕課網Vue2.5->2.6->3.0 開發去哪兒網App 從零基礎入門到實戰項目開發

請一鍵三連！！！！！

總結

以上是生活随笔為你收集整理的六十七、完成Vue项目首页图标区域布局和逻辑实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。