关于vue框架学习day5

已于 2023-12-08 20:06:20 修改
阅读量383 收藏 6
点赞数 6
文章标签： vue.js 学习 javascript
于 2023-12-08 20:05:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69342037/article/details/134881918
版权

1、首页版心产品

首先在首页引入版心的组件：

在数组中写下每一个产品信息，图示为一个产品信息，复制多次代表多个产品

分别引入数组中的产品图片、标题、价格、店铺图像和店铺名字

源代码：

<template>
	<div class="mainbox">
	    <div class="goodsbox" v-for="el in arr">
	      <img class="goodsimg" :src="el.img" />
	      <div class="gooodstitle">{{ el.title }}</div>
	      <div class="pricelabel">
	        <span class="price">{{ el.price }}</span>
	        <span class="originprice">{{ el.originprice }}</span>
	      </div>
		  <div>
		    <img class="shopimg" :src="el.shopimg" />
		    <span class="shopname">{{ el.shopname }}</span>
		  </div>
	    </div>
	  </div>
</template>

<script setup>
	let arr = [{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },{
    title: "产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题产品的标题",
    img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6d9c2f8205e85cf57678b00380cd974.png?w=2452&h=920",
    price: 128,
    originprice: 998,
    shopimg: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f50486a2c8e59b8be520b8470e81e863.jpg?thumb=1&w=1839&h=690&f=webp&q=90",
    shopname: "华清远见"
  },
];

</script>

<style scoped>
	.mainbox {
	  width: 100%;
	  min-height: 600px;
	  background-color: rgb(240, 240, 240);
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: flex-start;
	}
	
	.goodsbox {
	  width: 200px;
	  height: 360px;
	  background-color: white;
	  margin-top: 34px;
	  margin-left: 53px;
	  border-radius: 3px;
	}
	.goodsimg {
	  width: 180px;
	  margin: 10px;
	  height: 200px;
	  border-radius: 5px;
	}
	
	.gooodstitle {
	  width: 180px;
	  margin: 10px;
	  height: 38px;
	  font-size: 14px;
	  color: orangered;
	  /* background-color: salmon; */
	  /*规定文本行数*/
	  -webkit-line-clamp: 2;
	  /*限定块级元素*/
	  display: -webkit-box;
	  /*垂直或者水平限制*/
	  -webkit-box-orient: vertical;
	  /*超出隐藏*/
	  overflow: hidden;
	  /*超出的最后-行最后的文本区域用替代*/
	  text-overflow: ellipsis;
	}
	.gooodstitle:hover{
		color: blue;
	}
	.price{
		font-size: 20px;
		color: orangered;
		font-weight: 600;
		margin-left: 20px;
	}
	.originprice{
		font-size: 25px;
		color: gray;
		margin-left: 20px;
		text-decoration: line-through;
	}
	/* shopimgf */
	.shopimg {
	  width: 25px;
	  height: 25px;
	  border-radius: 50%;
	  margin-left: 10px;
	}
	
	/* shopnamel */
	.shopname {
	  font-size: 20px;
	  color: orangered;
	  font-weight: 600;
	  margin-left: 20px;
	}

</style>

结果图展示：

2、组件属性传值

图示将循环代码写在自建的组件中，表明该组件将进行循环

下图中的defineprops是定义自建组件中的属性

图中让title="el",意思是将arr数组中的值传入box的组件中

由此根据组件属性传值的原理，可将上文所引用的产品图片、标题、价格等这部分的代码替换成一个自建的组件，如下图所示，再将被替换的代码放在新建的组件文件中，也更方便以后的调用

3、代码管理

通过该网站Gitee - 基于 Git 的代码托管和研发协作平台下载git软件进行项目代码的管理

主要步骤如下所示：

4、移动端开发

在HbuilderX软件中新建项目，用于移动端软件的开发

主要是在pages文件中写软件的各个部分

在移动端的代码编写中，用view代替div标签，image标签代替img标签

