iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 17
2
Modern Web

用範例理解 Vue.js系列 第 17

用範例理解 Vue.js #17:Global API(extend, nextTick, directive)

  • 分享至 

  • xImage
  •  

Imgur

Vue.extend(options)

使用 Vue 的建構子,創建一個子類別,參數是一個包含 Component 選項的物件。

其中選項 dataVue.extend() 中必須是函數。

<div id="mount-point"></div>
// create constructor
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// create an instance of Profile and mount it on an element
new Profile().$mount('#mount-point')

附上 fiddle https://jsfiddle.net/hunterliu/zgLu51y9/

疑惑:

  • 如果我需要一個 Vue Instance 我會用 new Vue({})
  • 如果我需要一個 Vue Component 我會用 Vue.component({})

Vue.extend({}) 到底是可以用在哪?

我個人的經驗和理解是:

  • 我沒實際用過,不知道何種情況用的到,歡迎各位大神留言告訴我。
  • 個人理解是:Vue.extend({})Vue.component({})的核心,換句話說:
    • 在實體化 Component 時會用到 Extend。
    • Vue.component 是一個語法糖,使我們不需透過 Extend 和其他程序來實體化 Vue Instance 的子類別。

Vue.nextTick

在下次 DOM 更新循環結束之後執行延遲回調。在修改數據之後立即使用這個方法,獲取更新後的 DOM。

以下範例表達的是:分別在 DOM 的更新循環前後,使用vm.$el.textContent獲取 DOM。

<div id="example">{{ message }}</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // change data
console.log(vm.$el.textContent); // false

Vue.nextTick(function () {
  console.log(vm.$el.textContent); // true
})

請按 F12 打開 console。

附上 fiddle https://jsfiddle.net/hunterliu/t1aazxzv/

解釋:當vm.message被修改為new message時,DOM 並沒有立刻重新渲染,而是在事件循環隊列清空時的下一個循環(tick)中更新。

個人理解:可以使用Vue.nextTick取得更新後的 DOM。
雖然 Vue.js 通常是鼓勵開發者以「數據驅動」的方式思考,避免直接操作DOM,但是仍然有需要操作 DOM 的時候。

補充:當我們將一個物件傳給 Vue instance 的 data,會 map 此物件所有的屬性,使用 Object.defineProperty 轉換成 getter/setter。
然而 Object.defineProperty 在 IE8 和其以下版本不支援,也就是 Vue 只能支援到 IE9 的原因。

官方文件延伸閱讀: Async Update Queue

Vue.directive

最簡易的範例 v-focus:

<input v-focus>
Vue.directive('focus', {
  inserted (el) {
    el.focus()
  }
})

附上 fiddle https://jsfiddle.net/hunterliu/4gx1tvct/

官方文件延伸閱讀: Custom-directive


上一篇
用範例理解 Vue.js #16:實例 Vue Instance (deep copy) lodash.js 效能比較
下一篇
用範例理解 Vue.js #18:Slot
系列文
用範例理解 Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言