https://github.com/joon610/vue-corator
this is vue decorator utils
https://github.com/joon610/vue-corator
component decorator decorators function-component javascript style typescript vue vue-corator
Last synced: 3 months ago
JSON representation
this is vue decorator utils
- Host: GitHub
- URL: https://github.com/joon610/vue-corator
- Owner: joon610
- License: mit
- Created: 2019-06-28T11:57:29.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-11-15T06:17:16.000Z (about 6 years ago)
- Last Synced: 2025-08-30T11:33:15.725Z (3 months ago)
- Topics: component, decorator, decorators, function-component, javascript, style, typescript, vue, vue-corator
- Language: TypeScript
- Homepage:
- Size: 251 KB
- Stars: 32
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-corator - this is vue decorator utils ` 📝 2 years ago` (Utilities [🔝](#readme))
- awesome-vue - vue-corator - Vue typescript decorator utils (Components & Libraries / Utilities)
README
# Vue Corator
## Update
- [x] @Render: add functional atturibute in component 2019/08/23
- [x] @Style: Style tag changed global to scoped 2019/08/22
- [ ] @Hoc : high order component
- [ ] @DeepCopy : DeepCopy decorator
## License
MIT License
## Install
```bash
npm i -S vue-corator
```
Vue.config.js
```js
//if you use Vue CLI3.0
//vue.config.js
module.exports ={
runtimeCompiler:true
}
```
or
webpack.config.js
``` js
//webpack
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}
```
## Usage
- [`@Render`](#Render)
- [`@Style`](#Style)
- [`@NextTick`](#NextTick)
- [`@ScopedId`](#ScopedId)
- [`@Super`](#Super)
## See also
### `@Render(componentName?:string)` decorator
```html
```
```ts
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 `
{{ title }}
-
{{ item }}
`;
}
}
```
See also: [Runtime + Compiler vs. Runtime only.](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only)
```html
.title { background:red } // .title [data-v-] {background:red}
```
```ts
import {Style} from 'vue-corator'
@Component
export default class YourComponent extends Vue {
@Style()
private styleTagName1() {
return `
.title { background:pink }
`;
}
}
```
```ts
import { NextTick } from 'vue-corator'
@Component
export default class YourComponent extends Vue {
@NextTick()
private methodName(){
this.method1();
}
}
```
Is equivalent
```ts
@Component
export default class YourComponent extends Vue {
private mounted() {
this.$nexttick(()=>{
this.method1();
})
}
}
```
### `@ScopedId(Key?: string)` decorator
```ts
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
```ts
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class Parent extends Vue {
private father(){
console.log('father')
}
}
```
```ts
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());
}
}
```
```log
$ childs father
$ father
```