- Notifications
You must be signed in to change notification settings - Fork0
undercloud/paysage
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Paysage is a helper for quickly and easily creating web components based on Vuejs.
npm install paysage
importPaysagefrom'./paysage'classHelloWorldextendsPaysage.Component{staticprops=['to'];draw(){return(`<div>Hello {{ to }}</div>`);}}Paysage.register(HelloWorld,'HelloWorld');Paysage.mount('#app','<HelloWorld to="World" />');
For creating HTML markup you must implementdraw method:
classSomeComponentextendsPaysage.Component{draw(){return(`<div> Hello World </div>`);}}
Or define static template:
classSomeComponentextendsPaysage.Component{staticdraw='<div>Hello World</div>';}
Also you can build HTML withcreateElement function:
classSomeComponentextendsPaysage.Component{draw(createElement){returncreateElement('div','Hello World');}}
More about render function athttps://vuejs.org/v2/guide/render-function.html
JSX also support withhttps://github.com/vuejs/babel-plugin-transform-vue-jsx plugin
classSomeComponentextendsPaysage.Component{// h must be in scopedraw(h){return(<div>Hello World</div>);}
You should not use the following names as properties or class methods,because they have special meanings in Vue:template,render,renderError,props,propsData,computed,watch,name,delimiters,functional,model,mixins,components,directives,filter,inheritAttrs
But if you define them, then they will work according to the built-in Vue logic.
Properties can be defined by two way:
classSomeComponentextendsPaysage.Component{/* define static property, common for all instances */staticprops=['foo'];constructor(){super();/* define property on fly, each instance has own variable copy */this.bar='Bar';}draw(){return(/* {{ foo }} and {{ bar }} available here, and in any method defined in this class */);}}
More about properties athttps://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
All getters and setters will be processed as computed properties:
classSomeComponentextendsPaysage.Component{getfullName(){returnthis.firstName+' '+this.lastName;}setfullName(newValue){varnames=newValue.split(' ');this.firstName=names[0];this.lastName=names[names.length-1];}}
More about computed properties athttps://vuejs.org/v2/guide/computed.html
Next events you can use as Vue's lifecycle hooks
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
- errorCaptured
classSomeComponentextendsPaysage.Component{created(){ ...}mounted(){ ...}updated(){ ...}}
More about hooks athttps://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
You must register component before use:
/*component - component instancename - component name, default equal instance name*/Paysage.register(component,name)
Mount component to DOM:
/*selector - string or HTMLElement instancecomponent - HTML markup or component instanceoptions - additional Vue options*/Paysage.mount(selector[,component[,options]])
If you wanna use it without transpilling, usecreateClass helper:
varHelloWorld=Paysage.createClass({constructor:function(){this.to='World';},draw:function(){return('<div>Hello {{ to }}</div>')}})Paysage.register(HelloWorld,'HelloWorld');