Skip to content

usystems/vuejs-typescript-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Decorators to transform a TypeScript class to a Vue component

// load the decorators
/// <reference path="src/vue-component.ts" />
// destruct the decorators from the VueComponent
const {createComponent, prop, lifecycleHook, eventHook} = VueComponent;

// transform the class Demo to a vue component called demo
@createComponent('demo')
// the VueComponent.Base provides all the declarations, Vue provieds to the component, the makes sure
// TypeScript support type checking and autocomplete
class Demo extends VueComponent.Base {

	// transforms to option.template 
	static template:string = '#demo-template';

	// transforms to option.replace
	static replace:boolean = true;

	// the @props decorator transforms a property to an attribute
	// for the supported options see http://vuejs.org/api/options.html#props
	@prop({
		type: Boolean,
		required: true
	})
	option:boolean;

	// normal properties, pass through the data options are declared as normal properties
	property:string = 'foo';

	// the @lifecycleHook decorator supports the following hooks:
	// created, beforeCompile, compiled, ready, attached, detached, beforeDestroy, destroyed
	@lifecycleHook('compiled')
	compiled():void {
		// ...
	}
	
	// the @eventHook decorator registers the decorated method as event listener 
	@eventHook('listen.to.event')
	eventListenToEvent():boolean {
		// ...
	}

	// normal methods are declared as class members
	method(arg:string):void {
		// ...
	}

	// computed properties are defined as getter and setter
	get computed():number {
		// ...
	}
	set computed(arg:number) {
		// ...
	}
}

About

TypeScript decorator to build a vuejs component

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy