2024年前端最新实战Vue：基于Vue的移动端购物商城(1)，滴滴 战略 面试

于 2024-05-14 00:08:08 发布
阅读量805 收藏 27
点赞数 12
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84619432/article/details/138825053
版权

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

  • HTML5有哪些新特性？

  • Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

  • 如何实现浏览器内多个标签页之间的通信？

  • ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

  • 简述⼀下src与href的区别？

  • cookies,sessionStorage,localStorage 的区别？

  • HTML5 的离线储存的使用和原理？

  • 怎样处理 移动端 1px 被 渲染成 2px 问题？

  • iframe 的优缺点？

  • Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 问：0.1 + 0.2 === 0.3 嘛？为什么？

  • JS 数据类型

  • 写代码：实现函数能够深度克隆基本类型

  • 事件流

  • 事件是如何实现的？

  • new 一个函数发生了什么

  • 什么是作用域？

  • JS 隐式转换，显示转换

  • 了解 this 嘛，bind，call，apply 具体指什么

  • 手写 bind、apply、call

  • setTimeout(fn, 0)多久才执行，Event Loop

  • 手写题：Promise 原理

  • 说一下原型链和原型链的继承吧

  • 数组能够调用的函数有那些？

  • PWA使用过吗？serviceWorker的使用原理是啥？

  • ES6 之前使用 prototype 实现继承

  • 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

  • 事件循环机制 （Event Loop）

三、项目流程

=================================================================

1. vue快速创建基础项目

vue create hk-shop

  1. 选择需要的配置

在这里插入图片描述

在这里插入图片描述

  1. 创建基础文件夹目录

src文件夹下文件夹目录：

① views 文件夹存放界面

② components 文件夹存放界面中局部组件

③ config 文件夹存放各种全局配置

④ images 文件夹存放图片

⑤ plugins 文件夹存放各种插件

⑥ router 文件夹存放路由

⑦ store 文件夹存放vuex相关文件

⑧ service 文件夹存放服务器端相关操作，接口等

⑨ style 文件夹存放样式

在这里插入图片描述

2. 移动端开发——配置FastClick

  1. 什么是FastClick？

① FastClick 是一个简单易用的库，它消除了移动端浏览器上的物理点击和触发一个 click 事件之间的 300ms 的延迟 ；

② 目的就是在不干扰你目前的逻辑的同时，让你的应用感觉不到延迟，反应更加灵敏；

③ 实现原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，

并把浏览器在300ms之后真正的click事件阻止掉。

  1. 为什么会存在延时？

① 移动端浏览器会从你点击按钮之后，等待大约 300ms 才会触发点击事件

② 原因是浏览器会等待看你的行为是否会是双击

  1. 配置方法

① 将fastclick拉取到项目中 npm i fastclick -S

② 配置方案

Ⅰ直接在main.js中进行配置

main.js

// 1. 引入FastClick

import FastClick from ‘fastclick’

// 2. 配置FastClick

if (‘addEventListener’ in document) {

document.addEventListener(‘DOMContentLoaded’, function () {

FastClick.attach(document.body);

}, false);

}

在这里插入图片描述

Ⅱ 在plugin文件夹中新建FastClick.js并在其中配置，并将其在main.js中引入

在这里插入图片描述

在这里插入图片描述

3. 在public文件夹下的index.html中，修改页面标题（title）和logo（ico）

在这里插入图片描述

在这里插入图片描述

4. 配置全局样式

  1. 在style文件夹下新建commen.less，并在里面写好全局样式

  2. 在main.js中引入

在这里插入图片描述

5. 搭建主界面

  1. 要进行多界面切换，要在views文件夹内进行配置不同界面。在views文件夹下，每一个模块对应一个子文件夹。home — 主页、category — 分类、cart — 购物车、mine — 我的、dashboard — 主面板。

  2. 在每一个子文件夹（home、category、cart、mine、dashboard）下创建对应的页面。

举例：dashboard.vue

在这里插入图片描述

6. 配置路由

  1. 在router.js中，新建index.js文件夹。

在这里插入图片描述

  1. 在main.js中，引入router。并将其挂载到Vue对象上。

在这里插入图片描述

  1. 在新建的index.js中，配置路由

在这里插入图片描述

