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>
View Code

 

二、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>
View Code

 

三、style css 样式部分

<style scoped>
.index {
    background-color: #fff;
}
</style>

以上是关于vue 组件代码撸一遍的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js的入门

vue.js 的起步

vscode代码片段生成vue模板

vue中的组件

MYSQL官方文档需要撸一遍(待学习)

前端入门之(vue-router全解析二)