Vue项目实战-尚品汇--detail页面开发（七）

最新推荐文章于 2024-07-16 17:20:09 发布
最新推荐文章于 2024-07-16 17:20:09 发布
阅读量701 收藏 2
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxd_dxc/article/details/122433037
版权

分页器添加类名，点几页，第几页加上样式

 

 下一节：详情页的开发

把Deatail文件夹直接复制到pages里面和Home文件夹并列

 

 

 

 

good是变量，进行传参，所以to之前要加:号

 接下来：解决路由跳转的时候，让滚动条跳到最上面

路由信息都拿出来放到routes.js中，然后将文件引入index.js 

 

 可参考vue官方文档，进阶内容里面的滚动行为

 

静态组件、路由、该传的参数都有了；

接下来向服务器发请求，把假的数据进行替换，然后写vuex

最低0.47元/天 解锁文章
winterjoycc
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目中常见问题(33)detail路由组件展示商品售卖属性
qq_46368050的博客
05-21 578
目录 gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master 业务需求1: 1.父组件传数据给子组件​编辑 2.我们在子组件ImageList.vue中通过props接收到父组件Detail传递过来的数据​编辑 3.我们发现ImageList.vue中的结构是轮播图的结构 4.遍历轮播图 业务需求2: 1.简化数据 2.Detail中获取数据 3.数据放到页面中 gitee仓库地址:http...
vue电商项目(四)——开发Detail页面
a_bowl_rice的博客
12-26 338
我们先将准备好的页面复制到pages中。由于此组件还没有配置路由，我们应该配置路由。
vue3项目（六）---detail
m0_61368323的博客
05-13 1159
1.可选链（?.）：用于无法判断是否存在改参数时使用，如果没有会立即返回undefined，就不会当读取为空时报错。2.热榜区域实现中，使用了props传参。通过共用一个组件，传递不同的参数实现。3.放大镜效果：使用useMouseInelement来获取鼠标的位置。
vue2项目（五）---Detail
m0_61368323的博客
05-11 96
先给放大镜绑定全局事件总线，再在轮播图中触发事件，然后把图片的索引值传给放大镜。注意：getters里面的写法，请求数据是异步操作，所以一开始数据是空对象，所以读取空对象上的属性会报错，可以先加一个或空，来解决服务器报错问题。由于图片在一个数组里面，原先是一个空数组，所以请求会报错，我们添加一个或 [] 可以解决问题。1）由于商品详情页，需要带商品的Id,所以在配置路由的时候，需要使用params占位。当点击轮播图的图片时，放大镜进行展示轮播图里的图片。图片的数据在父组件中，需要使用父向子传值。
(最详细)VueApp项目实战4 - -详情页
yuan
01-07 1515
一、安装stylus 1.stylus、less、sass三者的区别? 三者都是CSS的预处理器，无需考虑浏览器的兼容性问题，可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，使CSS 更加简洁，不同的是写法上存在些差异； 2.stylus的安装 二、Ajax动态获取首页数据 1.安装axios 三、组件化开发 该页面可分为’Header’、‘Swiper’、‘Icons’、‘Recommend’、'Weekend’五个组件组成 四、定义全局变量、方法、目录别名
Vue项目实战-尚品汇--购物页面开发--重点（八）
cxd_dxc的博客
01-12 359
内容包括69-74，完成放大镜和购物车组件的开发，重点购物车。
vue项目实战-使用vue开发的点外卖App-附项目源码.zip
01-26
通过实践这个Vue项目，你不仅能学习到Vue.js的基本语法和特性，还能了解如何在实际项目中整合不同的技术，如路由、状态管理和API调用，从而提升你的全栈开发能力。同时，拥有项目源码，你可以更直观地查看和学习代码...
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
vue3.0 vue-quill-editor.rar
09-19
在实际开发中，可能会遇到Vue3.0与Vue-Quill-Editor的兼容性问题，例如生命周期钩子的变化、Prop类型检查的更新等。这时，需要查阅官方文档或社区资源，寻找相应的解决方案。对于Vue CLI 3，要确保项目的构建配置...
vue-details:正确支持HTML5 Vue.js中的标记，包括v-model属性（552字节）
05-01
Vue详细信息 正确支持Vue.js中的<details>标记，包括v-model属性。 开始使用 使用Node.js 安装套件 npm install vue-details 全局初始化 import Vue from 'vue' ; import VueDetails from 'vue-details' ; Vue . component ( 'v-details' , VueDetails ) ; 或本地，如下例所示。 使用CDN 加载脚本 < script src =" https://cdn.jsdelivr.net/npm/vue-details " > </ script > 或者 < script src =" https://unpkg.com/vue-details/dist/vue-details.min.js " > </ script > 注册组件 V
vue-mini-weather:基于Vue开发的迷你实时天气预报组件
05-14
npm i vue-mini-weather --save // 1. 全局引入 //main.js 项目入口文件 import Vue from 'vue' import weather from 'vue-mini-weather' Vue.use(weather) //app.vue 项目文件 <v></v> // 2. 局部引入 //a
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
一个基于 vue-cli 捆绑多个页面的插件。 与vue-cli's pages配置不同，它是通过将多个页面分片到不同的 webpack 配置来处理的 用法 在你的 vue-cli 创建的项目中安装插件，如果没有请参考 vue add multiple-page ...
vue3-显示详情
menghuannvxia的专栏
08-11 1498
vue3详情传参的介绍和展示
vue中的嵌套路由、动态路由以及命名路由
可小辉的博客
03-18 924
1.vue路由： vue SSR（Vue Server Side Rander）服务端渲染 Vue CLI 默认客户端（浏览器）渲染，JS 发送用户浏览器中，占用用户资源渲染生成 HTML element UI 2.SPA(Single Page Application) 定义： SPA 中存在多个组件，多个组件构成一个试图（view）不同的数据与视图...
Vue常见报错及解决方案
热门推荐
TeAmo__的博客
03-23 2万+
写代码的过程中一定会遇到报错，遇到报错不要担心，认真分析就可以解决报错，同时积累经验，早日成为大牛👍 本文会整理一些在编码过程中遇到的常见报错，共同学习。 一、报错结构 二、常见问题总结及解决方法 Mixed spaces and tabs Unexpected keyword 'const' Module not found: Error: Can't resolve '....' in '....' Element is missing end tag TypeError: Cannot.
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示（开发Search组件）】
刘大猫
04-02 695
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示（开发Search组件）】
微信小程序-detail详情页数据动态展示
qq_36901488的博客
09-04 9001
上一章把静态的detail页面做好了,现在来做把数据动态的放进去
vue3【详解】单文件组件 SFC（含SFC的优点、缺点、使用场景、原理、使用预处理器、＜script setup＞语法详解、资源拆分）
最新发布
朝阳39的博客
07-16 470
自定义指令必须遵循命名规范（自定义指令名的首字母必须是v，后续跟首字母大写的自定义指令名称 ）// 在元素上做些操作 } } < template > < h1 v-my-directive > This is a Heading const。
vue项目实战-电商后台管理系统
02-18
Vue项目实战-电商后台管理系统是一个基于Vue框架开发的前端项目，用于管理电商网站的后台业务。该项目包含了常见的电商后台管理功能，如商品管理、订单管理、用户管理等。 以下是该项目的一些特点和实现方式： 1. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值