① 在这里，只有DashBoard在界面刷新的时候就加载，其余界面采用懒加载的方式，在点击跳转或者访问的时候才进行加载，便于提升性能。

② dashboard一级路由存在的必要性：为后续注册登录等功能提准备。

③ 不直接export default new Router的原因：便于做路由守卫

  1. 效果

在这里插入图片描述

在这里插入图片描述

7. 集成UI组件库Vant

  1. 安装vant npm i vant –S

  2. 安装babel-plugin-impor支持vant局部引用 npm i babel-plugin-import -D

  3. 在babel.config.js中进行配置

在这里插入图片描述

  1. 在plugins文件夹下，新建vant.js。配置引入不同的vant组件。

在这里插入图片描述

  1. 在main.js中引入vant.js。需要引入什么组件直接在vant.js中做修改即可。

在这里插入图片描述

8. 集成Vant底部Tabbar标签栏

直接借助官网API快速引入组件

在这里插入图片描述

  1. active 当前选中标签的索引 Number

  2. active-color 选中标签的颜色 String #000000

  3. inactive-color 未选中标签的颜色 String #ffffff

  4. replace to 路由跳转

  5. 图片属性 :src=“props.active ? icon.active : icon.inactive” 设置选中/非选中图片

9. 配置首页界面

（1）在Home.vue中，通过axios请求网络数据

  1. 安装axios npm i axios -S，并且封装axios网络请求

  2. 在service文件夹中，新建子文件夹api，并在api中新建文件index.js。负责汇总各种接口。

在这里插入图片描述

  1. 在api文件夹中新建ajax.js

在这里插入图片描述

  1. 在ajax.js中封装axios网络请求，并以函数ajax的形式向外界暴露在这里插入图片描述

  2. 在index.js中，从ajax.js中引入ajax方法

在这里插入图片描述

  1. 在index.js中，定义接口基础路径

在这里插入图片描述

  1. 在index.js中，定义getHomeData方法，该方法是请求主页的数据，为get方法，拼接完整URL调用ajax方法发起axios的get请求，并向外界暴露该方法。

在这里插入图片描述

  1. 在Home.vue中，引入数据请求方法，并在创建组件完成后的created钩子选项中发起ajax请求。

在这里插入图片描述

在这里插入图片描述

（2）顶部地址定位、搜索栏

  1. 在home文件夹内，新建子文件夹components，存放home.vue的子组件

在这里插入图片描述

  1. 在子文件夹components中新建header文件夹，在header文件夹内新建Header.vue组件

在这里插入图片描述

  1. 在Header.vue中将写好的html即样式拷贝过来

在这里插入图片描述

  1. 在Home.vue中引入组件Header.vue

在这里插入图片描述

在这里插入图片描述

（3）轮播图（借助Swipervue-awesome-swiper实现）

  1. 在home子文件夹components内新建子文件夹sowing，并在sowing文件夹中新建Sowing.vue

在这里插入图片描述

  1. 安装vue-awesome-swiper npm install

  2. 配置轮播图

注意：

① 下载最新版本的vue-awesome-swiper可能按照官方文档有些功能无法使用，可以直接下载低版本

② 配置分页、自动播放等功能无效的话，引入的时候加入以下代码。其他功能无效也可以试一下这个。

import Swiper2, {Navigation, Pagination, Autoplay} from ‘swiper’;

Swiper2.use([Navigation, Pagination, Autoplay]);

在这里插入图片描述

  1. 如果想在组件中使用或者控制轮播图，可以在监听computer中对swiper进行监听，并在组件的其他地方使用。

在这里插入图片描述

  1. 将首页的数据传输到轮播图组件中，并进行渲染

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（4）中部导航nav

  1. 在home子文件夹components内新建子文件夹nav，并在nav文件夹中新建Nav.vue

在这里插入图片描述

  1. 将静态界面放在Nav.vue中，并在Home.vue中引入

在这里插入图片描述

在这里插入图片描述

  1. 将Home.vue中请求到的数据通过props传递到Nav.vue，并进行遍历展示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（5）限时抢购

  1. 在home子文件夹components内新建子文件夹flashSale，并在flashSale文件夹中新建FlashSale.vue和FlashSaleItem.vue

