Vue.js安装使用教程
一、說明
上大學前，請的都是前端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.orgnpm帶-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> View Code初始訪問頁面如下：
各按鈕分別點擊后頁面如下，可見get和post請求都已成功：
?
參考：
https://www.jianshu.com/p/24945ee1ec05
https://blog.csdn.net/caideb/article/details/81449156
http://www.runoob.com/vue2/vue-tutorial.html
https://cn.vuejs.org/v2/guide/installation.html
轉載于:https://www.cnblogs.com/lsdb/p/10571331.html
總結
以上是生活随笔為你收集整理的Vue.js安装使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JAG Practice Contest
- 下一篇： vue.js购物车