十二.過濾器(filter)

示例代碼:

<template>
  <div id="app">
    {{ msg | capitalize }}
  </div>
</template>

<script>
export default {
  name: ‘app‘,
  data () {
    return {
      msg: ‘edited‘
    }
  },
  filters: {
    capitalize (value) {
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}
</script>

ps:
a.多個過濾器 {{ msg | filterA | filterB }}
b.傳參 {{ msg | filterA(‘val1‘, ‘val2‘) }}

十三.異步更新隊列

Vue 異步執行 DOM 更新。只要觀察到數據變化，Vue 將開啟一個隊列，並緩沖在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發，只會一次推入到隊列中。如果同一個 watcher 被多次觸發，只會一次推入到隊列中。這種在緩沖時去除重復數據對於避免不必要的計算和 DOM 操作上非常重要。然後，在下一個的事件循環“tick”中，Vue 刷新隊列並執行實際 (已去重的) 工作。Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和 MutationObserver，如果執行環境不支持，會采用 setTimeout(fn, 0) 代替。
例如，當你設置 vm.someData = ‘new value‘ ，該組件不會立即重新渲染。當刷新隊列時，組件會在事件循環隊列清空時的下一個“tick”更新。多數情況我們不需要關心這個過程，但是如果你想在 DOM 狀態更新後做點什麽，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員沿著“數據驅動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這麽做。為了在數據變化之後等待 Vue 完成更新 DOM ，可以在數據變化之後立即使用 Vue.nextTick(callback) 。這樣回調函數在 DOM 更新完成後就會調用.

如果你需要在數據更新後,獲取更新後的DOM,就用nextTick,放在nextTick()回調函數中的執行的應該是會對DOM進行操作的 js代碼

示例:

<template>
  <div id="app">
    <span ref="tip">{{ msg }}</span>
    <button @click="update">異步更新</button>
  </div>
</template>

<script>
export default {
  name: ‘app‘,
  data () {
    return {
      msg: ‘沒有更新‘
    }
  },
  methods: {
    update () {
      this.msg = ‘更新完成‘
      this.$nextTick(function () {
        alert(this.$refs.tip.textContent)
      })
    }
  }
}
</script>

ps:什麽時候需要用的Vue.nextTick()
你在Vue生命周期的created()鉤子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中。原因是什麽呢，原因是在created()鉤子函數執行的時候DOM 其實並未進行任何渲染，而此時進行DOM操作無異於徒勞，所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted鉤子函數，因為該鉤子函數執行時所有的DOM掛載已完成。使用時機：el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子函數，此時頁面並未全部渲染。

在某個動作有可能改變DOM元素結構的時候，對DOM一系列的js操作都要放進Vue.nextTick()的回調函數中

參考:
http://blog.csdn.net/shuidinaozhongyan/article/details/72630573

Vue筆記五