在这里插入图片描述

  1. 将静态界面放在FlashSale.vue和FlashSaleItem.vue中，并在FlashSale中引入FlashSaleItem，在Home.vue中引入FlashSale

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  1. 将Home.vue中请求到的数据通过props传递到FlashSale.vue，再传递到FlashSaleItem.vue，并进行遍历展示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（6）配置猜你喜欢静态界面

  1. 在home子文件夹components内新建子文件夹youLike，并在youLike文件夹内新建YourLike.vue和YourLikeItem.vue

在这里插入图片描述

  1. 将静态界面放在YourLike.vue和YourLikeItem.vue中，并在YourLike中引入YourLikeItem，在Home.vue中引入YourLike

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  1. 将Home.vue中请求到的数据通过props传递到YourLike.vue，再传递到YourLikeItem.vue，并进行遍历展示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

（7）返回顶部组件

  1. 在home子文件夹components内新建子文件夹markPage，并在markPage文件夹内新建MarkPage.vue

在这里插入图片描述

  1. 将返回顶部SVG静态页面放到MarkPage.vue中，并在Home.vue中引入

在这里插入图片描述

在这里插入图片描述

  1. 在父组件Home.vue中定义事件，并以props的方式传递给MarkPage.vue。并通过属性showBackStatus控制MarkPage是否显示。

  2. 判断是否显示返回顶部按钮是一个可能全局都要使用的事件。所以将其抽出来。

① 在config文件夹中，新建global.js

② 在global.js中写滚动、触摸监听代码，并在满足条件的时候执行回调函数。

在这里插入图片描述

③ 在Home.vue中，引入global.js，并在created钩子中进行监听，通过判断是否需要显示返回顶部按钮，设置showBackStatus值，控制是否需要显示。

在这里插入图片描述

④ 在global.js中，写缓动函数

在这里插入图片描述

⑤ 在Home.vue中引入animate动画，并在点击事件中调用。

在这里插入图片描述

10. 配置分类界面

（1）新建文档

新建一下文件目录，并在对应子文件下新建vue组件

在这里插入图片描述

（2）在created钩子中请求数据

  1. 首先，要在server文件夹下的api文件夹下的index.js中，封装数据请求方法

在这里插入图片描述

  1. 在界面中引入接口，并使用async 和 await将异步函数转化为同步函数执行后续操作

在这里插入图片描述

（3）将Header.vue作为单独组件，在Category.vue中引入

在这里插入图片描述

（4）左侧推荐导航栏

  1. 左侧推荐导航栏基本没有扩展性，直接在Catergory.vue中写即可。同时，借助better-scroll进行滚动。

在这里插入图片描述

  1. 对请求下来的数据进行遍历，动态加载渲染左侧li标签

在这里插入图片描述

  1. 处理左侧推荐导航栏点击事件

① 导航栏样式处理

选中样式绑定在selected类上，通过对不同li标签删除添加class为selected即可实现更换

样式

在这里插入图片描述 通过给li标签绑定点击事件，更改currentIndex来更改当前具有selected类名的li标签，同时借助better-scroll中的控制滚动位置，同时，获取新的右侧数据

在这里插入图片描述

③ 与右边联动展示

（5）搭建右侧界面

  1. 将ContentView静态界面和ProductItem静态界面放到对应vue中，并在ContentView.vue中引入ProductItem.vue，在Category.vue中引入ContentView.vue

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  1. 将Category.vue中请求到的数组传递到子组件中，并进行v-for显示即可

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3. 如果想按照价格排序，可以定义一个新的数组，存储

在这里插入图片描述

11. 配置购物车界面

（1）将购物车静态界面放到Cart.vue中

在这里插入图片描述

在这里插入图片描述

（2）✨✨✨使用vuex管理购物车数据✨✨✨

  1. 在store中新建index.js，并在main中引入

在这里插入图片描述

  1. 在store文件夹下新建state.js（数据）、mutations（同步操作）、mutations-type（约束名称）、actions（异步操作）、getters（与state中数据相关的计算属性）。将vuex进行拆分。

在这里插入图片描述

并在index.js中进行汇总输出

在这里插入图片描述

  1. 在state.js中定义购物车商品对象

在这里插入图片描述

  1. 在mutations-type中定义方法名称

