https://blog.csdn.net/qq_41330022/article/details/90293502
學習目標
會創建Vue實例，知道Vue的常見屬性
會使用Vue的生命週期的鉤子函數
會使用vue常見指令
會使用vue計算屬性和watch監控
會編寫Vue組件
掌握組件間通信
0.前言
前幾天我們已經對後端的技術棧有了初步的瞭解、並且已經搭建了整個後端微服務的平臺。接下來要做的事情就是功能開發了。但是沒有前端頁面，我們肯定無從下手，因此今天我們就要來了解一下前端的一些技術，完成前端頁面搭建。
先聊一下前端開發模式的發展。
靜態頁面
最初的網頁以HTML爲主，是純靜態的網頁。網頁是隻讀的，信息流只能從服務的到客戶端單向流通。開發人員也只關心頁面的樣式和內容即可。
異步刷新，操作DOM
1995年，網景工程師Brendan Eich 花了10天時間設計了JavaScript語言.
隨着JavaScript的誕生，我們可以操作頁面的DOM元素及樣式，頁面有了一些動態的效果，但是依然是以靜態爲主。 - ajax盛行： - 2005年開始，ajax逐漸被前端開發人員所重視，因爲不用刷新頁面就可以更新頁面的數據和渲染效果。 - 此時的開發人員不僅僅要編寫HTML樣式，還要懂ajax與後端交互，然後通過JS操作Dom元素來實現頁面動態效果。比較流行的框架如Jquery就是典型代表。
MVVM，關注模型和視圖
2008年，google的Chrome發佈，隨後就以極快的速度佔領市場，超過IE成爲瀏覽器市場的主導者。
2009年，Ryan Dahl在谷歌的Chrome V8引擎基礎上，打造了基於事件循環的異步IO框架：Node.js。
基於時間循環的異步IO
單線程運行，避免多線程的變量同步問題
JS可以編寫後臺diamante，前後臺統一編程語言
node.js的偉大之處不在於讓JS邁向了後端開發，而是構建了一個龐大的生態系統。
2010年，NPM作爲node.js的包管理系統首次發佈，開發人員可以遵循Common.js規範來編寫Node.js模塊，然後發佈到NPM上供其他開發人員使用。目前已經是世界最大的包模塊管理系統。
隨後，在node的基礎上，涌現出了一大批的前端框架：
MVVM模式
M：即Model，模型，包括數據和一些基本操作
V：即View，視圖，頁面渲染結果
VM：即View-Model，模型與視圖間的雙向操作（無需開發人員干涉）
在MVVM之前，開發人員從後端獲取需要的數據模型，然後要通過DOM操作Model渲染到View中。而後當用戶操作視圖，我們還需要通過DOM獲取View中的數據，然後同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封裝起來，開發人員不用再關心Model和View之間是如何互相影響的：
只要我們Model發生了改變，View上自然就會表現出來。
當用戶修改了View，Model中的數據也會跟着改變。
把開發人員從繁瑣的DOM操作中解放出來，把關注點放在如何操作Model上。
而我們今天要學習的，就是一款MVVM模式的框架：Vue
1.認識Vue
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。
前端框架三巨頭：Vue.js、React.js、AngularJS，vue.js以期輕量易用著稱，vue.js和React.js發展速度最快，AngularJS還是老大。
官網：https://cn.vuejs.org/
參考：https://cn.vuejs.org/v2/guide/
Git地址：https://github.com/vuejs
尤雨溪，Vue.js 創作者，Vue Technology創始人，致力於Vue的研究開發。
2.Node和NPM
前面說過，NPM是Node提供的模塊管理工具，可以非常方便的下載安裝很多前端框架，包括Jquery、AngularJS、VueJs都有。爲了後面學習方便，我們先安裝node及NPM工具。
2.1.下載Node.js
下載地址：https://nodejs.org/en/download/
推薦下載LTS版本。
目前最新的是10.15.3。大家自行下載。然後下一步安裝即可。
完成以後，在控制檯輸入：powershell node -v
powershell node -v
看到版本信息：
2.2.NPM
安裝完成Node應該自帶了NPM了，在控制檯輸入npm -v查看：
npm默認的倉庫地址是在國外網站，速度較慢，建議大家設置到淘寶鏡像。但是切換鏡像是比較麻煩的。推薦一款切換鏡像的工具：nrm
我們首先安裝nrm，這裏-g代表全局安裝：npm install nrm -g
npm install nrm -g
然後通過：nrm ls
nrm ls
命令查看npm的倉庫列表,帶*的就是當前選中的鏡像倉庫：
通過：nrm use taobao
nrm use taobao
來指定要使用的鏡像源：
然後通過：nrm test npm
nrm test npm
來測試速度：
2.3安裝NPM的一些坑
安裝npm install時，長時間停留在fetchMetadata: sill mapToRegistry uri
1.先看環境變量配是不是配的有問題下面有教程
2.更換成淘寶的源：npm config set registryhttps://registry.npm.taobao.org
npm config set registryhttps://registry.npm.taobao.org
– 配置後可通過下面方式來驗證是否成功：npm config get registry
npm config get registry
– 或：npm info express
npm info express
npm install是安裝成功，但是安裝到了C:\Users\eviltansir\AppData\Roaming\npm 的目錄下導致的報錯我們需要將C:\Users\eviltansir\AppData\Roaming\npm 文件夾裏面的文件全部複製到我們所安裝的目錄下就好了
使用npm命令提示: 'npm' 不是內部或外部命令，也不是可運行的程序
在安裝完nodejs後用上面的命令可以查看到版本號表示安裝成功了！
但是在使用nrm ls命令查看查看npm的倉庫列表的時候卻提示npm不是內部或外部命令！
在安裝nodejs時候，把它安裝在D盤或別的盤時會遇到npm環境變量沒有配好，導致提示不是內部或外部命令這時候，需要自己手動去配置環境變量。
解決辦法：桌面右擊我的電腦點擊屬性進入到控制面板點擊高級系統設置
然後點擊環境變量
把它替換成你所安裝的nodejs文件位置，我這裏是D:\Install\nodejs，然後複製到環境裏就好了
注意：
有教程推薦大家使用cnpm命令，但是使用發現cnpm有時會有bug，不推薦。
安裝完成請一定要重啓下電腦！！！
安裝完成請一定要重啓下電腦！！！
安裝完成請一定要重啓下電腦！！！
3.快速入門
接下來，我們快速領略下vue的魅力
3.1.創建工程
創建一個新的工程：
選中一個空的：
點擊下一步：
輸入工程名稱，工程存放的路徑，點擊下一步。
然後新建一個module：
選中static web，靜態web項目：
位置信息：
3.2.安裝vue
3.2.1.下載安裝
下載地址：https://github.com/vuejs/vue
可以下載2.6.10版本https://github.com/vuejs/vue/archive/v2.6.10.zip
下載解壓，得到vue.js文件。
3.2.2.使用CDN
或者也可以直接使用公共的CDN服務：
<!-- 開發環境版本，包含了用幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
3.2.3.推薦npm安裝
在idea的左下角，有個Terminal按鈕，點擊打開控制檯：
先輸入：npm init -y 進行初始化
npm init -y
安裝Vue，輸入命令：npm install vue --save
npm install vue --save
然後就會在hello_vue目錄發現一個node_modules目錄，並且在下面有一個vue目錄。
node_modules是通過npm安裝的所有模塊的默認位置。
3.3.vue入門案例
3.3.1.HTML模板
在hello_vue目錄新建一個HTML
在hello.html中，我們編寫一段簡單的代碼：
h2中要輸出一句話：你好 xx。後面的xx是要渲染的數據。
3.3.2.vue渲染
然後我們通過Vue進行渲染：
<div id="app">
<h2>你好 {{name}}</h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 生成一個Vue實例
var app = new Vue({
el:"#app", // el,即element。要渲染的的頁面元素
data:{ // 數據
name:"VUE"
}
})
首先通過 new Vue()來創建Vue實例
然後構造函數接收一個對象，對象中有一些屬性：
el：是element的縮寫，通過id選中要渲染的頁面元素，本例中是一個div
data：數據，數據是一個對象，裏面有很多屬性，都可以渲染到視圖中
name：這裏我們指定了一個name屬性
頁面中的h2元素中，我們通過{{name}}的方式，來渲染剛剛定義的name屬性。
打開頁面查看效果：
更神奇的在於，當你修改name屬性時，頁面會跟着變化：
3.3.3.雙向綁定
我們對剛纔的案例進行簡單修改：
<div id="app">
<input type="text" v-model="balance">
<h2>你好 {{name}}，當前餘額爲{{balance}}</h2>
</div>
<script type="text/javascript">
// 生成一個Vue實例
var app = new Vue({
el: "#app", // el,即element。要渲染的的頁面元素
data: { // 數據
name: "VUE",
balance:1000
}
})
</script>
你好 {{name}} ,，當前餘額爲{{balance}}
我們在data添加了新的屬性：balance
在頁面中有一個input元素，通過v-model與balance進行綁定。
同時通過{{balance}}在頁面輸出
效果：
我們可以觀察到，輸入框的變化引起了data中的balance的變化，同時頁面輸出也跟着變化。
input與balance綁定，input的value值變化，影響到了data中的balance值
頁面{{balance}}與數據balance綁定，因此balance值變化，引起了頁面效果變化。
沒有任何dom操作，這就是雙向綁定的魅力。
3.3.4.事件處理
我們在頁面添加一個按鈕：
html <button v-on:click="balance++">點我</button>
這裏用v-on指令綁定點擊事件，而不是普通的onclick，然後直接操作balance
普通click是無法直接操作balance的。
效果：
注意：
需要導入<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">命名空間，idea用戶Ait+Enter導入
4.Vue實例
4.1.創建Vue實例
每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例開始的：
javascript var vm = new Vue({ // 選項 })
在構造函數中傳入一個對象，並且在對象中聲明各種Vue需要的數據和方法，包括：
el
data
methods
等等
接下來我們一 一介紹。
4.2.模板或元素
每個Vue實例都需要關聯一段Html模板，Vue會基於此模板進行視圖渲染。
我們可以通過el屬性來指定。
例如一段html模板：
<div id="app">
</div>
然後創建Vue實例，關聯這個div
js var vm = new Vue({ el:"#app" })
這樣，Vue就可以基於id爲app的div元素作爲模板進行渲染了。在這個div範圍以外的部分是無法使用vue特性的。
4.3.數據
當Vue實例被創建時，它會嘗試獲取在data中定義的所有屬性，用於視圖的渲染，並且監視data中的屬性變化，當data發生改變，所有相關的視圖都將重新渲染，這就是“響應式“系統。
<div id="app">
<input type="text" v-model="name"/>
</div>
js var vm = new Vue({ el:"#app", data:{ name:"劉德華" } })
name的變化會影響到input的值
input中輸入的值，也會導致vm中的name發生改變
4.4.方法
Vue實例中除了可以定義data屬性，也可以定義方法，並且在Vue的作用範圍內使用。
<div id="app">
{{balance}}
<button v-on:click="add">加</button>
</div>
js var vm = new Vue({ el:"#app", data:{ balance: 0 }, methods:{ add:function(){ // this代表的當前vue實例 this.balance++; } } })
4.5.生命週期鉤子
4.5.1.生命週期
每個 Vue 實例在被創建時都要經過一系列的初始化過程 ：創建實例，裝載模板，渲染模板等等。Vue爲生命週期中的每個狀態都設置了鉤子函數（監聽函數）。每當Vue實例處於不同的生命週期時，對應的函數就會被觸發調用。
生命週期：
4.5.2.鉤子函數
例如：created代表在vue實例創建後；
我們可以在Vue中定義一個created函數，代表這個時期的構造函數：
<div id="app">
{{hello}}
</div>
var vm = new Vue({
el:"#app",
data:{
hello: '' // hello初始化爲空
},
created(){
this.hello = "hello, world！ 我出生了！";
}
})
結果：
4.5.3.this
我們可以看下在vue內部的this變量是誰，我們在created的時候，打印this
js var vm = new Vue({ el:"#app", data:{ hello: '' // hello初始化爲空 }, created(){ this.hello = "hello, world！ 我出生了！"; console.log(this); } })
控制檯的輸出：
5.指令
什麼是指令？
指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的預期值是：單個 JavaScript 表達式。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。
例如我們在入門案例中的v-on，代表綁定事件。
5.1.插值表達式
5.1.1.花括號
格式：
{{表達式}}
說明：
該表達式支持JS語法，可以調用js內置函數（必須有返回值）
表達式必須有返回結果。例如 1 + 1，沒有結果的表達式不允許使用，如：var a = 1 + 1;
可以直接獲取Vue實例中定義的數據或函數
示例：
HTML：
<div id="app">{{name}}</div>
JS:
var app = new Vue({
el:"#app",
data:{
name:"Jack"
}
})
5.1.2.插值閃爍
使用{{}}方式在網速較慢時會出現問題。在數據未加載完成時，頁面會顯示出原始的{{}}，加載完畢後才顯示正確數據，我們稱爲插值閃爍。
我們將網速調慢一些，然後試試看剛纔的案例：
刷新頁面：
5.1.3.v-text和v-html
使用v-text和v-html指令來替代{{}}
說明：
v-text：將數據輸出到元素內部，如果輸出的數據有HTML代碼，會作爲普通文本輸出
v-html：將數據輸出到元素內部，如果輸出的數據有HTML代碼，會被渲染
示例：
HTML:
<div id="app">
v-text:<span v-text="hello"></span> <br/>
v-html:<span v-html="hello"></span>
</div>
JS：
var vm = new Vue({
el:"#app",
data:{
hello: "<h1>大家好，我是VUE</h1>"
}
})
效果：
並且不會出現插值閃爍，當沒有數據時，會顯示空白。
5.2.v-model
剛纔的v-text和v-html可以看做是單向綁定，數據影響了視圖渲染，但是反過來就不行。接下來學習的v-model是雙向綁定，視圖（View）和模型（Model）之間會互相影響。
既然是雙向綁定，一定是在視圖中可以修改數據，這樣就限定了視圖的元素類型。目前v-model的可使用元素有：
input
select
textarea
checkbox
radio
components（Vue中的自定義組件）
基本上除了最後一項，其它都是表單的輸入項。
舉例：
html：
<div id="app">
<input type="checkbox" v-model="language" value="Java" />Java<br/>
<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
<input type="checkbox" v-model="language" value="Swift" />Swift<br/>
<h1>
你選擇了：{{language.join(',')}}
</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
language: []
}
})
</script>
多個CheckBox對應一個model時，model的類型是一個數組，單個checkbox值是boolean類型
radio對應的值是input的value值
input 和textarea 默認對應的model是字符串
select單選對應字符串，多選對應也是數組
5.3.v-on
5.3.1.基本用法
v-on指令用於給頁面元素綁定事件。
語法：
v-on:事件名="js片段或函數名"
示例：
<div id="app">
<!--事件中直接寫js片段-->
<button v-on:click="num++">增加</button><br/>
<!--事件指定一個回調函數，必須是Vue實例中定義的函數-->
<button v-on:click="decrement">減少</button><br/>
<h1>num: {{num}}</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
decrement(){
this.num--;
}
}
})
</script>
效果：
另外，事件綁定可以簡寫，例如
v-on:click='add'
可以簡寫爲
@click='add'
5.3.2.事件修飾符
在事件處理程序中調用
event.preventDefault()
或
event.stopPropagation()
是非常常見的需求。儘管我們可以在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。
爲了解決這個問題，Vue.js 爲 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令後綴來表示的。
.stop ：阻止事件冒泡
.prevent：阻止默認事件發生
.capture：使用事件捕獲模式
.self：只有元素自身觸發事件才執行。（冒泡或捕獲的都不執行）
.once：只執行一次
5.3.3.按鍵修飾符
在監聽鍵盤事件時，我們經常需要檢查常見的鍵值。Vue 允許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符：
例如：
<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` -->
<input v-on:keyup.13="submit">
5.4.v-for
遍歷數據渲染頁面是非常常用的需求，Vue中通過v-for指令來實現。
5.4.1.遍歷數組
語法：
v-for="item in items"
items：要遍歷的數組，需要在vue的data中定義好。
item：迭代得到的數組元素的別名
示例
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} : {{user.gender}} : {{user.age}}
</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
users:[
{name:'你打球的樣子真像蔡徐坤', gender:'男', age: 21},
{name:'馬爾扎哈', gender:'男', age: 30},
{name:'范冰冰', gender:'女', age: 24},
{name:'劉亦菲', gender:'女', age: 18},
{name:'古力娜扎', gender:'女', age: 25}
]
}
})
</script>
效果：
5.4.2.數組角標
在遍歷的過程中，如果我們需要知道數組角標，可以指定第二個參數：
語法
v-for="(item,index) in items"
items：要迭代的數組
item：迭代得到的數組元素別名
index：迭代到的當前元素索引，從0開始。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="./node_modules/vue/dist/vue.js"></script>
<body>
<div id="app">
<ul>
<li v-for="(user,index) in users">
{{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
users:[
{name:'你打球的樣子真像蔡徐坤', gender:'男', age: 21},
{name:'馬爾扎哈', gender:'男', age: 30},
{name:'范冰冰', gender:'女', age: 24},
{name:'劉亦菲', gender:'女', age: 18},
{name:'古力娜扎', gender:'女', age: 25}
]
}
})
</script>
</html>
效果：
5.4.3.遍歷對象
v-for除了可以迭代數組，也可以迭代對象。語法基本類似
語法：
v-for="value in object" v-for="(value,key) in object" v-for="(value,key,index) in object"
1個參數時，得到的是對象的值
2個參數時，第一個是值，第二個是鍵
3個參數時，第三個是索引，從0開始
示例：
<div id="app">
<ul>
<li v-for="(value,key,index) in user">
{{index}} - {{key}} : {{value}}
</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
user:{name:'柳巖', gender:'女', age: 21}
}
})
</script>
效果：
5.4.4.key
當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地複用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。
這個功能可以有效的提高渲染的效率。
但是要實現這個功能，你需要給Vue一些提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要爲每項提供一個唯一 key 屬性。理想的 key 值是每項都有的且唯一的 id。
示例：
<ul>
<li v-for="(item,index) in items" :key=index></li>
</ul>
這裏使用了一個特殊語法：:key="" 我們後面會講到，它可以讓你讀取vue中的屬性，並賦值給key屬性
這裏我們綁定的key是數組的索引，應該是唯一的
5.5.v-if和v-show
5.5.1.基本使用
v-if，顧名思義，條件判斷。當得到結果爲true時，所在的元素纔會被渲染。
語法：
v-if="布爾表達式"
示例：
<div id="app">
<!--事件中直接寫js片段-->
<button v-on:click="show = !show">點擊切換</button><br/>
<h1 v-if="show">
你好
</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show:true
}
})
</script>
效果：
5.5.2.與v-for結合
當v-if和v-for出現在一起時，v-for優先級更高。也就是說，會先遍歷，再判斷條件。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(user,index) in users" v-if="user.gender === '女'">
{{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
users:[
{name:'你打球的樣子真像蔡徐坤', gender:'女', age: 21},
{name:'馬爾扎哈', gender:'男', age: 30},
{name:'范冰冰', gender:'女', age: 24},
{name:'劉亦菲', gender:'女', age: 18},
{name:'古力娜扎', gender:'女', age: 25}
]
}
})
</script>
</body>
</html>
效果：
5.5.3.v-else
你可以使用 v-else 指令來表示 v-if 的“else 塊”：
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-else
元素必須緊跟在帶
v-if
或者
v-else-if
的元素的後面，否則它將不會被識別。
v-else-if
，顧名思義，充當
v-if
的
else-if
塊，可以連續使用：
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
類似於
v-else
，
v-else-if
也必須緊跟在帶
v-if
或者
v-else-if
的元素之後。
5.5.4.v-show
另一個用於根據條件展示元素的選項是
v-show
指令。用法大致一樣：
<h1 v-show="ok">Hello!</h1>
不同的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。
示例：
<div id="app">
<!--事件中直接寫js片段-->
<button v-on:click="show = !show">點擊切換</button><br/>
<h1 v-if="show">
你好
</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show:true
}
})
</script>
代碼：
5.6.v-bind
5.6.1.綁定class樣式
假如我們想動態的修改頁面元素的屬性，比如class屬性，這樣寫是錯誤的：
<div class="{{isAcctive}}"></div>
因爲插值表達式不能用在屬性的值中。
Vue對class屬性進行了特殊處理，可以接收數組或對象格式：
數組語法
我們可以藉助於v-bind指令來實現：
HTML：
<div v-bind:class="isActive"></div>
你的data屬性：
data:{
isActive:['active','hasError']
}
渲染後的效果：
<div class="active hasError"></div>
對象語法
我們可以傳給 v-bind:class 一個對象，以動態地切換 class：
<div v-bind:class="{ active: isActive }"></div>
上面的語法表示 active 這個 class 存在與否將取決於數據屬性 isActive 的 truthiness。
你可以在對象中傳入更多屬性來動態切換多個 class。此外，v-bind:class 指令也可以與普通的 class 屬性共存。當有如下模板:
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
和如下 data：
data: {
isActive: true,
hasError: false
}
結果渲染爲：
<div class="static active"></div>
當 isActive 或者 hasError 變化時，class 列表將相應地更新。例如，如果 hasError的值爲 true，class 列表將變爲
"static active text-danger"
5.6.2.簡寫
v-bind:class
可以簡寫爲:
class
5.7.計算屬性
在插值表達式中使用js表達式是非常方便的，而且也經常被用到。
但是如果表達式的內容很長，就會顯得不夠優雅，而且後期維護起來也不方便，例如下面的場景，我們有一個日期的數據，但是是毫秒值：
data:{
birthday:1529032123201 // 毫秒值
}
我們在頁面渲染，希望得到yyyy-MM-dd的樣式：
<h1>您的生日是：{{
new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
}}
</h1>
雖然能得到結果，但是非常麻煩。
Vue中提供了計算屬性，來替代複雜的表達式：
var vm = new Vue({
el:"#app",
data:{
birthday:1429032123201 // 毫秒值
},
computed:{
birth(){// 計算屬性本質是一個方法，但是必須返回結果
const d = new Date(this.birthday);
return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
}
}
})
計算屬性本質就是方法，但是一定要返回數據。然後頁面渲染時，可以把這個方法當成一個變量來使用。
頁面使用：
<div id="app">
<h1>您的生日是：{{birth}} </h1>
</div>
效果：
5.8.watch
watch可以讓我們監控一個值的變化。從而做出相應的反應。
示例：
<div id="app">
<input type="text" v-model="message">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:""
},
watch:{
message(newVal, oldVal){
console.log(newVal, oldVal);
}
}
})
</script>
效果：
6.組件化
在大型應用開發的時候，頁面可以劃分成很多部分。往往不同的頁面，也會有相同的部分。例如可能會有相同的頭部導航。
但是如果每個頁面都獨自開發，這無疑增加了我們開發的成本。所以我們會把頁面的不同部分拆分成獨立的組件，然後在不同頁面就可以共享這些組件，避免重複開發。
6.1.定義全局組件
我們通過Vue的component方法來定義一個全局組件。
<div id="app">
<!--使用定義好的全局組件-->
<counter></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 定義全局組件，兩個參數：1，組件名稱。2，組件參數
Vue.component("counter",{
template:'<button v-on:click="count++">你點了我 {{ count }} 次，我記住了.</button>',
data(){
return {
count:0
}
}
})
var app = new Vue({
el:"#app"
})
</script>
組件其實也是一個Vue實例，因此它在定義時也會接收：data、methods、生命週期函數等
不同的是組件不會與頁面的元素綁定，否則就無法複用了，因此沒有el屬性。
但是組件渲染需要html模板，所以增加了template屬性，值就是HTML模板
全局組件定義完畢，任何vue實例都可以直接在HTML中通過組件名稱來使用組件了。
data的定義方式比較特殊，必須是一個函數。
效果：
6.2.組件的複用
定義好的組件，可以任意複用多次：
<div id="app">
<!--使用定義好的全局組件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
效果：
你會發現每個組件互不干擾，都有自己的count值。怎麼實現的？
組件的data屬性必須是函數！
當我們定義這個 <counter> 組件時，它的data 並不是像這樣直接提供一個對象：
data: {
count: 0
}
取而代之的是，一個組件的 data 選項必須是一個函數，因此每個實例可以維護一份被返回對象的獨立的拷貝：
data: function () {
return {
count: 0
}
}
如果 Vue 沒有這條規則，點擊一個按鈕就會影響到其它所有實例！
6.2.局部註冊
一旦全局註冊，就意味着即便以後你不再使用這個組件，它依然會隨着Vue的加載而加載。
因此，對於一些並不頻繁使用的組件，我們會採用局部註冊。
我們先在外部定義一個對象，結構與創建組件時傳遞的第二個參數一致：
const counter = {
template:'<button v-on:click="count++">你點了我 {{ count }} 次，我記住了.</button>',
data(){
return {
count:0
}
}
};
然後在Vue中使用它：
var app = new Vue({
el:"#app",
components:{
counter:counter // 將定義的對象註冊爲組件
}
})
components就是當前vue對象子組件集合。
其key就是子組件名稱
其值就是組件對象的屬性
效果與剛纔的全局註冊是類似的，不同的是，這個counter組件只能在當前的Vue實例中使用
6.3.組件通信
通常一個單頁應用會以一棵嵌套的組件樹的形式來組織：
頁面首先分成了頂部導航、左側內容區、右側邊欄三部分
左側內容區又分爲上下兩個組件
右側邊欄中又包含了3個子組件
各個組件之間以嵌套的關係組合在一起，那麼這個時候不可避免的會有組件間通信的需求。
6.3.1.父向子傳遞props
比如我們有一個子組件：
Vue.component("introduce",{
// 直接使用props接收到的屬性來渲染頁面
template:'<h3>{{title}}</h3>',
props:[title] // 通過props來接收一個父組件傳遞的屬性
})
這個子組件中要使用title屬性渲染頁面，但是自己並沒有title屬性
通過props來接收父組件屬性，名爲title
父組件使用子組件，同時傳遞title屬性：
<div id="app">
<h1>打個招呼：</h1>
<!--使用子組件，同時傳遞title屬性-->
<introduce title="大家好，我是VUE"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("introduce",{
// 直接使用props接收到的屬性來渲染頁面
template:'<h1>{{title}}</h1>',
props:['title'] // 通過props來接收一個父組件傳遞的屬性
})
var app = new Vue({
el:"#app"
})
</script>
效果：
6.3.2.傳遞複雜數據
我們定義一個子組件：
const myList = {
template:'\
<ul>\
<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\
</ul>\
',
props:{ // 通過props來接收父組件傳遞來的屬性
items:{// 這裏定義items屬性
type:Array,// 要求必須是Array類型
default:[] // 如果父組件沒有傳，那麼給定默認值是[]
}
}
}
這個子組件可以對 items 進行迭代，並輸出到頁面。
但是組件中並未定義items屬性。
通過props來定義需要從父組件中接收的屬性
items：是要接收的屬性名稱
type：限定父組件傳遞來的必須是數組，否則報錯
default：默認值
我們在父組件中使用它：
div id="app">
<!-- 使用子組件的同時，傳遞屬性，這裏使用了v-bind，指向了父組件自己的屬性lessons -->
<my-list :items="lessons"/>
</div>
var app = new Vue({
el:"#app",
components:{
myList // 當key和value一樣時，可以只寫一個
},
data:{
lessons:[
{id:1, name: 'java'},
{id:2, name: 'php'},
{id:3, name: 'ios'},
]
}
})
效果：
6.3.3.子向父的通信
來看這樣的一個案例：
<div id="app">
<h2>num: {{num}}</h2>
<!--使用子組件的時候，傳遞num到子組件中-->
<counter :num="num"></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("counter", {// 子組件，定義了兩個按鈕，點擊數字num會加或減
template:'\
<div>\
<button @click="num++">加</button> \
<button @click="num--">減</button> \
</div>',
props:['num']// count是從父組件獲取的。
})
var app = new Vue({
el:"#app",
data:{
num:0
}
})
</script>
子組件接收父組件的num屬性
子組件定義點擊按鈕，點擊後對num進行加或減操作
我們嘗試運行：
好像沒問題，點擊按鈕試試：
子組件接收到父組件屬性後，默認是不允許修改的。怎麼辦？
既然只有父組件能修改，那麼加和減的操作一定是放在父組件：
var app = new Vue({
el:"#app",
data:{
num:0
},
methods:{ // 父組件中定義操作num的方法
increment(){
this.num++;
},
decrement(){
this.num--;
}
}
})
但是，點擊按鈕是在子組件中，那就是說需要子組件來調用父組件的函數，怎麼做？
我們可以通過v-on指令將父組件的函數綁定到子組件上：
<div id="app">
<h2>num: {{num}}</h2>
<counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>
然後，當子組件中按鈕被點擊時，調用綁定的函數：
Vue.component("counter", {
template: '\
<div>\
<button @click="plus">加</button> \
<button @click="reduce">減</button> \
</div>',
props: ['count'],
methods: {
plus() {
this.$emit("inc");
},
reduce() {
this.$emit("dec");
}
}
})
vue提供了一個內置的this.$emit函數，用來調用父組件綁定的函數
效果：