关于vue框架学习day2

最新推荐文章于 2024-04-20 18:30:43 发布
最新推荐文章于 2024-04-20 18:30:43 发布
阅读量417 收藏 9
点赞数 10
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69342037/article/details/134800717
版权

1、网页布局排版

让页面的块级元素横着排列可以采用以下方式：

display: flex; /*将父元素设置为弹性盒子，让它的儿子横着排列*/
		flex-wrap: wrap;  /*它的儿子横着排后超出部分自动换行排列*/
		justify-content: space-around; /*设置儿子排列方式为两端对齐*/

子元素横着排列方式有以下几种：

justify-content:排列方式 
排列方式：
flex-start 左对齐
flex-end   右对齐
space-between 两端对齐（靠边）
space-around  两边对齐（不靠边）

课堂练习代码示例：

<template>
	<div>
		<div class="mainbox">
			<div class="box">
				<img class="img" :src="img1" >
				<div class="lable1">
					<div class="ziying">自营</div>
					<div class="hot">热卖</div>					
				</div>
				<h3 class="title">{{title}}</h3>
				<p class="price">{{price}}</p>
				<p class="content">{{content}}</p>				
			</div>
			<div class="box">
					<img class="img" :src="img2" >
					<div class="lable1">
						<div class="ziying">自营</div>
						<div class="hot">热卖</div>					
					</div>
					<h3 class="title">{{title}}</h3>
					<p class="price">{{price}}</p>
					<p class="content">{{content}}</p>				
				</div>
			<div class="box">
					<img class="img" :src="img3" >
					<div class="lable1">
						<div class="ziying">自营</div>
						<div class="hot">热卖</div>					
					</div>
					<h3 class="title">{{title}}</h3>
					<p class="price">{{price}}</p>
					<p class="content">{{content}}</p>				
				</div>
			<div class="box">
					<img class="img" :src="img4" >
					<div class="lable1">
						<div class="ziying">自营</div>
						<div class="hot">热卖</div>					
					</div>
					<h3 class="title">{{title}}</h3>
					<p class="price">{{price}}</p>
					<p class="content">{{content}}</p>				
				</div>
			<div class="box">
					<img class="img" :src="img5" >
					<div class="lable1">
						<div class="ziying">自营</div>
						<div class="hot">热卖</div>					
					</div>
					<h3 class="title">{{title}}</h3>
					<p class="price">{{price}}</p>
					<p class="content">{{content}}</p>				
				</div>
			<div class="box">
					<img class="img" :src="img6" >
					<div class="lable1">
						<div class="ziying">自营</div>
						<div class="hot">热卖</div>					
					</div>
					<h3 class="title">{{title}}</h3>
					<p class="price">{{price}}</p>
					<p class="content">{{content}}</p>				
				</div>
			<div class="box">
					<img class="img" :src="img7" >
					<div class="lable1">
						<div class="ziying">自营</div>
						<div class="hot">热卖</div>					
					</div>
					<h3 class="title">{{title}}</h3>
					<p class="price">{{price}}</p>
					<p class="content">{{content}}</p>				
				</div>
			<div class="box">
					<img class="img" :src="img8" >
					<div class="lable1">
						<div class="ziying">自营</div>
						<div class="hot">热卖</div>					
					</div>
					<h3 class="title">{{title}}</h3>
					<p class="price">{{price}}</p>
					<p class="content">{{content}}</p>				
				</div>
			<div class="box">
					<img class="img" :src="img9" >
					<div class="lable1">
						<div class="ziying">自营</div>
						<div class="hot">热卖</div>					
					</div>
					<h3 class="title">{{title}}</h3>
					<p class="price">{{price}}</p>
					<p class="content">{{content}}</p>				
				</div>
			<div class="box">
					<img class="img" :src="img10" >
					<div class="lable1">
						<div class="ziying">自营</div>
						<div class="hot">热卖</div>					
					</div>
					<h3 class="title">{{title}}</h3>
					<p class="price">{{price}}</p>
					<p class="content">{{content}}</p>				
				</div>
			
		</div>
	</div>
</template>

<script setup>
	let img1="https://i1.mifile.cn/a1/pms_1500287084.72131750!220x220.jpg"
	let img2="https://i1.mifile.cn/a1/pms_1550642182.7527088!220x220.jpg"
	let img3="https://i1.mifile.cn/a1/pms_1560161251.21862332!220x220.jpg"
	let img4="https://i1.mifile.cn/a1/pms_1560151939.71121260!220x220.png"
	let img5="https://i1.mifile.cn/a1/pms_1515404353.30516645!220x220.jpg"
	let img6="https://i1.mifile.cn/a1/pms_1500287084.72131750!220x220.jpg"
	let img7="https://i1.mifile.cn/a1/pms_1500287084.72131750!220x220.jpg"
	let img8="https://i1.mifile.cn/a1/pms_1500287084.72131750!220x220.jpg"
	let img9="https://i1.mifile.cn/a1/pms_1500287084.72131750!220x220.jpg"
	let img10="https://i1.mifile.cn/a1/pms_1500287084.72131750!220x220.jpg"

	let title="某某标题"
	let content="商品内容"
	let price="价格"
	