在这里插入图片描述

  1. 在mutations中实现添加方法

在这里插入图片描述

  1. 在界面上进行操作，调用ADD_GOODS添加商品方法

① 向购物车中添加的事件很多地方都要调用，因此借助消息订阅（pubsub-js），在组件中跨级通信。

② 安装pubsub-jsnpm install pubsub-js -S

③ 在Home.vue中，监听添加到购物车消息

在这里插入图片描述

④ 在YourLikeItem.vue中发布消息

在这里插入图片描述

⑤ 其他需要添加到购物车的地方操作相同

（3）借助vant中的反馈组件Toast文字提示，提示用户添加成功

  1. 在vant.js中引入

在这里插入图片描述

  1. 在需要提示的地方使用

在这里插入图片描述

（4）定义购物车数据本地化的接口

在这里插入图片描述

（5）因为购物车有一个数量标志要试试变化，所以在初始DashBoard的时候，就应该调用INIT_SHOP_CART初始化购物车

在这里插入图片描述

（6）增加计算属性，通过计算shopCart每个shop的num和，利用vant的tabbar的info属性，控制购物车数量商标

在这里插入图片描述

在这里插入图片描述

（7）在购物车界面遍历shopCart并在界面上显示

在这里插入图片描述

在这里插入图片描述

（8）购物车数量加减操作

  1. 首先在mutations.js中定义将商品移出购物车的方法——即商品数量为1仍然减得操作

在这里插入图片描述

  1. 在Cart.vue中配置删除商品的方法

在这里插入图片描述

（9）直接将ADD_GOODS引入到Cart.vue中进行商品数量的 增加

在这里插入图片描述

（10）商品单选事件处理

  1. 首先在mutations中定义单选事件在这里插入图片描述

  2. 在Cart.vue中对单选a标签进行事件绑定在这里插入图片描述

（11）商品全选事件处理

  1. 首先在mutations中定义全选事件在这里插入图片描述

  2. 在cart中使用计算属性selectedAll标识是否全选，并通过改属性控制是否全选点击事件

在这里插入图片描述

（12）总价计算

利用计算属性，通过shopCart中checked为true的数据，计算商品总价在这里插入图片描述

（13）去结算数量

通过计算属性，计算选中的商品数量

在这里插入图片描述

（14）清空购物车

  1. 在mutations中定义清空购物车方法

在这里插入图片描述

  1. 在Cart.vue中引入并使用清空购物车方法在这里插入图片描述

12. 配置订单界面

（1）配置填写订单路由

  1. 填写订单界面应该是和dashboard平行的，所以在views目录下新建order子文件夹，并在order文件夹下新建Order.vue在这里插入图片描述

  2. 在router文件夹内的index.js中配置路由在这里插入图片描述

  3. 在购物车中点击去结算的时候，转到订单界面

将去结算的a标签改为router-link标签，并用tag标识其原本标签名，并用to表示其跳转路由在这里插入图片描述

在这里插入图片描述

  1. 引入NavBar实现导航栏

① 在vant.js中引入NavBar

在这里插入图片描述

② 在Order.vue中进行引入配置在这里插入图片描述在这里插入图片描述

  1. 引入ContactCard 实现收货地址

① 在vant.js中引入ContactCard

在这里插入图片描述

② 在Order.vue中进行引入配置在这里插入图片描述

（2）配置我的地址界面

  1. 在order文件夹下，新建children文件夹，children文件夹下新建MyAddress.vue

在这里插入图片描述

  1. 配置路由

在这里插入图片描述

  1. 在我的订单中，实现点击选择收货地址跳转路由

在这里插入图片描述

  1. 引入vant组件AddressList实现我的地址

① 在vant.js中引入AddressList

在这里插入图片描述

② 在MyAddress.vue中进行引入配置

在这里插入图片描述

③ MyAddress.vue中，对div进行绝对定位，结合Order.vue中的transition，形成动画效果

在这里插入图片描述

（3）配置地址编辑界面和配置新增地址界面

  1. 在MyAddress.vue同级目录下，新建children文件夹，并在children文件夹内新建AddAddress.vue和EditAddress.vue

在这里插入图片描述

  1. 在index.js中配置路由

在这里插入图片描述

  1. 借助AddressEdit实现编辑地址和新增地址

