https://github.com/unix/v-decorators
decorators for vue
https://github.com/unix/v-decorators
Last synced: 3 months ago
JSON representation
decorators for vue
- Host: GitHub
- URL: https://github.com/unix/v-decorators
- Owner: unix
- License: mit
- Created: 2018-12-20T08:47:03.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-07-03T02:01:10.000Z (almost 6 years ago)
- Last Synced: 2025-03-19T22:46:48.923Z (3 months ago)
- Language: JavaScript
- Homepage: https://pages.now.sh/wittbulter/v-decorators
- Size: 394 KB
- Stars: 30
- Watchers: 2
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[中文文档](README_CN.md)
### Getting Started
#### step.A: make sure you can use decorators.
1. append transform-decorators-legacy to your `.babelrc` file: `"plugins": ["transform-decorators-legacy" ...`
2. `npm i babel-plugin-transform-decorators-legacy -D`
#### step.B: install and import.
1. install lib to your project, `npm i v-decorators`.
2. import in your component, `import { Decorators } from 'v-decorators'`.
### Documentation
- @Decorators.AutoCatch(catchMode?: string)
**params:**
- None, default. same as 'log'.
- 'error': print error with console.error.
- 'log': print error with console.log.
- 'slient': no error message will be displayed.
- `${functon_name}`: specify a function to handle errors.
**desc:**
help you automatically catch possible errors in async function, no `try ... catch` is required to use the function at any time.
before use:
```
methods: {
async request() { try { await http(...) } catch(e) { ... } },
clickHandle() { request().catch(...) }
}
```
after use:
```
methods: {
@Decorators.AutoCatch()
async request() { await http(...) },
clickHandle() { request() }
}
```
- @Decorators.Debounce(time?: number)
**params:**
- time: denounce time.
**desc:**
functions are triggered at most once in a specified time.
- @Decorators.Throttle(wait: number = 300)
**params:**
- wait: the number of milliseconds to throttle invocations to.
**desc:**
creates a throttled function that only invokes func at most once per every wait milliseconds.
- @Decorators.Delay(time?: number)
**params:**
- time: delay time.
**desc:**
delayed execution when a function is called. decorator will automatically clean the timer.
- @Decorators.Time()
**params:**
- None.
**desc:**
statistics and displays the execution time of the current function, just like `console.time` and `console.timeEnd`.
- @Decorators.Shortcuts(obj: object)
**params:**
- obj: key-value pairs that need to bind scopes.
**desc:**
bind data to vue instance, **but it's not responsive**. it can reduce the volume of your data function, usually used to bind static data used in vue templates.
reduce response data can effectively improve perf.
e.g.:
```
const MAX = '100', datePipe = (date) => { ... }
// ...
// in your component
{{ max }} {{datePipe('2018/12/01')}}
@Decorators.Shortcuts({
max: MAX, datePipe: datePipe,
})
data: () => ({
your responsive datas...
})
```
- @Decorators.Deprecated(message?: string)
**params:**
- message: logs.
**desc:**
show a deprecation message when function called.
- @Decorators.NextTick()
**params:** None.
**desc:**
run function in Vue.nextTick. more information: [Vue.nextTick](https://cn.vuejs.org/v2/api/#Vue-nextTick)
### Examples
see [examples project](https://github.com/unix/v-decorators/tree/master/test)
### LICENSE
[**MIT**](LICENSE)