1

2

3

4

5

6

// 錯誤

 <custom-component v-show="condition"></custom-component>

 <p v-else>這可能也是一個元件</p>

    // 正確做法

 <custom-component v-show="condition"></custom-component>

 <p v-show="!condition">這可能也是一個元件</p>

1

2

3

4

5

6

7

8

eg:

  // <div> 不會顯示，直到編譯結束。

  [v-cloak]{

    display:none;

      }

  <div v-cloak>

     {{ message }}

  </div>

1

2

3

4

eg:

  <span v-text="message"></span>

  <!-- same as -->

  <span>{{message}}</span>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

// 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, // 是否顯示進度條

    val: 0, // 進度

   }

  },

  props: {

   /**

    * 每10毫秒自增幅度

    */

   step: {

    type: Number,

    default: 5,

   },

   /**

    * 初始值

    */

   initVal: {

    type: Number,

    default: 0,

   },

   /**

    * 到一定進度停止

    */

   stopVal: {

    type: Number,

    default: 80,

   },

   /**

    * 進度條繼續到成功

    */

   isOk: {

    type: Boolean,

    default: false,

   },

  },

  mounted() {

   // 初始化後加載進度，載入到百分之多少由stopVal決定

   this.val = this.initVal

   let step = this.step

   let timer = setInterval(() => {

    this.val = this.val + step

    this.$el.style.width = this.val + '%'

    // 父元件資料載入完前進度條最多到stopVal的這個百分值

    if (this.val >= this.stopVal) {

     clearInterval(timer)

     return

    }

   }, 10)

  },

  watch: {

   /**

    * 監聽元件props變化決定是否繼續載入，一般在父元件資料載入完後改變此標誌位

    */

   isOk() {

    let val = this.val

    let step = this.step

    let timer = setInterval(() => {

     val = val + step

     this.$el.style.width = val + '%'

     // 載入到百分百完成

     if (val >= 100) {

      // 關閉定時器

      clearInterval(timer)

      // 載入完成關閉進度條

      this.isShow = false

      // 載入完成的回撥

      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>