作者:李旭光
引用请标明出处
前言
现代化的IDE已经把开发者变得越来越懒,但是我觉得这样挺好的,让工具完成手工反复重复的工作,提高工作效率的同时降低开发者的疲劳感,Vue VSCode Snippets就是这样一个VSC插件,它可以用简单的几个字母就敲出一整块代码片段,在学习和做VUE项目时可以极大地提高工作效率,下面就介绍一下插件的常见命令。
此插件可用比较简单的写法生成代码片段,非常适合开发工作,减少代码工作量。
Script
| Snippet | Purpose |
|---|---|
| vbase | Single file component base |
| vbase | Single file component base |
| vdata | Component data as a function |
| vmethod | Vue method |
| vcomputed | Vue computed property |
| vwatcher | Vue watcher with new and old value args |
| vprops | Props with type and default |
| vimport | Import one component into another |
| vimport-c | Import one component into another within the export statement |
| vimport-export | Import one component into another and use it within the export statement |
| vfilter | Vue filter |
| vmixin | Create a Vue Mixin |
| vmixin-use | Bring a mixin into a component to use |
| vc-direct | Vue create a custom directive |
| vimport-lib | Import a library |
| vimport-gsap | Import GreenSock with Timeline and Eases |
| vanimhook-js | Using the Transition component JS hooks in methods |
Template
| Snippet | Purpose |
|---|---|
| vfor | v-for directive |
| vmodel | Semantic v-model directive |
| vmodel-num | Semantic v-model number directive |
| von | v-on click handler with arguments |
| vel-props | Component element with props |
| vsrc | Image src binding |
| vstyle | Inline style binding |
| vstyle-obj | Inline style binding with objects |
| vclass | Class binding |
| vclass-obj | Class binding with objects |
| vclass-obj-mult | Multiple conditional class bindings |
| vanim | Transition component with JS hooks |
Vuex
| Snippet | Purpose |
|---|---|
| vstore | Base for Vuex store.js |
| vgetters | Vuex Getter |
| vmutation | Vuex Mutation |
| vaction | Vuex Action |
| vstore-import | Import vuex store into main.js |
Extra (plaintext)
| Snippet | Purpose |
|---|---|
| gitignore | .gitignore file presets |
| vinc | incrementer |
| vdec | decrementer |