① 引入AddressEdit

在这里插入图片描述

② 在EditAddress.vue中配置并实现编辑地址（添加地址类似）

在这里插入图片描述

③ 在我的地址中增加路由跳转

在这里插入图片描述

（4）配置下方Cell单元格 —— 借助vant中Cell组件

  1. 在vant.js中引入Cell和CellGroup

在这里插入图片描述

  1. 在Order.vue中进行定制

① 送达时间

在这里插入图片描述在这里插入图片描述

② 商品展示在这里插入图片描述在这里插入图片描述

③ 支付方式

在这里插入图片描述

在这里插入图片描述

④ 备注

在这里插入图片描述在这里插入图片描述

⑤ 商品金额、配送费

在这里插入图片描述

在这里插入图片描述

（5）配置下方提交栏——SubmitBar 提交订单栏

  1. 引入SubmitBar

在这里插入图片描述

  1. 在Order.vue中使用

在这里插入图片描述

在这里插入图片描述

13. 配置我的界面

(1) 导航 —— vant的nav-bar

在这里插入图片描述

在这里插入图片描述

(2)头像及其他信息 —— vant的cell

在这里插入图片描述

在这里插入图片描述

(3)我的订单、查看所有订单 —— vant的cell

在这里插入图片描述

在这里插入图片描述

(4)待支付、待收货、待评价、售后/退款 —— vant的Grid, GridItem

  1. 引入在这里插入图片描述

  2. 使用

在这里插入图片描述

(5) 我的优惠券、我的收货地址、联系客服、意见反馈、下载APP —— vant中的cell

在这里插入图片描述

在这里插入图片描述

14. 用户角色配置

（1）建立选择登陆界面、登录界面及配置选择登陆界面、登录界面路由

views新建文件夹login，并在子文件夹login中新建Login.vue和SelectLogin.vue，并将静态界面配置好

在这里插入图片描述

（2）在vuex的state中存储用户数据，并存储在本地

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

9nLmNzZG4ubmV0L0thaVNhckg=,size_16,color_FFFFFF,t_70#pic_center)

(5) 我的优惠券、我的收货地址、联系客服、意见反馈、下载APP —— vant中的cell

在这里插入图片描述

在这里插入图片描述

14. 用户角色配置

（1）建立选择登陆界面、登录界面及配置选择登陆界面、登录界面路由

views新建文件夹login，并在子文件夹login中新建Login.vue和SelectLogin.vue，并将静态界面配置好

在这里插入图片描述

（2）在vuex的state中存储用户数据，并存储在本地

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-6s92CBPE-1715616463020)]

2401_84619432
关注
  • 12
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实战Vue：基于Vue的移动端购物商城
2401_84447328的博客
05-02 809
首先在mutations.js中定义将商品移出购物车的方法——即商品数量为1仍然减得操作在Cart.vue中配置删除商品的方法。
vue.js实现图书购物商城
热门推荐
m0_47937523的博客
07-04 1万+
图书购物商城 目录： 项目介绍 页面展示 部分功能介绍 源代码分享 项目介绍 一、简介 基于vue.js开发的前端项目，与后台提供数据的服务器是分离的，此购物网站实现基本的增删查改，购物车结算功能，购物车添加删除，用户注册功能及登录退出功能，商品搜索功能，分页。 二、项目结构 ...
vue+nodejs商城实战项目【登录 + 购物车 + 支付】
weixin_48137421的博客
11-10 3529
该项目是一个商城项目，@就代表src目录。
（附源码）基于Vue+Node.js的购物网站设计与实现-计算机毕设 28500
最新发布
VX_DZbishe的博客
01-12 1485
任务需求分析是每个系统开发设计必不可少的一部分，系统质量的好坏可以直接影响系统的存活问题，所以我们必须要将任务需求分析做到位，购物网站的设计在初期的分析是尤为重要的，通过任务分析可以更顺利的进行系统设计，并且保证了用户的满意度。 （1）会员用户功能需求 会员用户进入系统可以查看首页、公告信息、新闻资讯、商品中心、个人账户、个人收藏，后台首页、模块管理（订单管理、退货管理、反馈信息）、个人管理等操作
基于vue+js的商城、购物网站 毕业设计 毕设源代码的实现和设计（4）会员首页
杭州.黄老师
03-23 1800
效果图 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>黄菊华：Vue.js商城实战</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="css/
基于java+ssm+vue的购物商城网站
qq1394918164的博客
07-02 109
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。因此商城购物信息的管理计算机化，系统化是必要的。设计开发购物商城网站不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于商城购物信息的维护和检索也不需要花费很多时间，非常的便利。购物商城网站是在MySQL中建立数据表保存信息，运用Vue框架和Java语言编写。并按照软件设计开发流程进行设计实现。
vue项目 移动端沃尔玛手机商城
m0_71440412的博客
11-02 1158
vue项目 开发首页 docker 登录校验 注册页面 封装请求函数 参数非空校验 通过参数动态获取数据 抽离店铺内容区数据 商铺详情购物车 购物车数据 确认订单页面头部(CSS) 订单
基于Vue的移动端的购物商城
11-27
以上就是基于Vue.js构建移动端购物商城所涉及的主要技术点和实现过程。这个项目不仅涵盖了前端开发的基本技能，还涉及到与后端的协作、用户体验设计等多个方面，是提升 Vue.js 实战能力的好实践。
基于Vue.js的移动端在线购物商城系统毕业论文.docx
05-25
本文档资料适用于java php ssm springboot Vue python nodejs 微信小程序 Android app等,非常适合大专,本科等同学们作为参考资料使用 只需要把文中的内容替换成你需要的就行了哦,最少文档的各种图,比如说功能模块图,...
mimall:基于Vue2.x的移动端小米商城
05-17
学习vue也有一段时间了，所以一直有想法想做个项目把之前学到的东西总结一下，结合自己前端时间学的移动端布局知识，所以决定做一个移动端商城，因为一个商城一般都会涉及到大量的数据交互，这正好能发挥vue的强大...
基于vue的家具商城的设计与实现
04-18
基于vue的家具商城的设计与实现；在本项目中运用了vue，原生js，axios，div+css的相关知识实现用户注册登录，通过调取接口文档来实现数据的展示；实现列表页的展示；通过vue路由传参来传递参数；实现详情页的数据调取和展示；通过props以及emit来实现父子组件之间的传值；通过this.$eventBus.$emit和this.$eventBus.$on来实现非父子组件之间的传值；实现事件派发和事件监听；
vue-mall:基于vue框架的前端商城
04-04
Vue-Mall 基于vue框架的前端商城 Vue + Django项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev
基于Web的网上商城的设计与实现-开题报告PPT.
03-21
网上商城的实现已然成为一种高效方便的购物方法。对于电子商务流行的网络时代,网络购物已经远远是一个潮流。网上商城可以轻松便捷的服务于大众，同时也减少了人力、物力以及财力，全天24小时营业；对网上商城的推动有着重大意义。
基于Vue开发的XMall商城前台页面PC端
08-09
基于Vue开发的XMall商城前台页面 PC端
web前端做的一个购物商城
04-22
里面有登录注册页面，个人中心页面，购物车页面，实现搜索功能，欢迎下载
（二）Vue项目——微商城：初始首页页面
m0_71824048的博客
05-21 1019
通过window+Apache+php+MySQL 服务器配置提升对项目开发认识。
Vue实现简单的购物操作
chonyhaha的博客
02-23 622
vue实现简单的购物结算
vue项目之购物流程
weixin_47409897的博客
10-14 557
目录vue 项目之购物流程首页商品展示商品详情页vuex中的数据 vue 项目之购物流程 首页商品展示 使用宫格组件，实现首页商品的两列展示 https://vant-contrib.gitee.io/vant/#/zh-CN/grid 属性介绍 column-num 展示的列数 @click="gotoDetails(value._id)" 点击去往详情页 一般来说，在created钩子函数之中，获取到商品数据，因为这时候的数据是已经初始化好了 然后把这些数据，存储在data之中，用于列表
vue前端一线大厂真实面试题
10-27
Vue前端面试题集包含了前端开发面试中常见的核心知识点，旨在帮助求职者全面掌握Vue技术并在实际面试中脱颖而出。首先，面试官会考察对SPA（Single-Page Application）的理解，包括其基本概念和优缺点。SPA强调用户...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值