</script>

<style>
	.mainbox{
		width: 1170px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		background-color: rgb(240, 240, 240);
	}
	
	.box{
		width: 200px;
		height:400px;
		background-color:white;	
		margin: 5px;

	}
	.img{
		width: 100%;
	}
	.lable1{
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
	}
	.ziying{
		width: 60px;
		height: 30px;
		background-color: orangered;
		color: white;
		line-height: 30px;
		text-align: center;
		font-weight: 600;
		border-radius: 10px;
	}
	.hot{
		width: 60px;
		height: 30px;
		background-color: mediumvioletred;
		color: white;
		line-height: 30px;
		text-align: center;
		font-weight: 600;
		border-radius: 10px;
	}
	.price{
		color: orangered;
		margin-top: 20px;
		text-align: center;
	}
	.title{
		text-align: center;
		font-size: 20px;
		
	}
	.content{
		margin-top: 10px;
		margin-left: 10px;
	}
</style>

   结果展示：

2. 循环渲染网页元素

2-1变量的对象集合

将一个对象的所有属性写在一个地方,如下图所示的obj={name:"成都理工"，age:1000}

  • obj可以自行命名，name为键，age为值
  • 引用方式需要在前标注自定义名字然后.键

2-2数组：

如下图所示

2-3采用循环语句遍历元素

如下图所示，其中el为变量名，可以任意取

课堂练习代码：

<template>
		<div class="box-top" >
			<div class="box1" v-for="el in arr1">
				{{el}}
			</div>			
		</div>
		
		<div class="box-bottom" >
				<div class="boxs"  v-for="el in arr2">
					<img class="img"  :src="el.img" >
					<div class="box">
						<div>
							<h3 class="title">{{el.title}}</h3>				    	
						</div>
						<div class="lookcounts">
							<p>{{el.lookcounts}}</p>
						</div>
						
					</div> 
					<div class="box">
						<div>
							<img class="userimg"  :src="el.userimg" >
						</div>
						
						<div>
							<p class="nickname">{{el.nickname}}</p>
						</div>
						<div class="lable">
							<p>{{el.lable}}</p>
						</div>
						
					</div>
				</div>			
			</div>		
		
</template>

