MIT License
npm i -S vue-corator<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>`;
}
}//if you use Vue CLI3.0
//vue.config.js
module.exports ={
runtimeCompiler:true
}or
//webpack
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}See also: Runtime + Compiler vs. Runtime only.
<template>
<div>
<styleTagName1>
.title { background:red }
</styleTagName1>
<styleTagName2>
@import "./assets/test.css"
</styleTagName2>
</div>
</template>or
<template>
<div>
<styleTagName1>
</styleTagName1>
<styleTagName2>
</styleTagName2>
</div>
</template>import {Style} from 'vue-corator'
@Component
export default class YourComponent extends Vue {
@Style()
private styleTagName1() {
return `
.title { background:pink }
`;
}
@Style()
private styleTagName2() {
return '@import "./assets/test.css"';
}
}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();
})
}
}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'
@ScopedId('customName') scopedId!: string
}returns component Id like 'data-v-xxxxx'
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent