Vue 02 —— Vue 入門小案例~使用 Axios 中的GET、POST請求

Vue 02 —— Vue 入門小案例~使用 Axios 中的GET、POST請求

作為後端攻城獅,寫前端代碼是一種什麼體驗?

相信不少人和 一樣,有寫過前端代碼的經歷。

記錄一下,Vue 框架開發中“啼笑皆非”的故事,非專業前端人員,該案例無 css 美化,引起不適,請見諒,如有不當之處,請指出,不甚感激!

1、什麼是 Axios ?

Vue2.0之後,尤雨溪推薦大家用 axios 替換 JQuery ajax。我們可以把它理解為 ajax 。

2、前期知識

如果你 Vue 的基礎語法還不熟悉,強烈建議你先看 另一篇文章 >>>

3、使用 Axios 中的 GET 請求 -- 無參

Vue 02 —— Vue 入門小案例~使用 Axios 中的GET、POST請求

值得注意的地方:

① 引入 axios.min.js 這個 js 文件

② 使用箭頭函數

這樣在 axios get 請求裡才能獲取到 this

Vue 02 —— Vue 入門小案例~使用 Axios 中的GET、POST請求

4、使用 Axios 中的 POST 請求 -- 有參

Vue 02 —— Vue 入門小案例~使用 Axios 中的GET、POST請求

值得注意的地方:

① 引入 axios.min.js 這個 js 文件

② 使用箭頭函數

③ post 參數在第二個參數處,用{} 包起來

Vue 02 —— Vue 入門小案例~使用 Axios 中的GET、POST請求

④ v-model 雙向綁定獲取輸入框的值

後記:

最近很多小夥伴的留言非常中肯,建議直接使用腳手架。 作為一名後端程序猿,node.js 和 webpack 語法基本不清楚,直接腳手架一臉懵逼。現在有空可以先熟悉下 vue 和 node 的語法,再使用腳手架,至於 webpack 可以跳過。你覺得呢?當然如果你時間比較緊湊,可以直接擼項目。

>>>


分享到:


相關文章: