Vue框架
Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建用戶界面的漸進式框架。
Vue 只關注視圖層， 採用自底向上增量開發的設計。
Vue 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
安裝vue框架：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Axios
Axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端。
特點：
1、從瀏覽器中創建 XMLHttpRequest
2、從 node.js 發出 http 請求
3、支持 Promise API
4、攔截請求和響應
5、轉換請求和響應數據
6、取消請求
7、自動轉換JSON數據
8、客戶端支持防止 CSRF/XSRF
安裝Axios：（在這裏我使用的是本地的axios，當然也可以使用線上的）
<script src="axios.min.js"></script> //本地
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> //線上cdn導入
axios也經常與Vue框架一塊使用，本例就是同時使用兩者。
天氣預報的代碼實現（代碼中有相應的解釋）：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
#app{
width: 400px;
margin: 50px auto;
}
.search {
width: 400px;
margin: 0 auto;
}
.search input{
height: 32px;
width: 300px;
}
.search button{
width: 50px;
height: 35px;
}
.citys a{
text-decoration:none
}
.info>ul>li{
list-style: none;
}
</style>
</head>
<body>
<div id="app">
<div class="search">
<input type="text" v-model="inputCity" placeholder="請輸入要查詢的城市">
<button type="submit" @click="changeCity">搜索</button>
</div>
<div class="info">
<div>當前城市：{{city}}</div>
<div>當前溫度：{{wendu}} ℃</div>
<hr>
<h3 style="margin-top:20px;margin-bottom:20px;">未來五天的天氣變化</h3>
<hr>
<ul v-for="one in wutian">
<li>日期：{{one.date}} </li>
<li>天氣:{{one.type}}</li>
<li>溫度:{{one.low}}~{{one.high}}</li>
<hr />
</ul>
<div><b>溫馨提醒</b>：{{ganmao}}</div>
</div>
</div>
<!-- 安裝VUE -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 安裝Axios -->
<script src="axios.min.js"></script>
<script>
//創建一個vue對象,映射到一個標籤上，所有映射到的標籤都能夠使用vue來操作
let vue = new Vue({
//可以在id爲app的標籤中使用的數據
el:"#app",
data:{
wendu:"0",
data:"0",
wutian:[],
ganmao:"感冒提醒：",
city:"北京",
inputCity:"",
},
methods:{
changeCity:()=>{
vue.city = vue.inputCity;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" +vue.city).then(
(response)=>{
console.log(response.data.data);
//將數據加到vue的data中去
vue.city = response.data.data.city;
vue.wendu = response.data.data.wendu;
vue.ganmao = response.data.data.ganmao;
vue.wutian = response.data.data.forecast;
}
).catch(
(error)=>{
//錯誤處理
alert("訪問異常");
}
);
}
},
mounted(){
//從網絡上獲取天氣信息,來源於國家氣象局
//then表示正常的獲取地址之後，catch表示網絡請求異常
//界面一開始默認顯示北京的天氣狀況
axios.get("http://wthrcdn.etouch.cn/weather_mini?city=北京").then(
(response)=>{
console.log(response.data.data.ganmao);
//將數據加到vue的data中去
vue.city = response.data.data.city;
vue.wendu = response.data.data.wendu;
vue.ganmao = response.data.data.ganmao;
vue.wutian = response.data.data.forecast;
console.log(vue.ganmao);
}
).catch(
(error)=>{
//錯誤處理
alert("訪問異常");
}
);
}
});
</script>
</body>
</html>
界面顯示：
