后端程序員的 VUE 超簡單入門筆記
現在的各種開源項目中使用 Vue 的越來越多了，作為一個后端程序員不會點 Vue 也都玩不轉了。所以抽空學習了一下 Vue 的簡單用法，整理成筆記，方便有需要的同學一起學習。
Vue 是一個前端的框架，被稱作是 漸進式 JavaScript 框架。在進入 Vue 的官網時即可看到，上面圖的就是從 Vue 官網復制的。
什么是 漸進式 框架，這里我們引用官網的原文來看，原文如下：
Vue (讀音 /vjuː/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
https://cn.vuejs.org/v2/guide/
Vue 可以作為整個前端開發的一部分，也可以作為一個整體。也就是說，可以使用 Vue 的部分功能來構建前端，也可以完全使用 Vue 來構建前端。大概就是這樣的意思。
一、Vue 的開始
Vue 的開始還是很方便的，只需要引入一個庫文件 —— vue.js 即可開始。我們可以去 Vue 的官網下載，也可以通過 CDN 來直接引入 vue 都可以。這里我下載了 vue.min.js 文件。
創建一個 HTML 文件，然后引入 vue.min.js 文件，接著實現一個簡單的 Hello Vue 的程序。代碼如下：
- <body>
- <div id="app">
- <!-- 插值表達式，綁定vue中的data -->
- {{message}}
- </div>
- <script src="vue.min.js"></script>
- <script>
- // 創建一個vue對象
- new Vue({
- el:'#app', // 綁定vue作用的范圍
- data: { // 定義頁面中顯示的模型數據
- message: 'Hello Vue!'
- }
- })
- </script>
- </body>
在上面的代碼中，通過 <script src="vue.min.js"> 引入了 vue 的庫文件，然后通過 new Vue 來創建一個 Vue 的對象。其中 el 是 DOM 的 id，表示該 Vue 對象是針對該 DOM 中。在 data 中定義了值 “Hello Vue” 為 message 變量，然后在 id 為 app 的 div 標簽中通過 插值表達式（使用 {{}} 插入的變量） 來輸出 message 變量的值。
Vue 中的 el 和 data 是固定的寫法，el 和一個標簽進行關聯，表示該 Vue 對象只和該標簽關聯，data 是用來定義變量使用的。
這樣就構建了一個簡單的 Vue 的 HTML 頁面。Vue 內部完成了 DOM 的綁定操作，無需像 jQuery 那樣獲取 DOM 的操作。
二、單向綁定
單向綁定的指令是 v-bind，它用在標簽屬性上面，通過它可以獲取 data 中定義的變量的值。代碼如下：
- <body>
- <div id="app">
- <!-- v-bind 在標簽的屬性中，取到vue在data中定義的變量的值 -->
- <div v-bind:style="msg">單向綁定</div>
- <div :style="msg">單向綁定</div>
- </div>
- <script src="vue.min.js"></script>
- <script>
- new Vue({
- el: '#app',
- data: {
- msg: 'color: blue;'
- }
- })
- </script>
- </body>
單向綁定可以時 v-bind 也可以省略 v-bind，但是注意，冒號不能省略。上面的代碼中相當于給 style 設置了 color:blue 屬性，運行效果如下圖：
三、雙向綁定
雙向綁定通過指令 v-model 來完成，下面的代碼中，data 中的 keyword 會影響 div 中的兩個 input 框，第二個 input 框使用的 v-model 指令，那么當改變第二個 input 框中的值時，同樣會改變 data 中 keyword 的值；又由于改變了 data 中 keyword 的值，從而第一個 input 框的值也會隨之改變。
- <body>
- <div id="app">
- {{keyword}}<br>
- <!-- 單向綁定 -->
- <input type="text" :value="keyword"><br>
- <!-- 雙向綁定 -->
- <input type="text" v-model="keyword"><br>
- </div>
- <script src="vue.min.js"></script>
- <script>
- new Vue({
- el: '#app',
- data: {
- keyword: 'test'
- }
- })
- </script>
- </body>
運行如下圖所示：
改變第二個 input 的值，如下圖所示：
可以看到，通過修改第二個 input 框的值，上面的值也跟著發生了改變。
四、事件綁定
事件綁定是對事件的監聽，可以通過 v-on 或 @ 指令來完成，代碼如下：
- <body>
- <div id="app">
- <button v-on:click="show()">事件綁定1</button>
- <button @click="show()">事件綁定2</button>
- </div>
- <script src="vue.min.js"></script>
- <script>
- new Vue({
- el: '#app',
- data: {
- keyword: 'test'
- },
- methods: {
- show() {
- console.log("show....")
- }
- }
- })
- </script>
- </body>
上面的代碼中，通過 v-on 和 @ 將 Button 和 show() 方法進行綁定，輸出如下圖所示：
上面的代碼中，在 Vue 對象中增加了 methods，在 methods 中可以用來定義方法。
五、條件指令
條件指令使用 v-if 和 v-else 來完成，看如下代碼：
- <body>
- <div id="app">
- <input type="checkbox" v-model="ok">
- <span v-if="ok">選中了</span>
- <span v-else>沒有選中</span>
- </div>
- <script src="vue.min.js"></script>
- <script>
- new Vue({
- el: '#app',
- data: {
- ok: false
- }
- })
- </script>
- </body>
上面的代碼中，通過 v-model 和 ok 來進行雙向綁定，然后當改變 checkbox 的選中狀態時，v-if 和 v-else 會自動改變文字描述。
六、循環指令
循環指令使用 v-for，它可以用來遍歷數組從而渲染一個列表，看如下代碼：
- <body>
- <div id="app">
- <div v-for="(user, index) in userList">
- {{index+1}} -- {{user.name}} -- {{user.age}}
- </div>
- </div>
- <script src="vue.min.js"></script>
- <script>
- new Vue({
- el: '#app',
- data: {
- userList: [
- {"name":"張三", "age":20},
- {"name":"李斯", "age":30},
- ]
- }
- })
- </script>
- </body>
上面的代碼中 index 是一個循環的計數從 0 開始，然后循環 userList Json 數組，輸出如下圖：
七、Vue 生命周期
Vue 的生命周期，就是創建、銷毀 Vue 對象時會自動執行的幾個函數，Vue 的官網提供了一個生命周期圖，該圖的地址如下：
https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
我這里從官網復制過來，如下圖。
在上圖中可以看到，不同的生命周期有不同的方法會被執行，比如 created、updated、destroyed 等。
這里寫代碼進行測試：
- <body>
- <div id="app">
- {{msg}}
- </div>
- <script src="vue.min.js"></script>
- <script>
- new Vue({
- el: '#app',
- data: {
- msg: 'hello'
- },
- // 在頁面渲染之前執行
- created() {
- debugger
- console.log('created...')
- },
- // 在頁面渲染之后執行
- mounted() {
- debugger
- console.log('mounted...')
- }
- })
- </script>
- </body>
在代碼的 created 和 mounted 兩處放入了 debugger 命令，打開 F12 的調試窗口時，當執行到 debugger 位置處時，會自動觸發斷點從而斷下，首先斷在 created 方法中，如下圖：
從上圖可以看出，此時的插值表達式并沒有進行實際的替換，按 F8 讓頁面繼續渲染，會斷在 mounted 方法中，如下圖：
此時可以看到，插值表達式已經變成了 hello。這樣可以清楚的看到不同的生命周期會觸發不同的方法。
八、axios 和 vue-resource 庫
axios 是基于 Promise 的 Ajax 的庫，在 Vue 中有一個 vue-resource 庫用于實現異步加載的庫。在 Vue.js 2.0 中推薦使用 axios 來完成 Ajax 的請求。這里給出演示的代碼，代碼如下：
- <body>
- <div id="app">
- <table>
- <tr v-for="(user, index) in userList">
- <td>{{index + 1}}</td>
- <td>{{user.name}}</td>
- <td>{{user.age}}</td>
- </tr>
- </table>
- <table>
- <tr v-for="(it, index) in itList">
- <td>{{index + 1}}</td>
- <td>{{it.name}}</td>
- <td>{{it.age}}</td>
- </tr>
- </table>
- </div>
- <script src="vue.min.js"></script>
- <script src="axios.min.js"></script>
- <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
- <script>
- new Vue({
- el: '#app',
- data: {
- userList : [],
- itList: []
- },
- // 在頁面渲染之前執行
- created() {
- // 調用方法，得到返回json數據
- this.getUserList(),
- this.getLanguageList()
- },
- methods: {
- getUserList() {
- // 使用 axios 方式 ajax 請求
- // 請求的接口路徑
- axios.get("user.json")
- // 請求成功
- .then(response =>{
- console.log(response)
- this.userList = response.data.data.items
- })
- // 請求失敗
- .catch(error => {
- console.log(error)
- })
- },
- getLanguageList(){
- //發送get請求
- this.$http.get('language.json').then(function(response){
- console.log(response.body);
- this.itList = response.body.data.items
- },function(){
- console.log('請求失敗處理');
- });
- }
- }
- })
- </script>
- </body>
上面的代碼中，同時演示了 axios 和 vue-resource 兩個庫。代碼中直接請求了兩個 json 文件，并沒有去進行實際的接口請求。
九、總結
Vue 的內容不只有這么些，具體可以參考 Vue 的官網（https://cn.vuejs.org/v2/guide/）進行學習和了解。這里只是列出了可能使用較為頻繁的部分。不對之初請予指正。
