3.全局API 3-1. Vue.directive 自定義指令 Vue.directive用於自定義全局的指令 實例如下： 效果為p標簽顯示為紅色，directive指令中的參數1（實例中的‘sq’）可以類比前篇文章內部指令的bind、on；參數2是一個回調函數，這個回調函數包含三個參數（el:即 ...
3.全局API
3-1. Vue.directive 自定義指令
Vue.directive用於自定義全局的指令
實例如下：
1 <body> 2 <div id="app"> 3 <p v-sq="color">{{message}}</p> 4 </div> 5 </body> 6 <script> 7 Vue.directive('sq', function (el, binding, vnode) { 8 el.style.color = binding.value; 9 }); 10 var vm = new Vue({ 11 el: "#app", 12 data: { 13 message: "前端工程師", 14 color: "red" 15 } 16 }); 17 </script>
效果為p標簽顯示為紅色，directive指令中的參數1（實例中的‘sq’）可以類比前篇文章內部指令的bind、on；參數2是一個回調函數，這個回調函數包含三個參數（el:即指令綁定的元素，實例中的el即為p元素；binding:包含指令的相關信息，可以通過console.log列印出來；vnode:即Vue編譯生成的虛擬節點。虛擬節點即vue2.0中引入的新功能，用js對象替代DOM節點，改進直接操作DOM代價大引發的性能問題）。
指令都是有生命周期的，同樣地，自定義指令有5個生命周期，分別是：bind、inserted、update、componentUpdated、unbind
3-2 Vue.extend 構造器的延伸
extend中文即延伸、擴展的意思。Vue.extend返回的即是一個“擴展實例構造器，並掛載到自定義元素上。
實例如下：
1 <body> 2 <div id="app"> 3 <p class="gz"></p> 4 </div> 5 <p class="gz"></p> 6 </body> 7 <script> 8 var author=Vue.extend({ 9 template:"<a>最終解釋權歸作者所有</a>" 10 }) 11 new author().$mount('.gz'); 12 </script>
p標簽會替換成template的值，但僅限於第一個p標簽，因為只掛載了一次，實例中用的是class，將其換成id或標簽同樣適用。
3-3 Vue.set全局操作
Vue.set的作用就是在構造器外部操作構造器內部的數據、屬性或者方法。Vue.set存在的意義是彌補js語言的缺陷，因為Vue不能自動檢測數組的兩種變動：1.利用索引設置一個元素；2.修改數組的長度。用Vue.set更新數據時，依次傳入三個參數①數組名稱②索引③元素
3-4 Vue的生命周期
Vue的生命周期即鉤子函數。包括10共，按照順序依次為：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDastroy、destroyed。詳細的結構圖可參考vue官網的圖例介紹。
3-5 Template模板
Template模板大致有三種寫法：
1.類似前面講到Vue.extend掛載時的template寫法，但不是雙引號包括內容，而是``（英文tab鍵）
2.利用template模板：<template></template>。這個類似於Backbone中模板的寫法
3.在script標簽中寫入模板內容，不過此時type為"x-tempate".。這種寫法可以將模板從外部導入。
另外需要強調一點、vue2.0中規定模板內容必須要要有一個根元素，一般地用div包裹住整個模板內容。
3-6 component組件
component組件本質上就是自定義的標簽。component組件分為全局化註冊組件和局部註冊組件，兩者的不同之處在於使用的範圍（類比於全局變數和局部變數）。
3-6-1 component組件的註冊
1.全局化註冊組件
實例如下：
1 <body> 2 <div id="app"> 3 <plp></plp> 4 </div> 5 </body> 6 <script> 7 Vue.component('plp', { 8 template: `<a>最終解釋權歸作者所有</a>` 9 }) 10 var vm = new Vue({ 11 el: "#app" 12 }) 13 </script>
2.局部註冊組件
實例如下：
1 <body> 2 <div id="app"> 3 <plp></plp> 4 </div> 5 </body> 6 <script> 7 var vm = new Vue({ 8 el: "#app", 9 components: { 10 'plp': { 11 template: `<p>最終解釋權歸作者所有</p>` 12 } 13 } 14 }) 15 </script>
3-6-2 component組件的props屬性
component組件的props屬性就是用來設置和獲取標簽上的屬性值。
實例如下：
1 <body> 2 <div id="app"> 3 <plp city="YiChang"></plp> 4 </div> 5 </body> 6 <script> 7 var vm = new Vue({ 8 el: "#app", 9 components: { 10 'plp': { 11 props:['city'], 12 template: `<p>I like {{city}}</p>` 13 } 14 } 15 }) 16 </script>
首先component組件的props選項通過['city']獲取自定義標簽該屬性的值，然後在tepmlate中通過{{city}}插值的方法設置屬性值。需要註意的一點是自定義標簽的屬性取值儘量避免使用'-',如有必要使用小駝峰命名，可以聯想到通過原生JS設置元素的顏色;elements.style.backgroundColor,而不是element.style.background-color
component組件傳值，使用:bind綁定即可。
3-6-3 component父子組件
component父子組件就是在一個component組件里再寫一個component組件。
實例如下：
1 <body> 2 <div id="app"> 3 <plp :city="like"></plp> 4 </div> 5 </body> 6 <script> 7 var vm = new Vue({ 8 el: "#app", 9 data: { 10 like: 'YiChang' 11 }, 12 components: { 13 'plp': { 14 props: ['city'], 15 template: `<p>I like {{city}} <ppl></ppl></p>`, 16 components: { 17 'ppl': { 18 template: `<span style="color:red">very much!</span>` 19 } 20 } 21 } 22 } 23 }) 24 </script>
實例中涉及到component組件嵌套，在plp組件中嵌套組件ppl。當然實際開發中組件的嵌套遠比這個複雜，必要的時候可以在構造器外部定義聲明局部component組件。
3-6-4 component標簽
<component></component>標簽是Vue框架自定義的標簽，它的用途就是可以動態綁定我們的組件，根據數據的不同更換不同的組件。
好啦，關於Vue的全局API就介紹到這裡，下一篇關於Vue的基礎知識，我們聊聊Vue2.0的選項以及實例內置組件~
