es6 class繼承 範例

es6已經可以使用class語法直接來寫class
以下範例包含 相關的繼承與instance 與static
method prop 使用

範例

let staticSchema_1 = null
class ChildClass extends ParentClass{
  constructor(){
    super() #繼承並改寫建構子
    ....
    this.myprop1 = xxx #instance prop宣告
    ..
  }
  myMethod(){ # instance method
    super.myMethod() ＃繼承並改寫method
    .....
  }

  static myClassMethod(){ #宣告static method

  }
  static get Schema(){ #宣告static prop
    return staticSchema_1
  }
  static set Schema(_val){ #宣告static prop
    staticSchema_1 = _val
  }
}

UglifyJS-plugin Unexpected token: punc (()錯誤 目前解法

webpack 建立bundle檔案時,UgilyfyJs Plugin可以把檔案縮到很小
是相當重要的功能,但在使用es6時 很可能會發生
Unexpected token: punc (() 的錯誤
目前尚無解法
不過可以先自行使用其他模組替代
1.packages.json安裝

"uglify-js": "git://github.com/mishoo/UglifyJS2#harmony-v2.8.22",
"uglifyjs-webpack-plugin": "0.4.3",

2.webpack.config.js

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
原本加入的plugin
new webpack.optimize.UglifyJsPlugin()
改用 取代
new UglifyJSPlugin(),

參考連結

Vue v-model bind 物件或array 範例

v-model可以綁定整個結構的物件變數
並可watch到物件下任何property的異動
樣板

<tr v-for="(val,key) in tableMap">
  <td>{{key}}</td>
  <td><input type="text" :value="val" v-model="tableMap[key]" /></td>
</tr>

js

watch:{
  tableMap:{
    deep:true,
    handler:function(val,oldVal){
      console.log(this.tableMap)
      Tool.setLocal('tableMap',this.tableMap)
    }
  }
}

Vue 多層次變數監聽範例

情境
1.資料的來源為tableStr(輸入字串)
2.由tableStr,計算產生tables(桌次array)
3.由tables 計算產生tableMap(桌次對照表)

1.data 內只建立需要用的變數,不設定預設起始值

data{
  tableStr:"", //桌號字串 
  tableMap:{}, //桌次對照表
}

2.在mounted後才給預設值,才會讓相關的變數都被計算

mounted(){
  this.tableStr = "1-5" 
}

3.tables是計算產生的,在tableStr有值 就會被產生

computed{
  tables:function(){
    let tables = this.tableStr.split(",")
    return tables
  }
}

4.watch是需要有異動才會被觸發的

//所以在mounted內去設定tablStr值,造成異動,才會造成tables被重新計算
//這個watch才會被觸發,才會在這裡去改變要產生的tableMap值
watch:{
  tables:function(val){
    tableMap = {}
    for(let i=0;i<this.tables.length;i++){
      tableMap[`table_${this.tables[i]}`] = i+1
    }
    this.tableMap = tableMap
  }
}

測試結果
computed的值是可以被watch的,但watch一定要是有異動才會被觸發
所以要設定初始值,並要讓連動的相關變數都被計算
初始值要放在mounted內去設定,不要在data內去直接指定