前端 基於Vue框架以及Axios實現天氣預報系統

vue框架

vue.js（讀音 /vjuː/, 類似於 view） 是一套構建使用者介面的漸進式框架。

vue 只關注檢視層， 採用自底向上增量開發的設計。

vue 的目標是通過盡可能簡單的 api 實現響應的資料繫結和組合的檢視元件。

""

>
<
/script>

axios 是乙個基於promise 用於瀏覽器和 nodejs 的 http 客戶端。

特點：

1、從瀏覽器中建立 xmlhttprequest

2、從 node.js 發出 http 請求

3、支援 promise api

4、攔截請求和響應

5、轉換請求和響應資料

6、取消請求

7、自動轉換json資料

8、客戶端支援防止 csrf/xsrf

"axios.min.js"

>
<
/script>
//本地
"">
<
/script>
//線上cdn匯入

天氣預報的**實現（**中有相應的解釋）：

<

!doctype html>
"zh-cn"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
* width:
400px;
margin:
50px auto;
}.search 
.search input
.search button
.citys a
.info>ul>li
<
/style>
<
/head>
>
="search"
>
"text" v-model=
"inputcity" placeholder=
"請輸入要查詢的城市"
>
"submit" @click=
"changecity"
>搜尋<
/button>
<
/div>
="info"
>
當前城市：
}<
/div>
當前溫度：
} ℃<
/div>
"margin-top:20px;margin-bottom:20px;"
>未來五天的天氣變化<
/h3>
for=
"one in wutian"
>
日期：}<
/li>
天氣:}<
/li>
溫度:}~
}<
/li>
>
<
/ul>
溫馨提醒<
/b>：
}<
/div>
<
/div>
<
/div>
<
!-- 安裝vue
-->
"">
<
/script>
<
!-- 安裝axios --
>
"axios.min.js"
>
<
/script>
//建立乙個vue物件,對映到乙個標籤上，所有對映到的標籤都能夠使用vue來操作
let vue =
newvue(,
methods:).
catch
((error)
=>);
}},mounted()
).catch
((error)
=>);
}});
<
/script>
<
/body>
<
/html>

前端 vue框架

model 模型 資料 view 檢視 html 標籤，樣式 viewmodel 用來結合模型和檢視 決定資料展示在哪個標籤上 vue中的資料和頁面上標籤內容是 繫結 在一起的，模型資料發生了變動，頁面檢視也會相應變化。這種特性稱之為 響應式 框架。佔位，到模型中找相應的資料進行展示,匹配的是模型資...

前端框架 Vue

test 函式呼叫表示式var obj var arr 123,bai obj.name 屬性呼叫表示式 arr 0 屬性呼叫表示式let name wutao name 變數呼叫表示式123 數值字面量表示式 wtao 字串字面量表示式 true 布林字面量表示式 null 空表示式 undefi...

前端框架Vue

由於 npm 安裝速度慢，本教程使用了 的映象及其命令 cnpm，安裝使用介紹參照 使用 npm 映象。npm 版本需要大於 3.0，如果低於此版本需要公升級它 檢視版本 npm v 2.3.0 公升級 npm cnpm install npm g 公升級或安裝 cnpm npm install c...