// 錯(cuò)誤
  <custom-component v-show="condition"></custom-component>
  <p v-else>這可能也是一個(gè)組件</p>
     // 正確做法
  <custom-component v-show="condition"></custom-component>
  <p v-show="!condition">這可能也是一個(gè)組件</p>

  eg:
    // <div> 不會(huì)顯示，直到編譯結(jié)束。
    [v-cloak]{
      display:none;
        }
    <div v-cloak>
       {{ message }}
    </div>

eg:
  <span v-text="message"></span>
  <!-- same as -->
  <span>{{message}}</span>

// progress-bar.vue
<template>
 <transition name="fade">
  <div class="progress-bar" v-if="isShow">
  </div>
 </transition>
</template>
<script type="text/babel">
 export default {
  data() {
   return {
    isShow: true, // 是否顯示進(jìn)度條
    val: 0, // 進(jìn)度
   }
  },
  props: {
   /**
    * 每10毫秒自增幅度
    */
   step: {
    type: Number,
    default: 5,
   },
   /**
    * 初始值
    */
   initVal: {
    type: Number,
    default: 0,
   },
   /**
    * 到一定進(jìn)度停止
    */
   stopVal: {
    type: Number,
    default: 80,
   },
   /**
    * 進(jìn)度條繼續(xù)到成功
    */
   isOk: {
    type: Boolean,
    default: false,
   },
  },
  mounted() {
   // 初始化后加載進(jìn)度，加載到百分之多少由stopVal決定
   this.val = this.initVal
   let step = this.step
   let timer = setInterval(() => {
    this.val = this.val + step
    this.$el.style.width = this.val + '%'
    // 父組件數(shù)據(jù)加載完前進(jìn)度條最多到stopVal的這個(gè)百分值
    if (this.val >= this.stopVal) {
     clearInterval(timer)
     return
    }
   }, 10)
  },
  watch: {
   /**
    * 監(jiān)聽組件props變化決定是否繼續(xù)加載，一般在父組件數(shù)據(jù)加載完后改變此標(biāo)志位
    */
   isOk() {
    let val = this.val
    let step = this.step
    let timer = setInterval(() => {
     val = val + step
     this.$el.style.width = val + '%'
     // 加載到百分百完成
     if (val >= 100) {
      // 關(guān)閉定時(shí)器
      clearInterval(timer)
      // 加載完成關(guān)閉進(jìn)度條
      this.isShow = false
      // 加載完成的回調(diào)
      this.$emit('callback', 'load success')
      return
     }
    }, 10)
   },
  },
 }
</script>
<style lang="stylus" rel="stylesheet/stylus">
 .progress-bar {
  position fixed
  top 0
  height 6px
  width 0
  background-color #999
 }
 .fade {
  &-enter-active, &-leave-active {
   transition: all .3s
  }
  &-enter, &-leave-active {
   opacity: 0
  }
 }
</style>