使用 Extend 避免重複造輪子

有兩個元件或數個元件，本身的差異非常小，就可以使用extend，可以繼承原本的功能，也能在新增功能上去

var newExtend = Vue.extend({ //宣告一個變數extend
	//將元件的內容全部貼入
})

並在原先元件的地方新增extends屬性，值為剛剛宣告的變數

var childOne = {
  props: ['item'],
  extends:newExtend
}

將變數新增到另一個元件中，只留下更動的部份，使用extend除了會執行原先的涵式外，還會再執行新增的涵式

var childTwo = {
	data:function(){
		return{
			extend2Data: '新的extend'
		}
	},
  props: ['item'],
  template: '#row-component-two',
  extends:newExtend,
  mounted:function(){
    console.log('child22'); //會跑兩次
  }
}

在原先元件中更新，相同名稱的屬性會被覆蓋，不同的話會原本元件，和extend中的都會被執行

Filter 自訂畫面資料呈現格式

filter可以多個加入

<td>{{ item.icash | currency |dollarSign }}</td> <!--使用方法為，在變數後方加入 |--> 

var child = {
  props: ['item'],
  template: '#row-component',
  data: function() {
    return {
      data: {}
    }
  },
  filters:{
		dollarSign:function(n){  //n的參數為 item.icash | currency 的值
      return`$${n}`  //用es6寫法加入$字號
    },
    currency:function(n){ //帶入參數為n
      return n.toFixed(2).replace(/./g, function(c, i, a) {
	    return i && c !== "." && ((a.length - i) % 3 === 0) ? ',' + c : c;//可上網搜尋
    }
  },
  mounted: function() {
    console.log('Component:', this)
  }
}

讓filter掛載到全域，每個{{ }}都能使用

Vue.filter('dollarSign', function (n) {
  return `$${n}`
});
Vue.filter('currency',function(n){
  return n.toFixed(2).replace(/./g, function (c, i, a) {
    return i && c !== "." && ((a.length - i) % 3 === 0) ? ',' + c : c;
  });
});

無法寫入(顯示)的資料，用 set

某些資料無法顯示，可能是沒有順利寫入，set為Vue原型裡的方法

<button @click="addData()">寫入資料</button>

this.$set(指定目標 , '寫入的地方'',{ 寫入的值 })

methods: {
  addData: function() {
      this.$set(this.data,'item',{ //
        name:this.item.name
      })
  }
},