vue全域性方法

VUE的全域性方法是大家最常見的,但是卻又都不太瞭解具體意思的部分,很多小白同學都直接就忽略了這一部分。讀懂這些方法,會讓你的開發輕鬆十倍。

Vue.extend( options )使用基礎 Vue 構造器,建立一個“子類”。引數是一個包含元件選項的物件。

data 選項是特例,需要注意 - 在 Vue.extend() 中它必須是函式。引數:{Object} options

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

結果如下:

Walter White aka Heisenberg    

Vue.nextTick( [callback, context] )在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法,獲取更新後的 DOM。引數:{Function} [callback];{Object} [context]

2.1.0 起新增:如果沒有提供回撥且在支援 Promise 的環境中,則返回一個 Promise。請注意 Vue 不自帶 Promise 的 polyfill,所以如果你的目標瀏覽器不原生支援 Promise (IE:你們都看我幹嘛),你得自己提供 polyfill。

// 修改資料 vm.msg = 'Hello' // DOM 還沒有更新 Vue.nextTick(function () {  // DOM 更新了 }) // 作為一個 Promise 使用 (2.1.0 起新增,詳見接下來的提示) Vue.nextTick()  .then(function () {  // DOM 更新了  })    

Vue.set( target, key, value ) 向響應式物件中新增一個屬性,並確保這個新屬性同樣是響應式的,且觸發檢視更新。它必須用於向響應式物件上新增新屬性,因為 Vue 無法探測普通的新增屬性 (比如 this.myObject.newProperty = 'hi')注意物件不能是 Vue 例項,或者 Vue 例項的根資料物件。

  • 引數:{Object | Array} target
  • {string | number} key
  • {any} value
  • 返回值:設定的值。

Vue.delete( target, key )刪除物件的屬性。如果物件是響應式的,確保刪除能觸發更新檢視。這個方法主要用於避開 Vue 不能檢測到屬性被刪除的限制,但是你應該很少會使用它。目標物件不能是一個 Vue 例項或 Vue 例項的根資料物件。

  • 引數:
  • {Object | Array} target
  • {string | number} key/index

Vue.directive( id, [definition] )註冊或獲取全域性指令。

  • 引數:
  • {string} id
  • {Function | Object} [definition]

// 註冊 Vue.directive('my-directive', {  bind: function () {},  inserted: function () {},  update: function () {},  componentUpdated: function () {},  unbind: function () {} }) // 註冊 (指令函式) Vue.directive('my-directive', function () {  // 這裡將會被 `bind` 和 `update` 呼叫 }) // getter,返回已註冊的指令 var myDirective = Vue.directive('my-directive')    

Vue.filter( id, [definition] ) 註冊或獲取全域性過濾器。

  • 引數:
  • {string} id
  • {Function} [definition]

// 註冊 Vue.filter('my-filter', function (value) {  // 返回處理後的值 }) // getter,返回已註冊的過濾器 var myFilter = Vue.filter('my-filter')    

Vue.component( id, [definition] ) 註冊或獲取全域性元件。註冊還會自動使用給定的id設定元件的名稱

  • 引數:
  • {string} id
  • {Function | Object} [definition]

// 註冊元件,傳入一個擴充套件過的構造器 Vue.component('my-component', Vue.extend({ /* ... */ })) // 註冊元件,傳入一個選項物件 (自動呼叫 Vue.extend) Vue.component('my-component', { /* ... */ }) // 獲取註冊的元件 (始終返回構造器) var MyComponent = Vue.component('my-component')    

Vue.use( plugin ) 安裝 Vue.js 外掛。如果外掛是一個物件,必須提供 install 方法。如果外掛是一個函式,它會被作為 install 方法。install 方法呼叫時,會將 Vue 作為引數傳入。該方法需要在呼叫 new Vue() 之前被呼叫。當 install 方法被同一個外掛多次呼叫,外掛將只會被安裝一次。

  • 引數:
  • {Object | Function} plugin

Vue.mixin( mixin )全域性註冊一個混入,影響註冊之後所有建立的每個 Vue 例項。外掛作者可以使用混入,向元件注入自定義的行為。不推薦在應用程式碼中使用。

  • 引數:
  • {Object} mixin

Vue.compile( template ) 在 render 函式中編譯模板字串。只在獨立構建時有效

  • 引數:
  • {string} template

var res = Vue.compile('{{ msg }}') new Vue({  data: {  msg: 'hello'  },  render: res.render,  staticRenderFns: res.staticRenderFns })    

Vue.version 提供字串形式的 Vue 安裝版本號。這對社羣的外掛和元件來說非常有用,你可以根據不同的版本號採取不同的策略。

var version = Number(Vue.version.split('.')[0]) if (version === 2) {  // Vue v2.x.x } else if (version === 1) {  // Vue v1.x.x } else {  // Unsupported versions of Vue }    

椰子分享:無論做什麼事,第一次緊張是正常的,但如果真的很想做這件事,或者必須做這件事,你就不能止步於緊張