椰椰小鱼丸
关注
关于vue框架学习day3
m0_69342037的博客
12-06 903
当email值变动时会影响变量中email.value的值，同理，当变量中email.value值变动时会影响email的值。如下图所示，图中红框所在区域的fn为响应式变量，当fn函数中的值发生改变时，所引用的对应内容也会发生改变。@dblclick是双击事件，在间隔m毫秒内，当用户的鼠标指针在被选元素区域内部第一次按下和第二次松开。上图中for循环两次，循环的是arr里面的元素，倒数第二排的el.y对应el中的键y的值。如图所示，在引用的变量前代码替换成v-model，即可实现双向数据绑定。
学习vue框架 day04ref 网络请求
zpqyqs的博客
05-28 100
1.ref写在不同地方的区别。2.组件实例的属性有哪些。3.网络请求的知识点。
关于vue框架学习day2
m0_69342037的博客
12-05 458
通过组件可以实现同一页面分工成不同文件，再将这些文件引用到同一文件可以实现一个页面的完整功能。将一个对象的所有属性写在一个地方,如下图所示的obj={name:"成都理工"，age:1000}如下图所示，其中el为变量名，可以任意取。
学习vue框架 day10 vuex
zpqyqs的博客
06-03 77
为了简化在数组中使用vuex中的数据和方法，同时可以避免代码冗余。2.在组件中使用vuex。3.辅助函数（映射函数）
学习vue框架 day07 路由
zpqyqs的博客
05-31 63
2.$router和$route的区别（重点）1.什么事路由懒加载（重点）5.移动端组件爱库vant。4.什么是路由守卫（重点）
学习vue框架 day05其他和路由
zpqyqs的博客
05-29 59
3.vue2. 遗留的语法 ( 选项式api )6.缓存组件 keep-alive相关知识。7.动画组件 transition 相关知识。5.组件css样式会冲突如何解决。
学习vue框架 day12 vue3 组合式api和ts
zpqyqs的博客
06-07 90
1.组件生命周期方法。
vue学习日志 day01
weixin_65423052的博客
03-21 498
mvc mvvm 插值表达式 v-text v-html v-bind v-on
Vue学习day01笔记
m0_73158362的博客
06-03 497
概念：Vue (读音 /vjuː/，类似于 view) 是一套 **构建用户界面 ** 的渐进式框架基于数据渲染出用户可以看到的界面所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点所谓框架：就是一套完整的解决方案举个栗子如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。我们只需要在“毛坯房”的基础上，增加功能代码即可。提到框架，不得不提一下库。库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等。
学习vue框架 day09全局状态管理vuex
zpqyqs的博客
06-02 73
vuex是一个全局状态管理工具，多组件需要共享的状态可以保存在vuex中（可以实现多组件通信）4.vuex实例（store）的属性。2.vue特点是什么？1.vuex是什么？
vueDemo学习Day01-0相关代码
04-27
"vueDemo学习Day01-0相关代码" 涵盖了Vue的基础学习，包括环境搭建、基本语法、模板语法、数据绑定、计算属性、指令、组件等方面的知识。 首先，让我们从环境搭建开始。Vue的开发通常需要Node.js环境，通过npm...
vue2-day5.zip
08-10
在这个“vue2-day5.zip”压缩包中，我们可以推测这可能是某个Vue 2教程的第五天学习资料。虽然没有具体的文件内容可以参考，但根据常规的学习路径，我们可以深入讨论Vue 2的一些核心概念和重要特性。 1. **组件系统...
Vue基础day3学习资料.zip
03-31
Vue的基础语法是学习Vue开发的关键，而"Vue基础day3学习资料.zip"这个压缩包提供了全面的学习资源，包括案例、笔记、PPT和作业，帮助初学者深入理解Vue的核心概念。 首先，让我们来看看"day03_Vue01-基础语法3.ppt...
Vue基础day4学习资料.zip
03-31
首先，"day04_Vue01-基础语法3.ppt"很可能包含了关于Vue基础语法的讲解。这部分可能涵盖了以下关键点： 1. **安装与设置**：Vue可以通过CDN链接引入，也可以通过npm进行本地安装。在项目中，通常会使用Vue CLI创建...
Vue基础day1学习资料.zip
03-31
"4-笔记"文件夹则可能包含了关于Vue基础知识的学习笔记，涵盖了Vue的生命周期、指令系统（如v-if/v-for/v-bind等）、计算属性和侦听器等核心概念。笔记中可能还会涉及组件化开发，如如何定义、注册和使用组件，以及...
深入解析Javascript中的this指向
最新发布
m0_62652709的博客
11-13 620
this是什么？它的值是如何决定的？为什么在 Vue2 开发中会给this单独定义一个变量？this是动态绑定的，指向取决于调用的上下文。在 Vue2 中，常见的this丢失场景包括回调函数和普通函数。解决方案：使用保存引用。使用箭头函数（推荐）。
Vue中的常用指令
m0_62388400的博客
11-12 967
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
前端基础面试题·第四篇——Vue（其三）
2301_76380626的博客
11-09 868
Vue中组件定义式可以为其添加一个name属性，这个属性是组件的别名。当时组件被渲染时，Vue DevTools 会显示组件的名称，方便开发者调试，增强调试体验。当组件需要在内部调用渲染自己本身时，需要通过name属性来指定组件名称，否则Vue会报错。给组件命名后，我们可以通过全局注册，在全应用范围内使用该组件。方便了组件的使用，提高了组件复用性。使用keep-alive包裹动态组件时，可以通过include和exclude属性来指定哪些组件需要缓存，哪些组件不需要缓存。
Vue常用加密方式
m0_51431448的博客
11-13 70
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
深入Vue3：实战源码学习与day11案例解析
通过逐行阅读和分析Vue.js的源码，可以帮助开发者更清晰地认识到Vue框架的内部运行机制，并在实际开发中更有效地运用Vue框架的各项特性和功能。 为了更好地进行源码学习，本资料提供了一个名为'day11-vue3-demo'的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值