Vue.js安裝使用教程

時間 2019-11-05

原文原文鏈接

1、說明

上大學前，請的都是前端JavaScript、後端ASP/PHP/JSP、先後端代碼混雜；上大學時，請的都是前端Jquery、後端SSH、先後端代碼分離經過模板關聯；大學出來後，請的都是前端三大框架、後端Spring Boot、先後端分離。javascript

雖然說本質的東西沒怎麼變，但形式上的東西老是得去記，三天兩頭搞套新輪子反正我我的是挺煩的。html

2、安裝

2.1 下載到本地並經過<script>標籤引入

開發版本下載地址：https://vuejs.org/js/vue.js前端

生產版本下載地址：https://vuejs.org/js/vue.min.jsvue

所謂開發版本就是沒通過壓縮的版本、體積比較大，所謂生產版本就是通過壓縮的版本；所謂壓縮就能寫在一行的儘可能寫在一行。java

使用像普通js文件同樣使用<script>標籤引入便可：node

<!-- 使用開發版本 -->
<script src="vue.js"></script>
<!-- 使用生產版本 -->
<script src="vue.min.js"></script>

2.2 使用CDN

使用CDN的好處是js文件不用下載到本地（但我的總感受沒有下載到本地踏實）。如下是官網推薦的CDN國內的我也不清楚哪一個好點。python

<!-- 學習使用，返回的是最新版本 -->
<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。不須要本身去找下載頁面而後手動下載仍是比較方便的，咱們這裏使用這種形式。ios

nodejs帶有npm安裝npm直接安裝nodejs便可：http://nodejs.cn/download/npm

npm默認倉庫比較慢，可以使用如下三種方法進行處理：axios

# 方法1、配置代理。但該方法常常會報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

# 方法2、修改默認倉庫。使用淘寶的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

# 方法3、使用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

3、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實現可參考連接：http://www.javashuo.com/article/p-vsblwihr-gp.html

服務端java實現可參考連接：http://www.javashuo.com/article/p-mwzaxqvy-gt.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>