ECMAScript / TypeScript decorator for class-style Vue components.
Required: Babel with stage 1 transforms, or TypeScript 1.5+ (for decorators).
Note:
-
methodscan be declared directly as class member methods. -
Computed properties can be declared as class property accessors.
-
data,eland all Vue lifecycle hooks can be directly declared as class member methods as well, but you cannot invoke them on the instance itself. When declaring custom methods, you should avoid these reserved names. -
For all other options, pass them to the decorator function.
import Component from 'vue-class-component'
@Component({
props: {
propMessage: String
},
template: `
<div>
<input v-model="msg">
<p>prop: {{propMessage}}</p>
<p>msg: {{msg}}</p>
<p>computed msg: {{computedMsg}}</p>
<button @click="greet">Greet</button>
</div>
`
})
class App {
// return initial data
data () {
return {
msg: 123
}
}
// lifecycle hook
ready () {
this.greet()
}
// computed
get computedMsg () {
return 'computed ' + this.msg
}
// method
greet () {
alert('greeting: ' + this.msg)
}
}$ npm install && npm run build
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent