vue學習筆記（二）

API

1.Vue.directive 自定義指令

Vue.directive 屬於全局 API，能夠用於自定義一些屬於本身的指令，好比定義一個 v-boblee 的指令，做用是讓文字變成紅色

Vue.directive('boblee',function(el,binding,vnode){
	//el:指令所綁定的元素，能夠用來直接操做 dom
	//binding:一個對象，包含指令的不少信息
	//vnode:Vue編譯生成的虛擬節點
	el.style = 'color:' + binding.value;
});

自定義指令的生命週期：

共五個，分別是 bind,inserted,update,componentUpdated,unbind

• bind 只調用一次，指令第一次綁定到元素時調用，能夠定義一個綁定時執行一次的初始化事件
• inserted 被綁定元素插入父節點時調用
• update 被綁定元素所在的模板更新時調用，經過比較更新先後的綁定值，能夠忽略沒必要要的模板更新
• componentUpdated 被綁定元素所在模板完成一次更新週期時調用
• unbind 只調用一次，指令與元素解綁時調用

2.Vue.extend 構造器

Vue.extend(options) 參數爲一個包含組件選項的對象，用於建立一個子類

// 建立構造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 建立 Profile 實例，並掛載到一個元素上。
new Profile().$mount('#mount-point')

3.Vue.set

Vue.set 的做用就是在構造器外部操做構造器內部的數據、屬性或者方法，外部數據的加入讓程序更加靈活，咱們能夠在外部獲取任何想要的數據形式，而後讓data引用。

爲何要使用 Vue.set?

因爲Javascript的限制，Vue不能自動檢測如下變更的數組:

• 當你利用索引直接設置一個項時，vue不會爲咱們自動更新
• 當你修改數組的長度時，vue不會爲咱們自動更新

咱們在外部更新內部data時，須要用 Vue.set 來進行設置