vue例項+axios-天氣查詢

某瓜寫程式碼發表於2020-11-09
VueiOS

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>

相關文章