11-vue_day04

day04內容

8. 計算屬性與監聽器

 1) 計算屬性
    一般指的是對data中的原有數據進行計算之後返回的結果，這個計算屬性可以當做屬性來使用。當原有數據發生改變的時候，計算屬性會立即執行重新計算。當原值不發生改變，當調用多次計算屬性，計算屬性函數只會執行一次。但是如果使用方法或者過濾器則不同。

    查詢到所有的文章，在顯示的時候將發佈時間（時間戳）格式化之後再輸出？
    new Vue({
      data:{
        message:'hello world'
      },
      computed:{
        reverseMessage:function(){
          return this.message.split('').reverse().join('');
        }
      }
    })

    {{reverseMessage}}
    {{reverseMessage}}
    {{reverseMessage}}
  2) 監聽器
    new Vue({
      watch:{
        message: function(now,old){
        },
        msg : {
          handler:function(now,old){},
          deep:true   // 一般情況下用於監聽引用數據類型中值的變化
        }
      }
    })

    注意：監聽屬性如果包含特殊字符，請使用引號引起來，比如，我們要監聽form中的username
    watch:{
      "form.username":function(){
      }
    }

9. 過濾器

  1) 局部定義 - 僅對於當前組件有效
  new Vue({
    filters:{
      dateFmt(val){
        // 對val處理之後進行返回
        return val;
      }
    }
  })
  2) 全局定義 - 針對於所有的組件都有效
  Vue.filter('dateFmt',function(val){
    // 對val處理之後進行返回
    return val;
  })

  引用
  {{ new Date().getTime() | dateFmt }}
  v-bind:time=" new Date().getTime() | dateFmt "

10.組件基礎

  類似於bootstrap，但是和bs完全不再一個級別，vue組件是封裝了js,html,css的獨立單元，我們可以使用虛擬標籤直接調用

  目前比較成熟的組件庫：
    pc:
      elementui   餓了麼
      antdesign   螞蟻金服
    phone(小程序):
      mintui
      vantui
      ....
  
  語法：
    1. 組件定義（比較麻煩-瞭解）
      一個組件就是一個vue的最小單元，v m vm
      1）全局註冊
        Vue.component('briup-alert',{
          與Vue構造函數參數類似
          template:`html`,
          data(){       // 保證每一個組件都有一份獨立的data
            return {

            }
          },
          props:['title']    // 期望從父組件中接收到的變量
        })
      2）局部註冊
    2. 組件調用（精通）
      <briup-alert title="one"></briup-alert>