vue 定位所在地_vue系列教程之微商城项目|商品购买

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

页面注册

1.新建页面 secondary/shopping.vue

2.注册页面，将页面与对应路由绑定

3.测试，点击主页中的商品购买路由跳转到shopping

引入顶部导航栏

效果图

编写商品卡片

不详述静态页面的编写，只说明思路.

1.新建商品卡片组件

2.商品信息通过props获取

3.为商品卡片添加点击事件，当该商品卡片被点击，通过this.$emit('函数名',参数),在父组件中通过 @函数名监听商品卡片的点击事件.需要注意，这里的函数名只能是小写字符串，可以用-分割，参数只能有一个.

商品卡片组件

components/secondary/shopCard.vue

商品数据及属性说明

url:商品图片，title:商品标题，price:现价，org_orice:原价，buied:购买人数，comments:评论人数，

collect:收藏人数，position:商家所在地，child:商品详情图列表

请求数据并编写商品列表页面

请求数据

后端路由：'/goods'，get请求,无需请求参数

network/requets.vue 中追加以下内容

编写商品列表页面

1.引入商品卡片组件并使用,记得监听商品卡片的点击事件

2.布局编写可通过flex布局或者vant-ui的宫格组件实现布局

3.通过position定位给内容区设置固定高宽，并隐藏超出内容区的内容

4.引入请求函数，在created中发送数据请求，请求商品数据，并将数据渲染到页面上查看效果

5.将内容区初始化为better-scroll对象，需要注意的是，必须在watch中监听商品数据变化，通过this.$nextTick()确保数据渲染完成后，在进行better-scroll的初始化。如果不清楚原因可以回顾分类页面制作的文章.

商品列表页面

views/secondary/shopping.vue

本篇文章是该系列文章中的第十篇，讲述的是导航栏组件封装的相关操作步骤。下篇系列文章之导航栏与页面绑定正在制作之中，各位粉丝敬请期待。

实习编辑：李欣容

稿件来源：深度学习与文旅应用实验室(DLETA)

vue 定位所在地_vue系列教程之微商城项目|商品购买相关推荐

vue怎么引入外部地址_vue系列教程之微商城项目|主页
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 轮播图 1.引入轮播图组件 main.js 2.新建轮播图组件 components/zhuye/s ...
vue系列教程之微商城项目|项目介绍
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 简介这是一系列 ...
vue系列教程之微商城项目|项目创建
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 1.下载并安装no ...
vue系列教程之微商城项目|主页
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 轮播图 1.引入轮播图组件 main.js 2.新建轮播图组件 components/zhuye/s ...
vue 定位所在地_vue使用高德地图，精确定位ip定位，获取城市、地区位置
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 1.高德地图准备点进入网址:https://lbs.am ...
Vue 微商城项目（一）
简介这是一系列关于如何用Vue编写微商城的项目文档一,适合初学者与已学完Vue基础的读者.教程与vue3.x.vue-cli4,vant-ui等框架,简单易懂. 涉及知识点 vue项目创建 vue基 ...
Spring Security系列教程03--创建SpringSecurity项目
前言在上一章节中,一一哥已经带大家认识了Spring Security,对其基本概念已有所了解,但是作为一个合格的程序员,最关键的肯定还是得动起手来,所以从本篇文章开始,我就带大家搭建第一个Spr ...
(开源)基于vue, react, node.js, go开发的微商城（含微信小程序）
微商城地址: https://github.com/shen100/wemall 求star,求关注项目截图微信小程序项目环境搭建 1 克隆代码 git clone https://githu ...
【基于物联网的智能草莓种植系统的设计与实现系列教程】1-项目相关硬件购买清单与资料下载（课程设计、毕设项目、树莓派、yolov5）
[基于物联网的智能草莓种植系统]项目相关硬件购买清单与资料下载项目各章节跳转硬件清单软件下载代码下载猜你需要项目各章节跳转可点击跳转到对应章节 ==> 努力更新中... 0.基于物 ...

vue 定位所在地_vue系列教程之微商城项目|商品购买

vue 定位所在地_vue系列教程之微商城项目|商品购买相关推荐

最新文章

热门文章