Vue Corator
Update
- @Render: add functional atturibute in component 2019/08/23
- @Style: Style tag changed global to scoped 2019/08/22
- @Hoc : high order component
- @DeepCopy : DeepCopy decorator
License
MIT License
Install
npm i -S vue-coratorVue.config.js
//if you use Vue CLI3.0
//vue.config.js
module.exports ={
runtimeCompiler:true
}or
webpack.config.js
//webpack
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}Usage
See also
@Render(componentName?:string) decorator
<template>
<good :items="data" title="Vue corator"></good>
</template>import {Render} from 'vue-corator'
@Component
export default class YourComponent extends Vue {
private data = ['hello', 'Functional Component'];
@Render()
private good(items: any, title: any) {
return `
<div>
<b> {{ title }} </b>
<ul>
<li v-for="(item,index) in items" :key="index">
{{ item }}
</li>
</ul>
</div>`;
}
}See also: Runtime + Compiler vs. Runtime only.
@Style() decorator
<template>
<div>
<styleTagName1>
.title { background:red } // .title [data-v-<hash>] {background:red}
</styleTagName1>
</div>
</template>import {Style} from 'vue-corator'
@Component
export default class YourComponent extends Vue {
@Style()
private styleTagName1() {
return `
.title { background:pink }
`;
}
} @NextTick() decorator
import { NextTick } from 'vue-corator'
@Component
export default class YourComponent extends Vue {
@NextTick()
private methodName(){
this.method1();
}
}Is equivalent
@Component
export default class YourComponent extends Vue {
private mounted() {
this.$nexttick(()=>{
this.method1();
})
}
} @ScopedId(Key?: string) decorator
import { Component, Prop, Vue } from 'vue-property-decorator';
import { ScopedId } from 'vue-corator';
@Component
export default class YourComponent extends Vue {
@ScopedId() scopedId!: string //returns component Id like 'data-v-xxxxx'
}returns component Id like 'data-v-xxxxx'
@Super(component: any) decorator
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class Parent extends Vue {
private father(){
console.log('father')
}
}import { Component, Prop, Vue } from 'vue-property-decorator';
import { Super } from 'vue-corator';
import Parent from './parent.vue'
@Component
export default class Child extends Parent {
@Super(Parent) super!: any
private father(){
console.log('childs father')
}
private mounted(){
console.log(this.father());
console.log(this.super.father());
}
} $ childs father
$ father