一、說明
上大學前，請的都是前端JavaScript、后端ASP/PHP/JSP、前后端代碼混雜；上大學時，請的都是前端Jquery、后端SSH、前后端代碼分離通過模板關聯；大學出來后，請的都是前端三大框架、后端Spring Boot、前后端分離。
雖說本質的東西沒怎么變，但形式上的東西總是得去記，三天兩頭搞套新輪子反正我個人是挺煩的。
二、安裝
2.1 下載到本地並通過<script>標簽引入
開發版本下載地址：https://vuejs.org/js/vue.js
生產版本下載地址：https://vuejs.org/js/vue.min.js
所謂開發版本就是沒經過壓縮的版本、體積比較大，所謂生產版本就是經過壓縮的版本；所謂壓縮就能寫在一行的盡量寫在一行。
使用像普通js文件一樣使用<script>標簽引入即可：
<!-- 使用開發版本 --> <script src="vue.js"></script> <!-- 使用生產版本 --> <script src="vue.min.js"></script>
2.2 使用CDN
使用CDN的好處是js文件不用下載到本地（但個人總感覺沒有下載到本地踏實）。以下是官網推薦的CDN國內的我也不清楚哪個好點。
<!-- 學習使用，返回的是最新版本 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- 生產使用，可指定版本避免最新版本存在bug影響應用--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
2.3 使用npm安裝
npm用於js庫的下載，類似於python中的pip。不需要自己去找下載頁面然后手動下載還是比較方便的，我們這里使用這種形式。
nodejs帶有npm安裝npm直接安裝nodejs即可：http://nodejs.cn/download/
npm默認倉庫比較慢，可使用以下三種方法進行處理：
# 方法一、配置代理。但該方法經常會報npm ERR! 503 Too many open connections錯誤 npm config set proxy http://[username:password]@127.0.0.1:1080 npm config set https-proxy http://[username:password]@127.0.0.1:1080 # 刪除代理 # npm config delete proxy # npm config delete https-proxy # 方法二、修改默認倉庫。使用淘寶的https://registry.npm.taobao.org # 所以我們直接把npm倉庫改成https://registry.npm.taobao.org，那也和安裝cnpm等效 npm config set registry https://registry.npm.taobao.org # 查看當前所有配置：npm config list # 只查看當前倉庫：npm config get registry # 方法三、使用cnpm。可能某些時候我們不想修改倉庫，那我們可以安裝cnpm # cnpm是淘寶發布的npm定制版，定制之處就是在於默認他庫設置成淘寶的https://registry.npm.taobao.org # 注意下面這條命令是指定從https://registry.npm.taobao.org安裝cnpm，而不是修改npm的默認倉庫 npm install -g cnpm --registry=https://registry.npm.taobao.org
npm帶-g參數則把文件下載到npm安裝目錄的node_modules文件夾下，不帶-g參數則把文件下載到當前目錄的node_modules文件夾下。
# 我們只需要下載到當前文件夾下，不帶-g npm install vue # get和post需要axios npm install axios
三、vue程序編寫
3.1 基本程序
在當前目錄下創建test1.html寫入以下內容：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一個vue.js程序</title> <script src="vue.min.js"></script> </head> <body> <div id="app"> <!-- {{}}是模板語法，其內是vue.js的內容 --> <p> {{ vue_message }} </p> <p> <button v-on:click="changeText">點擊改變</button> </p> </div> <script type = "text/javascript"> var js_message = "Hello Vue!" // 注意new Vue()本質是在實例化對象，其內固定為el/data/methods三個參數不要寫其他東西 // 用一個app參數去承接的意義是，如果需要那么可以在js中使用實例中的變量或方法，如app.changeTest() var app = new Vue({ // el元素限定此方法內的元素作用的范圍 // 這里#app表示只作用於id為app的節點及其子孫節點 el: '#app', // data 區域存放變量，所有前面{{}}內要用到的變量都要在這里定義 // 此處將message變量賦值為js_message，而js_message被我們賦值為“Hello Vue!”，所以預期初始打開文件時顯示的是“Hello Vue!” data: { vue_message: js_message }, // methos區域存放函數，所有前面{{}}內或者vue語句用到的方法都要在這里定義 methods: { changeText: function (event) { this.vue_message = "Hello Vue Click!" } } }) </script> </body> </html>
初始訪問頁面如下：
點擊按鈕后如下，說明定義的vue變量和方法都已生效：
3.2 get和post請求
上面的程序交互邏輯只是在前端頁面內進行處理，下面在此基礎上我們這里實現一個從restful服務端獲取結果並展示的vue頁面。
服務端python實現可參考鏈接：https://www.cnblogs.com/lsdb/p/9774307.html
服務端java實現可參考鏈接：https://www.cnblogs.com/lsdb/p/9783435.html
另外如果和我這里一樣html和api不同域，那么要處理跨域請求問題，不然瀏覽器會拒絕解析服務器返響應（Django可參考鏈接）：
已攔截跨源請求：同源策略禁止讀取位於 http://127.0.0.1:8000/test/ 的遠程資源。（原因：CORS 頭缺少 'Access-Control-Allow-Origin'）。
（本質就是給服務器響應加上Access-Control-Allow-Origin頭。又不是禁止訪問服務器也不是別人服務器不回你，一定要服務器加個頭你才處理響應沒想清楚這是什么孤兒道理）
api接口get和post請求返回結果如下：
修改后頁面代碼如下，說明見注釋：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一個vue.js程序</title> <script src="node_modules\vue\dist\vue.min.js"></script> <!-- get/post新加處一。get/post需要使用axios，在某些教程可以看到使用vue-resource，但vue-resource已經不更新了--> <script src="node_modules\axios\dist\axios.min.js"></script> </head> <body> <div id="app"> <div id="sectionMsg" style="margin-top:20px"> <!-- {{}}是模板語法，其內是vue.js的內容 --> <p> 當前值：{{ vue_count }} </p> <button v-on:click="addOne">加一</button> </div> <!-- get/post新加處二。get請求頁面，v-for是vue的for循環語句 --> <div id="sectionGet" style="margin-top:20px"> <li v-for="record in getResultRecords"> {{record.id}}-{{ record.username }}-{{record.password}} </li> <input type="button" name="getButton" @click="getQueryRecords()" value="GET查詢"> </div> <!-- get/post新加處三。post請求頁面，v-if是vue的條件判斷語句 --> <div id="sectionPost" style="margin-top:20px"> <input type="text" ref="userID" placeholder="輸入用戶id進行查詢"/> <div v-if="postResultRecord != ''">{{postResultRecord.username}}-{{postResultRecord.password}}</div> <div v-else></div> <input type="button" @click="postQueryRecords()" name="postButton" value="POST查詢" /> </div> </div> <script type = "text/javascript"> var js_count = 0 // 注意new Vue()本質是在實例化對象，其內固定為el/data/methods三個參數不要寫其他東西 // 用一個app參數去承接的意義是，如果需要那么可以在js中使用實例中的變量或方法，如app.changeTest() var app = new Vue({ // el元素限定此方法內的元素作用的范圍 // 這里#app表示只作用於id為app的節點及其子孫節點 el: '#app', // data 區域存放變量，所有前面{{}}內要用到的變量都要在這里定義 // 此處將message變量賦值為js_message，而js_message被我們賦值為“Hello Vue!”，所以預期初始打開文件時顯示的是“Hello Vue!” data: { vue_count: js_count, // get/post新加處四。新加getResultRecords和postResultRecord變量，用於接收get和post返回結果，初始值賦空 getResultRecords: '', postResultRecord: '', }, // methods區域存放函數，所有前面{{}}內或者vue語句用到的方法都要在這里定義 methods: { addOne: function (event) { this.vue_count += 1; }, // get/post新加處五。新加一個get請求，get填請求的地址、then是響應后處理、catch是異常捕獲 getQueryRecords: function(event){ axios .get('http://127.0.0.1:8000/test/') .then(response => (this.getResultRecords = response.data)) .catch(error => (this.vue_count = error)); }, // get/post新加處六。新加一個post請求，post填請求的地址+參數、then是響應后處理、catch是異常捕獲 postQueryRecords: function(event){ axios // 通過ref方式獲取輸入控件的值。當然也可以用原生javascript的document.getElementById("userID").value之類的方式獲取 .post('http://127.0.0.1:8000/test/',{userid:this.$refs.userID.value}) .then(response => (this.postResultRecord = response.data[0])) .catch(error => (this.vue_count = error)); }, } }) </script> </body> </html>
初始訪問頁面如下：
各按鈕分別點擊后頁面如下，可見get和post請求都已成功：
參考：
https://www.jianshu.com/p/24945ee1ec05
https://blog.csdn.net/caideb/article/details/81449156