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