Vue.js+vue-element搭建屬於自己的后台管理模板：Vue.js快速入門（二）
前言
上篇文章對Vue.js有了初步理解，接下來我們把Vue.js基礎語法快速的過一遍，先混個臉熟留個印象就好。Vue.js基礎主要包括，生命周期，數據綁定，過濾器，方法，計算屬性，內置指令，組件，自定義指令，Render函數。
Vue實例與數據綁定
通過構造函數Vue就可以創建一個Vue的根實例，el掛載DOM對象，data綁定數據，頁面文本中通過插值顯示data數據，插值方式為{{}}雙大括號，如<div>{{ name }}</div>。Vue實例中data數據就是Model它默認就是雙向綁定的，我們通過維護data數據來可以實時改變視圖展示內容。注意：如果有些數據改變不影響視圖的變量，盡量不要在data中定義它，因為這樣會增加效率問題。
var app = new Vue({ el: '#app', //el指定一個頁面中已存在的DOM元素來掛載VUE實例 data() { return { name: '' }; } })
Vue.js生命周期
每個框架都有它的生命周期，每個Vue實例創建時，都會經歷一系列的初始化過程，同時也會調用相應的生命周期鈎子，我們可以利用這些鈎子，在適合的時機執行我們的業務邏輯。
- created：實例創建完成后調用，但尚未掛載，$el還不可用。
- mounted：el掛載到實例上后調用，一般第一個業務邏輯在這里開始。
- beforeDestroy：實例銷毀之前調用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h1>{{ date }}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data() { return { date: new Date() }; }, created: function () { //實例創建完成后調用，但尚未掛載，$el還不可用。 console.log(this.$el) //undefined }, mounted: function () { //el掛載到實例上后調用，一般第一個業務邏輯在這里開始。 var e = this; this.timer = setInterval(() => { e.date = new Date(); }, 1000); }, beforeDestroy: function () { //實例銷毀之前調用。 this.timer && clearInterval(this.timer); } }) </script> </body> </html>
生命周期圖示：（官方提供）
過濾器
Vue.js 支持在{{ }}插值的尾部添加一個管道符“|”，對數據進行過濾，經常用於格式化文本，例如對時間進行格式化處理。過濾器可以串聯多個，而且還可以接收參數，默認第一個參數為數據本身。過濾器適用於簡單的文本轉換，如果要實現復雜的數據變換，應該使用計算屬性去處理，計算屬性在后面介紹它的用法。
- filters：過濾器選項中創建每個過濾器，過濾規則是自定義的，例：filterA: function(value){}。
- 管道符：管道符“|”出現在文本插值后面，進行過濾前面數據，例：{{ data | filterA }}。
- 串聯：過濾器也可以串聯，數據后面設定多個過濾器，例：{{ message | filterA | filterB }}。
- 多個參數：每個過濾器可以設定多個參數，例：{{ message | filterA('arg1', 'arg2') }}，arg1為過濾器第2個參數，arg2為過濾器第3個參數，因為默認第一個參數為數據本身。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <h1>{{ date | filterA }}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data() { return { date: new Date() }; }, filters: { filterA: (value) => { let date = new Date(value), y = date.getFullYear(), m = date.getMonth() + 1, d = date.getDate(), hh = date.getHours(), mm = date.getMinutes(), ss = date.getSeconds(); var dt = y + '-' + (m > 9 ? m : '0' + m) + '-' + (d > 9 ? d : '0' + d) + ' ' + (hh > 9 ? hh : '0' + hh) + ':' + (mm > 9 ? mm : '0' + mm) + ':' + (ss > 9 ? ss : '0' + ss); return dt; } } }) </script> </body> </html>
方法
methods 聲明所有綁定事件監聽器實現的方法，每個方法以函數形式聲明，實例方法內可以直接使用this獲取或修改數據，也可以調用其他申明的方法，外部也可以通過實例去調用。下面實例中用到了v-if="show"，這是內置指令后面會詳細介紹，@click="hide" 這也是內置指令v-on它是用來綁定事件監聽器，@是語法糖，這里主要說明一下方法hide()調用的時候（）可以省略。關於箭頭函數，作用域不同，根據實際需求選擇使用它。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="點擊隱藏1" @click="hide"> <input type="button" value="點擊隱藏2" @click="hide2"> <h1 v-if="show">{{ message }}</h1> <h1 v-if="show">{{ getmessage() }}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data() { return { show: true, message: 'HelloWord!' }; }, methods: { hide: function(){ //console.log(this.show); this.show = false; }, hide2: ()=>{ //箭頭函數作用域不一樣，通過this無法改變數據。 console.log(this.show); // undefined this.show = false; //app.show =false; //通過實例調用來完成修改數據 }, getmessage: function(){ return this.message; //帶返回值方法，可以在插值中輸出 } } }) </script> </body> </html>
計算屬性
computde計算屬性，模板內的表達式僅用於簡單的運算，復雜的邏輯都可以通過計算屬性代替，計算屬性是基於它的依賴緩存的，一個計算屬性所依賴的數據發生變化時，它才會重新取值。計算屬性還可以返回多個Vue實例的數據，其中一個數據變化，計算屬性會重新被執行。
- computde：計算屬性選項。
- 用法：計算屬性包含get和set函數，默認不寫只觸發getter函數來讀取。
- 緩存：計算屬性與方法不一樣地方，它是依賴數據發生變化時才會重新計算，高效率。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="點擊" @click="onmode"> <h1>{{ count }} </h1> <h1>{{ cpdate }} </h1> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data() { return { count: 0, date: '', message: 'Hello' }; }, methods: { onmode: function () { this.count++; } }, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') }, cpdate: function () { //var d = this.count; //當計算屬性中依賴屬性發生變化時，會被重新計算。 this.date = new Date(); return this.date; } } }) </script> </body> </html>
內置指令
指令 (Directives) 是帶有 v- 前綴的特殊屬性，指令是Vue模板中最常用的一項功能，它帶有前綴v-，主要職責就是當其表達式的值改變時，將某些行為應用到DOM上。
- v-if：條件渲染指令，動態在DOM內添加或刪除DOM元素。
- v-else：條件渲染指令，必須跟v-if成對使用。
- v-else-if：判斷多層條件，必須跟v-if成對使用。
- v-show：條件渲染指令，為DOM設置css的style屬性，v-show不能在<template>上使用，頻繁切換場景中適合使用。
- v-text：更新元素的textContent；例如：<span v-text="msg"></span> 等同於 < span>{{msg}} </ span>。
- v-html：更新元素的innerHTML；會把標簽名也帶上。
- v-for：循環指令；<li v-for="book in books">{ { book.name } }</li>
- v-for：表達式遍歷數組時支持一個可選參數作為當前項的索引；<li v-for="(book , index) in books ">{{ index}} - {{book.name })</li>
- v-for：表達式遍歷對象屬性時，有兩個可選參數，分別是鍵名和索引；<li v-for="(value , key , index) in user ">{ { index } } - { { key } } : { { value } }</li>
- v-cloak：不需要表達式，這個指令保持在元素上直到關聯實例結束編譯； v-cloak 是一個解決初始化慢導致頁面閃動的最佳實踐。
- v-once：也是一個不需要表達式的指令，作用是定義它的元素或組件只渲染一次，包括元素或組件的所有子節點。
- v-pre：不需要表達式，跳過這個元素以及子元素的編譯過程，以此來加快整個項目的編譯速度。
- v-bind：響應並更新DOM特性；例如：v-bind:href v-bind:class v-bind:title 等等。語法糖："v-bind:” 可以用"："代替。
- v-on：用於監聽DOM事件； 例如：v-on:click v-on:keyup。語法糖：“v-on:”可以用“@”代替。
- v-model：數據雙向綁定；用於表單輸入等；例如：< input v-model= "message">。v-model也是一個特殊的語法糖，使用@input來替代v-model。
方法與事件：
Vue 提供了一個特殊變量$event ，用於訪問原生DOM 事件，可以阻止事件冒泡或者阻止鏈接打開。
寫一個阻止冒泡的例子：
<div @click="stopClick1('stop1',$event)"> <div @click="stopClick2('stop2',$event)"> <div @click="stopClick3('stop3',$event)">阻止冒泡</div> </div> </div> methods:{ stopClick3: function(message, event){ console.log(message); event.stopPropagation(); //阻止冒泡 }, stopClick2: function(message, event){ console.log(message); }, stopClick1: function(message, event){ console.log(message); } }
修飾符：
在＠綁定的事件后加小圓點“．”，再跟一個后綴來使用修飾符。
上面的阻止冒泡事件，可以直接用戶修飾符的方式寫為：
<div @click.stop="stopClick3('stop3')">阻止冒泡</div> //不用通過$event事件再來寫了
常用的一些修飾符有：.stop、.prevent、.capture、.self、once，修飾符可以串聯使用。
<!--阻止單擊事件冒泡--> <a @click.stop="handle"></a> <!--修飾符可以串聯--> <a @click.stop.prevent="handle"></a> <!--添加事件偵聽器時使用事件捕獲模式--> <div @click.capture="handle"> ... </div> <!--只當事件在該元素本身（而不是子元素） 觸發時觸發回調--> <div @click.self="handle"> ... </div> <!--只觸發一次，組件同樣適用--> <div @click.once="handle"> ... </div>
數組更新：
當我們修改數組時， Vue 會檢測到數據變化，所以用v-for 渲染的視圖也會立即更新。
- push()
- pop()
- shift()
- unshit()
- splice()
- sort()
- reverse()
以上方法會改變被這些方法調用的原始數組，也有些方法不會改變原數組，它們返回的是一個新數組，在使用這些非變異的方法時，可以用新數組來替換原數組，相同的元素不會重新渲染。
例如：
- filter()
- concat()
- slice()
app.books = app.books.filter(function(item){
return item.name.match(/JavaScript/);
});
過濾與排序：
當你不想改變原數組，想通過一個數組的副本來做過濾或排序顯示時，可以使用計算屬性來返回過濾或排序后的數組。
表單與v-model
表單控件在實際業務中較為常見，比如單選、多選、下拉選項、輸入框等，用它們可以完成數據的錄入、校驗、提交等，上面內置指令中提到了v-model指令，用於在表單類元素上雙向綁定數據，可以將輸入的內容實時映射到綁定的數據上。
備注：v-model 也有修飾符，用於控制數據同步的時機，如：使用修飾符.lazy 會轉變為在change事件中同步；使用修飾符.number 可以將輸入轉換為Number類型；使用修飾符.trim 可以自動過濾輸入的首尾空格。
輸入框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="message" placeholder="輸入..."> <p>輸入的內容是：{{ message }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: '' } }) </script> </body> </html>
在輸入框輸入的同時，{{ message }} 也會實時將內容渲染在視圖中。
單選按鈕：
單選按鈕在單獨使用時，不需要 v-model，直接使用 v-bind 綁定一個布爾值類型的值，為真時選中，為否時不選。
<div id="app"> <input type="radio" :checked="picked"> <label>單選按鈕</label> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { picked: true } }) </script>
如果是組合使用來實現互斥選擇的效果，就需要 v-model 配合 value 來使用。
<div id="app"> <input type="radio" v-model="picked" value="html" id="html"><label for="html">HTML</label> <input type="radio" v-model="picked" value="js" id="js"><label for="js">JavaScript</label> <input type="radio" v-model="picked" value="css" id="css"><label for="css">CSS</label> <br> <p>選擇的項是：{{ picked }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { picked: 'js' } }) </script>
復選框：
復選框也是分單獨使用和組合使用，不過用法稍與單選不同，復選框單獨使用時也是用 v-model 來綁定一個布爾值。
<div id="app"> <input type="checkbox" v-model="checked" id="checked"> <label for="checked">選擇狀態：{{ checked }}</label> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { checked: false } }) </script>
組合使用時，也是 v-model 與 value 一起，多個勾選框都綁定到同一個數組類型的數據，value的值在數組當中，就會選擇這一項。
<div id="app"> <input type="checkbox" v-model="checked" value="html" id="html"><label for="html">HTML</label> <br> <input type="checkbox" v-model="checked" value="js" id="js"><label for="js">JavaScript</label> <br> <input type="checkbox" v-model="checked" value="css" id="css"><label for="css">CSS</label> <br> <p>選擇的項是：{{ checked }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { checked: ['html','css'] } }) </script>
選擇列表：
選擇列表就是下拉選擇器，同樣也是分為單選和多選方式。
<div id="app"> <select v-model="selected"> <option>HTML</option> <option value="js">JavaScript</option> <option>CSS</option> </select> <p>選擇的項是：{{ selected }}</p> <select v-model="selected2" multiple> <option value="html">HTML</option> <option value="js">JavaScript</option> <option value="css">CSS</option> </select> <p>選擇的項是：{{ selected2 }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { selected: 'HTML', selected2: ['html','js'] } }) </script>
Class 與 Style 綁定
對於數據綁定，一個常見的需求是操作元素的class樣式列表和它的內聯樣式。我們可以用v-bind綁定元素屬性，表達式的結果類型可以是字符串，也可以是對象或數組，v-bind:class 指令也可以與普通的 class 屬性共存。
表達式為對象時：
<div id='example' class="h12" :class="{'active':isActive,'error':isError}"></div> var vm = new Vue({ el: '#example', data: { isActive: true, isError: false } })
渲染為：
<div id='example' class="h12 active"></div>
以上例子普通class綁定h12樣式，通過v-bind:class綁定的表達式為對象，渲染結果中h12樣式永遠存在，當數據isActive和isError變化時，為true的對應的class樣式被添加到class列表中。
我們也可以直接綁定數據中的一個對象，代碼示例如下：
<div id='example' class="h12" :class="container"></div> var vm = new Vue({ el: '#example', data: { container：{ 'active': true, 'error': false } } })
當然除了綁定數據外，我們也可以直接綁定計算屬性使用，處理更復雜的業務邏輯，不過在項目中很少用到。
表達式為數組時：
<div id='example' :class="[active, error]"></div> var vm = new Vue({ el: '#example', data: { active: 'active', error: 'error',
isError: true } })
渲染為：
<div id='example' class="active error"></div>
如果想根據條件切換列表中的class，則可以用三元表達式，代碼示例如下：
<div id='example' :class="[active, isError ? error : '']"></div>
綁定內聯樣式：
v-bind:style的表達式可以綁定對象，也可以是數組，CSS屬性名可以用駝峰命名式(camelCase)或短橫分隔命名式(kebab-case)，代碼示例如下：
<div id='example' :style="{'color':color,'fontSize':fontSize+'px'}">樣式</div> var vm = new Vue({ el: '#example', data: { color: 'orange', fontSize: 13 } })
渲染為：
<div style="color: orange; font-size: 13px;">樣式</div>
通常直接綁定到一個樣式對象更好，讓模板更清晰，代碼示例如下：
<div id='example' :style="ddfe">樣式</div> var vm = new Vue({ el: '#example', data: { ddfe: { color: 'orange', fontSize: 13 } } })
v-bind:style 的數組語法可以將多個樣式對象應用到一個元素上，代碼示例如下：
<div id='example' :style="[ddfe, ddcolor]">樣式</div>
目錄導航
- Vue.js+vue-element搭建屬於自己的后台管理模板：什么是Vue.js?（一）
- Vue.js+vue-element搭建屬於自己的后台管理模板：Vue.js快速入門（二）
- Vue.js+vue-element搭建屬於自己的后台管理模板：更深入了解Vue.js（三）
- Vue.js+vue-element搭建屬於自己的后台管理模板：創建一個項目（四）
參考資料
Vue.js