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 }