<script setup>
	let arr1=["论坛精选","先锋","风光","新手","生活","儿童","手机","旅行","纪实","生态","鸟类","北京","天津","上海","广州","单反","索尼","佳能","尼康","腾龙","富士","…更多"]
	let arr2=[{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"},
	{img:"https://th.bing.com/th/id/OIP.TzQLuNduoUdcyFrGP5Z2oAHaE6?w=266&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",title:"秋日江南风景异",nickname:"空鸣",lable:"生活摄影",lookcounts:"3750",userimg:"https://image3.fengniao.com/head/10744/source/10743469_2.jpg?imageView2/1/w/180/h/180/q/75/ignore-error/1/"}]

</script>

<style scoped>
	.box-top{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		font-size: 17px;
		height: 45px;
	}
	.box1{
		line-height: 45px;
	}
	.box1:nth-child(1){
		font-size: 30px;
	}
	.box-bottom{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-left;
		background-color: rgb(245, 245, 245);
	}
	.box{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		height: 50px;
	
	}
	
	.boxs{
		margin:30px;
		background-color: white;
		height: 380px;
		width: 380px;
		border-radius: 10px;
		
	}
	.userimg{
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-top: 15px;
		margin-left: 10px;
	}
	.title{
		margin-left: 10px;
	}
	.nickname{
		margin-left: 10px;
	}
	.lookcounts{
		line-height: 25px;
		color: rgb(181,181, 181);
		margin-left: 180px;
		
	}
	.lable{
		margin-left: 80px;
		color: rgb(181,181, 181);
		margin-left: 220px;
		
	}
	.img{
		width: 100%;
	}
</style>

结果图展示：

3.组件

        通过组件可以实现同一页面分工成不同文件，再将这些文件引用到同一文件可以实现一个页面的完整功能。

引用方式如下图所示，其中Hqyj为自行命名，Nav1.vue是其中一个分工文件：

使用方式如下图所示，直接以标签的形式进行使用：

当每一个分工文件的style标签加上scoped标签才会避免不同分工文件使用同一选择器引起的冲突，如下图所示：

椰椰小鱼丸
关注
Vue - flex布局 justify-content: space-around / space-between 最后一行元素不对其解决方案（JS）
王佳斌
05-24 6821
前言 本文的解决方案不止适用于 Vue（只不过用它做示例），原生 JS 或其他框架均可借助该算法完成。 使用 flex 布局时，设置 justify-content: space-around / space-between 属性后，会出现如下图所示问题： 我们希望最后一行 居左对齐 排列，如下图所示： 解决方案 解决方案有很多种，本文使用 补齐元素 方式完成，而非 :after 插入或更改布局。 Gitee 仓库地址（代码中有超级详细的注释）：https://gitee.com/wangjia
浅谈Vue：text-align: center、align-items: center、justify-content: center三种居中的区别和用法
最新发布
刘一帆的博客
07-18 699
使用来水平居中块级元素内的文本或行内元素。使用来垂直居中Flex容器内的子元素。使用来水平居中Flex或Grid容器内的子元素。选择合适的属性取决于你的布局模型和元素类型。
Flex 布局语法教程
weixin_34397291的博客
04-25 374
from:www.runoob.com/w3cnote/fle… 网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有...
前端-VUE-页面布局-flex布局整理-傻瓜教学
翩翩潇洒程序员
10-29 1万+
1.flex-direction:设置容器内部元素的排列方向 row: 定义排列方向 从左到右 row-reverse: 从右到左 column: 从上到下 column-reverse: 从下到上 图片介绍 flex-direction:row flex-direction:row-reverse flex-direction:column flex-directi...
Vue进阶（幺柒幺）：前端用户体验提升（五）Flex实现弹性布局
热门推荐
IT全栈 华强工作室
03-01 9万+
Flex是的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。注意：任何一个容器都可以指定为Flex布局。.box{行内元素也可以使用Flex布局。.box{Webkit内核的浏览器，必须加上-webkit前缀。.box{注意，设为Flex布局以后，子元素的floatclear和属性将失效。
Vue项目 关于flex布局（详解）
Jiang_bug的博客
03-31 9703
Flet布局 语法（Flex 指定容器 —父元素） 首先我们需要一个总盒 注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 <template> <div class="box"> <div class="item"></div> </div> </template> <style scoped> .box{ // 将box指定为Flex
Vue基础day2学习资料.zip
03-31
在"Vue基础day2学习资料.zip"这个压缩包中，包含了一系列的学习资源，帮助你深入理解Vue的基础语法和全家桶组件。下面，我们将详细探讨这些知识点。 首先，"day02_Vue01-基础语法3.ppt"可能是一个关于Vue基础语法的...
vue2-day3.zip
08-10
在"vue2-day3.zip"这个压缩包中，我们很可能看到的是关于Vue 2.x版本的第三天学习资料，这可能包括教程、代码示例或者项目实践等内容。Vue 2.x是Vue.js的一个重要版本，它引入了许多改进和优化，使得开发更加高效和...
vueDemo学习Day01-0相关代码
04-27
"vueDemo学习Day01-0相关代码" 涵盖了Vue的基础学习，包括环境搭建、基本语法、模板语法、数据绑定、计算属性、指令、组件等方面的知识。 首先，让我们从环境搭建开始。Vue的开发通常需要Node.js环境，通过npm...
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 | 40.黑马补充 - Flex布局常见子项目属性
xyx-Eshang的博客
10-02 331
文章目录1.flex - 子项占用剩余空间的比例1.1.基本使用1.2."圣杯布局"2.align-self - 子项在==侧轴==的排列方式3.order - 子项在主轴的排列顺序 1.flex - 子项占用剩余空间的比例 1.1.基本使用 flex属性用以分配子项占剩余空间的比例，其值就代表占用的份数 以下图为例，父容器定义justify-content: space-between - 首尾贴边，剩余均分 虽然是平分了剩余的空间，但其中有间隔。若希望让子元素占满间隔，则可以为他们添加flex属性：
VUE-flex布局之flex-wrap换行（3）
LzzMandy的博客
06-10 9074
1、外部容器display：flex； 可以设置的6个属性，如下： flex-direction 元素排列方向 flex-direction: row || row-reverse || column || column-reverse 元素排列方向: (从左往右)默认 || (从右往左) || (从上往下...
如何使用vue中的flex的相关属性？
weixin_53515338的博客
06-06 975
vue的display：flex相关属性的使用和说明
vue实现按钮左对齐
guangtou_qiang的博客
04-20 495
button class="float-left">左对齐按钮</button>
【无标题】
xxxxxxxr的博客
12-12 1969
框架 api 都是一些比较常用基础的 api，考察下你使用到什么程度，比较会问一些原理，比如 vue 的双向绑定原理（vue 2.0 和 vue 3.0，两种实现的优缺点）、vue 的 nexttick 原理、diff 算法等 怎么实现三列布局（左侧和右侧宽度固定，中间自适应） 绝对定位 + 中间版块不给宽度 两侧浮动 + 中间自动撑开（使用 calc 动态计算宽度，设置对应宽度的 margin） flex，左右设置 flex-basis，中间设置flex-grow​​​​​​ 1-1: fle..
ant design of vue 中a-form-item 的label文字内容默认右对齐，设置左对齐，在全局文件中添加
wwf1225的博客
10-11 2万+
ant design of vue 中a-form-item 的label文字内容默认右对齐，设置左对齐，在全局文件中添加 .ant-form-item-label { text-align: left; }
uview与微信小程序的坑-弹性布局-display:flex
W776131404的博客
12-16 2247
uview中的弹性布局带来的坑
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值