vue实例+axios-天气查询

最新推荐文章于 2023-02-02 23:12:27 发布

我爱工作&工作love我

最新推荐文章于 2023-02-02 23:12:27 发布

阅读量477

点赞数

分类专栏：前端学习文章标签： vue

本文链接：https://blog.csdn.net/m0_46183615/article/details/109586929

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

vue实例+axios
实现天气的查询：
1.通过搜索城市查询
2.通过点击查询
相关知识视频：黑马程序员
实例效果
在这里插入图片描述

鹅的代码



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>天气服务器</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div class="contain" id="app">
			<div id="title">
				<div id="title1">天气服务器</div>
			</div>
		
		<div class="head">
			<!--实现按enter开始搜索-->
			<input type="text"  v-model="inputvalue" id="search" placeholder="请输入您要查询的城市" @keyup.enter="search">
			</input>
			<!--实现按点击搜索按钮时开始搜索-->
			<button class="right" @click="search">搜索</button>
		</div>
		<div class="main" >
			<!--实现按点击地址按钮时开始搜索-->
			<button class="city"@click="select('成都')">成都</button>
			<button class="city"@click="select('上海')">上海</button>
			<button class="city"@click="select('杭州')">杭州</button>
			<button class="city"@click="select('深圳')">深圳</button>
			
			
		</div>
		<div class="content"  >
			<li id="content1" v-for="items in list">
				
				<div class="time">
					{{items.date}}
				</div>
				<div class="cloud">
				{{items.type}}
				</div>
				<div class="T"> {{items.low}}~{{items.high}}</div>
				
			</li>
			
		</div>
		
		<input type="button" value="天气不好,看看JOKE呀" class="get" @click="get">
		</div>
		
		
		<style>
			.contain
			{
				display:flex;
				flex-direction:column;
				justify-content:space-around;
				align-items:center;
				width:700px;
				min-height:200px;
				background:lightblue;
				margin: 0 auto;
				box-shadow:darkblue 0.6px 0.6px 5px;
			}
			#tltle
			{
				flex:2;
			}
			#title1
			{
				
				margin-top:10px;
				margin-bottom:5px;
				font-size:18px;
				color:white;
				box-shadow:darkblue 0.8px 0.8px 1px;
				
				
			}
			#search
			{
				margin-top:20px;
				flex:1;
				display:inline-block;
				width:400px;
				height:20px;
				line-height:20px;
				margin-top:8px;
				float:left;
				
			}
			.right
			{
				border-style:none;
				
				display:inline-block;
				margin-top:8px;
				height:25.5px;
				text-align:center;
				line-height:25.5px;
				width:40px;;
				background:royalblue;
			}
			.city
			{
				margin-top:8px;
				flex:1;
				font-size:12px;
				color:white;
				border-style:none;
				background:transparent;
			}
			.content
			{
				margin-top:20px;
				flex:4;
				display:flex;
				justify-content:space-around;
				list-style:none;
				width:700px;
			}
			
			#content1
			{
				display:flex;
				flex-direction:column;
			}
			.content li
			{
				color:darkorange;
				border-right:2px solid whitesmoke;
				border-image: linear-gradient(transparent,whitesmoke, transparent) 1 1;
				margin-bottom:5px;
			}
			#word
			{
				color:white;
			}
			.cloud
			{
				font-size:25px;
			}
			.T
			{
				font-size:8px;
			}
			.time
			{
				font-size:8px;
			}
			.get
			{
				border-style:none;
				background:transparent;
				margin-top:3px;
				box-shadow:0.5px 0.5px 2px darkblue;
				color:darkorange;
			}
			
		</style>
		<!-- 开发环境版本，包含了有帮助的命令行警告-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 官网提供的在线axio地址-->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!--html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。所以，一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞。而有一些页面的效果的实现，是需要预先动态的加载一些js
		脚本，所以这些脚本应该放在<body>之前。-->
		<script src="./js/main.js"></script>
		
	</body>
</html>