vue 组件代码撸一遍
Posted djiz
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 组件代码撸一遍相关的知识，希望对你有一定的参考价值。
index.vue 源代码 三部分：template，script，style
一 、template 模板部分
1 <template> 2 <div class="index" v-cloak> 3 <div class="header acea-row row-center-wrapper"> 4 <div class="logo"><img :src="logoUrl" /></div> 5 <router-link :to="‘/search‘" class="search acea-row row-middle"> 6 <span class="iconfont icon-xiazai5"></span>搜索商品 7 </router-link> 8 </div> 9 <div class="slider-banner banner"> 10 <swiper :options="swiperOption" v-if="banner.length > 0"> 11 <swiper-slide v-for="(item, index) in banner" :key="index"> 12 <router-link 13 :to="item.wap_url ? item.wap_url : ‘‘" 14 class="search acea-row row-middle" 15 > 16 <img :src="item.pic" /> 17 </router-link> 18 </swiper-slide> 19 <div class="swiper-pagination paginationBanner" slot="pagination"></div> 20 </swiper> 21 </div> 22 <div class="nav acea-row"> 23 <router-link 24 :to="item.wap_url ? item.wap_url : ‘‘" 25 class="item" 26 v-for="(item, index) in menus" 27 :key="index" 28 > 29 <div class="pictrue"><img :src="item.pic" /></div> 30 <div>{{ item.name }}</div> 31 </router-link> 32 </div> 33 <div class="news acea-row row-between-wrapper"> 34 <div class="pictrue"><img src="@assets/images/news.png" /></div> 35 <div class="swiper-no-swiping new-banner"> 36 <swiper 37 class="swiper-wrapper" 38 :options="swiperRoll" 39 v-if="roll.length > 0" 40 > 41 <swiper-slide 42 class="swiper-slide" 43 v-for="(item, index) in roll" 44 :key="index" 45 > 46 <router-link 47 :to="item.wap_url ? item.wap_url : ‘‘" 48 class="acea-row row-between-wrapper" 49 > 50 <div class="text acea-row row-between-wrapper"> 51 <div class="label" v-if="item.show === ‘是‘">最新</div> 52 <div class="newsTitle line1">{{ item.info }}</div> 53 </div> 54 <div class="iconfont icon-xiangyou"></div> 55 </router-link> 56 </swiper-slide> 57 </swiper> 58 </div> 59 </div> 60 <div 61 class="specialArea acea-row row-between-wrapper" 62 v-if="activityOne.wap_link !== undefined || activity.length" 63 > 64 <router-link 65 :to="activityOne.wap_link ? activityOne.wap_link : ‘‘" 66 v-if="activityOne.wap_link !== undefined" 67 class="assemble" 68 > 69 <img :src="activityOne.pic" /> 70 <div class="text"> 71 <div class="name">{{ activityOne.title }}</div> 72 <div class="infor">{{ activityOne.info }}</div> 73 </div> 74 </router-link> 75 <div class="list acea-row row-column-between"> 76 <router-link 77 :to="item.wap_link ? item.wap_link : ‘‘" 78 class="item" 79 v-for="(item, index) in activity" 80 :key="index" 81 > 82 <img :src="item.pic" /> 83 <div class="text"> 84 <div class="name">{{ item.title }}</div> 85 <div class="infor">{{ item.info }}</div> 86 </div> 87 </router-link> 88 </div> 89 </div> 90 <div class="wrapper" v-if="info.fastList.length > 0"> 91 <div class="title acea-row row-between-wrapper"> 92 <div class="text"> 93 <div class="name line1">快速选择</div> 94 <div class="line1">{{ info.fastInfo }}</div> 95 </div> 96 <router-link :to="‘/category‘" class="more" 97 >更多<span class="iconfont icon-jiantou"></span 98 ></router-link> 99 </div> 100 <div class="scroll-product"> 101 <swiper class="swiper-wrapper" :options="swiperScroll"> 102 <swiper-slide 103 v-for="(item, index) in info.fastList" 104 :key="index" 105 class="swiper-slide" 106 > 107 <router-link 108 :to="{ 109 path: ‘/goods_list‘, 110 query: { id: item.id, title: item.cate_name } 111 }" 112 > 113 <div class="img-box"> 114 <img :src="item.pic" /> 115 </div> 116 <div class="pro-info line1">{{ item.cate_name }}</div> 117 </router-link> 118 </swiper-slide> 119 </swiper> 120 </div> 121 </div> 122 <div 123 class="wrapper" 124 v-if="info.bastList.length > 0 || info.bastBanner.length > 0" 125 > 126 <div class="title acea-row row-between-wrapper"> 127 <div class="text"> 128 <div class="name line1">精品推荐</div> 129 <div class="line1">{{ info.bastInfo }}</div> 130 </div> 131 <router-link :to="{ path: ‘/hot_new_goods/‘ + 1 }" class="more" 132 >更多<span class="iconfont icon-jiantou"></span 133 ></router-link> 134 </div> 135 <div class="slider-banner boutique"> 136 <swiper class="swiper-wrapper" :options="swiperBoutique"> 137 <swiper-slide 138 class="swiper-slide" 139 v-for="(item, index) in info.bastBanner" 140 :key="index" 141 > 142 <router-link :to="item.wap_link ? item.wap_link : ‘‘" 143 ><img :src="item.img" 144 /></router-link> 145 </swiper-slide> 146 </swiper> 147 <div class="swiper-pagination paginationBoutique"></div> 148 </div> 149 <Good-list :good-list="info.bastList" :is-sort="false"></Good-list> 150 </div> 151 <div class="hotList" v-if="likeInfo.length > 0"> 152 <div class="hot-bg"> 153 <div class="title acea-row row-between-wrapper"> 154 <div class="text line1"> 155 <span class="label">热门榜单</span>根据销量、搜索、好评等综合得出 156 </div> 157 <router-link :to="{ path: ‘/hot_new_goods/‘ + 2 }" class="more"> 158 更多<span class="iconfont icon-jiantou"></span> 159 </router-link> 160 </div> 161 </div> 162 <div class="list acea-row row-middle"> 163 <router-link 164 :to="{ path: ‘/detail/‘ + item.id }" 165 class="item" 166 v-for="(item, index) in likeInfo" 167 :key="index" 168 > 169 <div class="pictrue"> 170 <img :src="item.image" /> 171 <img 172 src="@assets/images/one.png" 173 class="numPic" 174 v-if="index === 0" 175 /> 176 <img 177 src="@assets/images/two.png" 178 class="numPic" 179 v-else-if="index === 1" 180 /> 181 <img 182 src="@assets/images/three.png" 183 class="numPic" 184 v-else-if="index === 2" 185 /> 186 </div> 187 <div class="name line1">{{ item.store_name }}</div> 188 <div class="money font-color-red"> 189 ￥<span class="num">{{ item.price }}</span> 190 </div> 191 </router-link> 192 </div> 193 </div> 194 <div v-if="lovely.img"> 195 <div class="adver"> 196 <img :src="lovely.img" /> 197 </div> 198 </div> 199 <div class="wrapper" v-if="info.firstList.length > 0"> 200 <div class="title acea-row row-between-wrapper"> 201 <div class="text"> 202 <div class="name line1"> 203 首发新品<span class="new font-color-red">NEW~</span> 204 </div> 205 <div class="line1">{{ info.firstInfo }}</div> 206 </div> 207 <router-link :to="{ path: ‘/hot_new_goods/‘ + 3 }" class="more" 208 >更多<span class="iconfont icon-jiantou"></span 209 ></router-link> 210 </div> 211 <div class="newProducts"> 212 <swiper class="swiper-wrapper" :options="swiperProducts"> 213 <swiper-slide 214 class="swiper-slide" 215 v-for="(item, index) in info.firstList" 216 :key="index" 217 > 218 <router-link :to="{ path: ‘/detail/‘ + item.id }"> 219 <div class="img-box"> 220 <img :src="item.image" /> 221 </div> 222 <div class="pro-info line1">{{ item.store_name }}</div> 223 <div class="money font-color-red">￥{{ item.price }}</div> 224 </router-link> 225 </swiper-slide> 226 </swiper> 227 </div> 228 </div> 229 <div class="wrapper" v-if="benefit.length > 0"> 230 <div class="title acea-row row-between-wrapper"> 231 <div class="text"> 232 <div class="name line1">促销单品</div> 233 <div class="line1">{{ info.salesInfo }}</div> 234 </div> 235 <router-link :to="‘/promotion‘" class="more" 236 >更多<span class="iconfont icon-jiantou"></span 237 ></router-link> 238 </div> 239 </div> 240 <Promotion-good :benefit="benefit"></Promotion-good> 241 <Coupon-window 242 :coupon-list="couponList" 243 v-if="showCoupon" 244 @checked="couponClose" 245 @close="couponClose" 246 ></Coupon-window> 247 <div style="height:1.2rem;"></div> 248 </div> 249 </template>
二、script javascript代码部分
1 <script> 2 import { swiper, swiperSlide } from "vue-awesome-swiper"; 3 import "@assets/css/swiper.min.css"; 4 import GoodList from "@components/GoodList"; 5 import PromotionGood from "@components/PromotionGood"; 6 import CouponWindow from "@components/CouponWindow"; 7 import { getHomeData, getShare } from "@api/public"; 8 import cookie from "@utils/store/cookie"; 9 import { openShareAll } from "@libs/wechat"; 10 import { isWeixin } from "@utils/index"; 11 12 const HAS_COUPON_WINDOW = "has_coupon_window"; 13 14 export default { 15 name: "Index", 16 components: { 17 swiper, 18 swiperSlide, 19 GoodList, 20 PromotionGood, 21 CouponWindow 22 }, 23 props: {}, 24 data: function() { 25 return { 26 showCoupon: false, 27 logoUrl: "", 28 banner: [], 29 menus: [], 30 roll: [], 31 activity: [], 32 activityOne: {}, 33 info: { 34 fastList: [], 35 bastBanner: [], 36 firstList: [], 37 bastList: [] 38 }, 39 likeInfo: [], 40 lovely: [], 41 benefit: [], 42 couponList: [], 43 swiperOption: { 44 pagination: { 45 el: ".paginationBanner", 46 clickable: true 47 }, 48 autoplay: { 49 disableOnInteraction: false, 50 delay: 2000 51 }, 52 loop: true, 53 speed: 1000, 54 observer: true, 55 observeParents: true 56 }, 57 swiperRoll: { 58 direction: "vertical", 59 autoplay: { 60 disableOnInteraction: false, 61 delay: 2000 62 }, 63 loop: true, 64 speed: 1000, 65 observer: true, 66 observeParents: true 67 }, 68 swiperScroll: { 69 freeMode: true, 70 freeModeMomentum: false, 71 slidesPerView: "auto", 72 observer: true, 73 observeParents: true 74 }, 75 swiperBoutique: { 76 pagination: { 77 el: ".paginationBoutique", 78 clickable: true 79 }, 80 autoplay: { 81 disableOnInteraction: false, 82 delay: 2000 83 }, 84 loop: true, 85 speed: 1000, 86 observer: true, 87 observeParents: true 88 }, 89 swiperProducts: { 90 freeMode: true, 91 freeModeMomentum: false, 92 slidesPerView: "auto", 93 observer: true, 94 observeParents: true 95 } 96 }; 97 }, 98 mounted: function() { 99 let that = this; 100 getHomeData().then(res => { 101 that.logoUrl = res.data.logoUrl; 102 that.$set(that, "banner", res.data.banner); 103 that.$set(that, "menus", res.data.menus); 104 that.$set(that, "roll", res.data.roll); 105 that.$set(that, "activity", res.data.activity); 106 if (res.data.activity.length) { 107 var activityOne = res.data.activity.shift(); 108 that.$set(that, "activityOne", activityOne); 109 } 110 that.$set(that, "info", res.data.info); 111 that.$set(that, "likeInfo", res.data.likeInfo); 112 that.$set( 113 that, 114 "lovely", 115 res.data.lovely.length ? res.data.lovely[0] : {} 116 ); 117 that.$set(that, "benefit", res.data.benefit); 118 that.$set(that, "couponList", res.data.couponList); 119 that.setOpenShare(); 120 this.showCoupon = 121 !cookie.has(HAS_COUPON_WINDOW) && 122 res.data.couponList.some(coupon => coupon.is_use); 123 }); 124 }, 125 methods: { 126 couponClose() { 127 cookie.set(HAS_COUPON_WINDOW, 1); 128 }, 129 setOpenShare: function() { 130 if (isWeixin()) { 131 getShare().then(res => { 132 var data = res.data.data; 133 var configAppMessage = { 134 desc: data.synopsis, 135 title: data.title, 136 link: location.href, 137 imgUrl: data.img 138 }; 139 openShareAll(configAppMessage); 140 }); 141 } 142 } 143 } 144 }; 145 </script>
三、style css 样式部分
<style scoped>
.index {
background-color: #fff;
}
</style>
以上是关于vue 组件代码撸一遍的主要内容，如果未能解决你的问题，请参考以下文章