記錄vue-property-decorator用法

背景

vue-property-decorator

介紹

本篇博客

記錄開發過程當中的基礎用法。

用法

引用組件

import { Vue, Component } from 'vue-property-decorator'
import HelloWorld from './HelloWorld.vue'

@Component({
  components: { HelloWorld }
})
export default class App extends Vue {

}

Props

import { Vue, Component, Prop } from 'vue-property-decorator'
import HelloWorld from './HelloWorld.vue'

@Component({
  components: { HelloWorld }
})
export default class App extends Vue {
  @Prop(String)
  name: string
  @Prop([Number, String])
  score: number | string
  @Prop({
    type: number,
    default: 18,
    required: true,
    validator: value => {
      return (value > 10 && value < 60)
    }
  })
  age: number
}

computed

import { Vue, Component } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  get calAge (newVal, oldVal) {
    return ((new Date()).getFullYear() - this.birthYear)
  }
}

watch

import { Vue, Component, Watch } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  @Watch('birthYear', { immediate: true, deep: true})
  onBirthYearChange (val: number, oldValue: number) {
    this.age = ( (new Date()).getFullYear() - val)
  }
}

原創說明

• 此篇文章記錄實際項目開發中遇到的問題。
• 參考自：
  《npm:vue-property-decorator》
  《Github:vue-property-decorator》
• 轉載請註明出處，謝謝。