過濾器

概念：Vue.js允許自定義過濾器，可被用作一些常見的文字格式化，過濾器 可以用在兩個地方：mustache插值和v-bind表示式。過濾器應該被新增在JavaScript表示式的尾部，由管道符指示

1. 過濾器呼叫時候的格式
   { { name | nameFilter(過濾器的名稱) } }

2. 定義過濾器

Vue.filter(' 過濾器的名稱 '，function( data ) {
// 過濾器中的回撥中，第一個引數已經被規定死了
//永遠都是過濾器管道符前面 傳遞過來的資料
return data + '123'; // 給原先的值加上字尾
} )

ES6中字串新方法之padStart和padEnd

用來填充字串

// padStart(maxLength,fillString='')
var month = (date.getMonth()+1).toString().partStart(2,'0');
// 如果月數不足2位，自動在前面補0

鍵盤事件修飾符

1. @keyup.enter=’’
   當按下enter鍵擡起後觸發
2. .tab
   按下tab鍵觸發
3. .delete
   捕獲"刪除"和"退格"鍵
4. .Esc
5. .space
6. .up
7. .down
8. .left
9. right
10. 可以通過Vue中全域性 Vue.config.keyCodes 物件自定義鍵盤修飾符別名
    Vue.config.keyCodes.113 = f2

鉤子函式

1. bind
   只調用一次，指令第一次繫結到元素時呼叫，用這個鉤子函式可以定義一個在繫結時執行一次的初始化動作
2. inserted
   被繫結元素插入到父節點時呼叫(父節點存在即可呼叫，不必存在於document中)
3. update
   所在元件的VNode更新時呼叫，可能會觸發多次。 但是可能發生在其孩子的VNode更新之前。指令的值可能發生了改變也可能沒有，但是你可以通過比較更新前後的值來忽略不必要的模板更新
4. componentUpdated
   所在元件的VNode及其孩子的VNode全部更新時呼叫
5. unbind
   只調用一次，指令與元素解綁時呼叫

鉤子函式引數

1. el：指令所繫結的元素，是原生的DOM物件，可以用來直接操作DOM
2. binding：一個物件，包含以下屬性
   1. name：指令名，不包括v-字首
   2. value：指令的繫結值，例如：v-my-directive=’ 1+1 ’ 值為2，
   3. oldValue：指令繫結的前一個值，僅在update和componentUpdated鉤子中可用
   4. expression：繫結值的字串形式。例如：v-my-directive=’ 1+1 ’ 值為’1+1’
   5. arg：傳給指令的引數
   6. modifiers：一個包含修飾符的物件
3. vnode：Vue編譯生成的虛擬節點，查閱VNode API瞭解更多詳情
4. oldVnode：上一個虛擬節點，僅在update和componentUpdated鉤子中可用

自定義全域性vue指令

// 自定義指令
    // 引數1：指令名稱 定義時不需要加 v-字首，而使用時需要加v-字首
    // 引數2：是一個物件，這個物件上，有一些指令相關的鉤子函式，這些函式可以在特定的階段執行相關的操作
    Vue.directive('focus', {
        // 鉤子函式，注意在每個函式中，第一個引數，永遠是el，表示被繫結指令的那個元素
        bind: function (el) { // 只調用一次，指令第一次繫結到元素時呼叫
        // 用這個鉤子函式可以定義一個在繫結時執行一次的初始化動作
            // el.focus();
            //在元素剛繫結指令的時候，還沒有插入到dom中去，這時候呼叫focus方法沒有作用
            // bind函式是在記憶體中就執行的，而inserted函式是要在頁面中執行的
        },
        inserted: function (el) { // 當繫結的元素渲染到DOM中後執行該函式【觸發一次】
            el.focus(); // 不能放在bind中，因為一個元素只有插入DOM中後，才能夠獲取焦點
            // 如果是js行為，比如獲取焦點，必須在元素插入DOM中後，才能執行 
        }
    });

Vue.directive('color', {
        bind: function (el, binding) {
            // console.log(binding.name) 
            console.log(binding.value) // 引數
            el.style.color = binding.value
            // 樣式：只要通過指令繫結給了元素，不管這個元素有沒有被插入到頁面中去這個元素肯定有了一個內聯的樣式,將來元素肯定會顯示到頁面中去，這時候，瀏覽器的渲染引擎必然會解析樣式 ，應用給該元素
        },
        inserted: function (el) {
        }
    })

自定義私有vue指令

  directives: {
     'fontweight': {
      	bind: function (el, binding) {
        el.style.fontWeight = binding.value;
        }
      }
  }

簡寫函式

大多數情況下，我們可能想在bind 和 update 鉤子上做重複動作，並且不像關心其它的鉤子函式，可以簡寫為

Vue.directive("color-swatch",function(el,binding){
	el.style.backgroundColor = binding.value;
})

Vue例項的生命週期

1. 什麼是生命週期
   從vue例項建立、執行、到銷燬期間，總是伴隨著各種各樣的事件，這些事件統稱為生命週期
2. 生命週期鉤子
   也就是生命週期事件的別名
3. 主要的生命週期函式分類
   1. 建立期間的生命週期函式
      1. beforeCreate：例項剛在記憶體中被創建出來，此時，還沒有初始化好data和methods等屬性
      2. created：例項已經在記憶體中建立好，此時data和methods已經初始化好，但是還沒有開始編譯模板。執行完畢後，開始編譯模板，把Vue程式碼中的那些指令執行，然後在記憶體中生存一個編譯好的最終模板字串，渲染為記憶體中的DOM，此時，只是在記憶體中渲染好了模板，並沒有把模板掛載到頁面中。
      3. beforeMount：表示模板已經編譯完成了。但是並沒有把模板渲染到頁面中。
      4. mounted：將已經編譯好的模板，掛載到了頁面指定的容器中顯示。
   2. 執行期間的生命週期函式
      1. beforeUpdate：狀態更新之前執行此函式，此時data中的狀態值是最新的，但是介面上顯示的資料還是舊的，因為 此時還沒有開始重新渲染DOM節點
      2. updated：例項更新完畢之後呼叫此函式，此時data中的狀態值和介面中的資料都已經完成了更新，介面已經重新渲染好了
   3. 銷燬期間的生命週期函式
      1. beforeDestroy：例項銷燬之前呼叫，在這一步，例項仍然完全可用
      2. destroyed：Vue例項銷燬後呼叫，呼叫後，Vue例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬

JSONP原理

1. 由於瀏覽器的安全性限制，不允許ajax訪問協議不同，域名不同，埠號不同的資料介面，瀏覽器認為這種訪問不安全；但是可以通過動態建立script標籤的形式，把script標籤的src屬性，指向資料介面的地址，因為script標籤不存在跨域限制，這種資料獲取方式，稱為JSONP（注意： 根據JSONP的實現原理，知曉，JSONP只支援get請求）
2. 具體實現過程
   1. 先在客戶端定義一個回撥方法，預定義對資料的操作；
   2. 再把這個回撥方法的名稱，通過url傳參的形式，提交到伺服器的資料介面
   3. 伺服器資料介面組織好要傳送給客戶端的資料，再拿著客戶端傳遞過來的回撥方法名稱，拼接出一個呼叫這個方法的字串，傳送給客戶端去解析執行，
   4. 客戶端拿到伺服器返回的字串之後，當作script指令碼解析執行。這樣就能拿到jsonp的資料了