Vue 2 Snippets for Visual Studio Code
This extension adds Vue 2 Code Snippets into Visual Studio Code.
这个插件基于最新的 Vue 2 的 API 添加了Code Snippets。
It looks like:
Snippets
Including most of the API of Vue.js 2. You can type vcom, choose VueConfigOptionMergeStrategies, and press ENTER, then Vue.config.optionMergeStrategies appear on the screen.
插件的 Snippets 如下表格所示，比如你可以键入 vcom 然后按上下键选中 VueConfigOptionMergeStrategies 再按Enter键，就输入了Vue.config.optionMergeStrategies了。
As shown in the table below, snippet vmData has body like ${this, vm}.$data will provides choice this.$data and vm.$data to you.
如下表所示，vmData 的内容是 ${this, vm}.$data，这表明这个 snippet 会提供 this.$data and vm.$data 两种选项供你选择。
| Prefix | JavaScript Snippet Content |
| ------ | ------------ |
| import | import ... from ... |
| newVue | new Vue({...}) |
| VueConfigSilent | Vue.config.silent = true |
| VueConfigOptionMergeStrategies | Vue.config.optionMergeStrategies |
| VueConfigDevtools | Vue.config.devtools = true |
| VueConfigErrorHandler | Vue.config.errorHandler = function (err, vm, info) {...} |
| VueConfigWarnHandler | Vue.config.warnHandler = function (msg, vm, trace) {...} |
| VueConfigIgnoredElements | Vue.config.ignoredElements = ['']
| VueConfigKeyCodes | Vue.config.keyCodes |
| VueConfigPerformance | Vue.config.performance = true |
| VueConfigProductionTip | Vue.config.productionTip = false |
| vueExtend | Vue.extend( options ) |
| VueNextTick | Vue.nextTick( callback, [context] ) |
| VueNextTickThen | Vue.nextTick( callback, [context] ).then(function(){ }) |
| VueSet | Vue.set( target, key, value ) |
| VueDelete | Vue.delete( target, key ) |
| VueDirective | Vue.directive( id, [definition] ) |
| VueFilter | Vue.filter( id, [definition] ) |
| VueComponent | Vue.component( id, [definition] ) |
| VueUse | Vue.use( plugin ) |
| VueMixin | Vue.mixin({ mixin }) |
| VueCompile | Vue.compile( template ) |
| VueVersion | Vue.version |
| data | data() { return {} } |
| watchWithOptions | key: { deep: true, immediate: true, handler: function () { } } |
| vmData | ${this, vm}.$data |
| vmProps | ${this, vm}.$props |
| vmEl | ${this, vm}.$el |
| vmOptions | ${this, vm}.$options |
| vmParent | ${this, vm}.$parent |
| vmRoot | ${this, vm}.$root |
| vmChildren | ${this, vm}.$children |
| vmSlots | ${this, vm}.$slots |
| vmScopedSlots | ${this, vm}.$scopedSlots.default({}) |
| vmRefs | ${this, vm}.$refs |
| vmIsServer | ${this, vm}.$isServer |
| vmAttrs | ${this, vm}.$attrs|
| vmListeners | ${this, vm}.listeners|
| vmWatch | ${this, vm}.$watch( expOrFn, callback, [options] ) |
| vmSet | ${this, vm}.$set( object, key, value ) |
| vmDelete | ${this, vm}.$delete( object, key ) |
| vmOn | ${this, vm}.$on( event, callback ) |
| vmOnce | ${this, vm}.$once( event, callback ) |
| vmOff | ${this, vm}.$off( [event, callback] ) |
| vmEmit | ${this, vm}.$emit( event, […args] ) |
| vmMount | ${this, vm}.$mount( [elementOrSelector] ) |
| vmForceUpdate | ${this, vm}.$forceUpdate() |
| vmNextTick | ${this, vm}.$nextTick( callback ) |
| vmDestroy | ${this, vm}.$destroy() |
| renderer | const renderer = require('vue-server-renderer').createRenderer() |
| createRenderer | createRenderer({ }) |
| preventDefault | preventDefault(); |
| stopPropagation | stopPropagation(); |
| Prefix |
HTML Snippet Content |
template |
<template></template> |
script |
<script></script> |
style |
<style></style> |
vText |
v-text=msg |
vHtml |
v-html=html |
vShow |
v-show |
vIf |
v-if |
vElse |
v-else |
vElseIf |
v-else-if |
vForWithoutKey |
v-for |
vFor |
v-for="" :key="" |
vOn |
v-on |
vBind |
v-bind |
vModel |
v-model |
vPre |
v-pre |
vCloak |
v-cloak |
vOnce |
v-once |
key |
:key |
ref |
ref |
slotA |
slot="" |
slotE |
<slot></slot> |
slotScope |
slot-scope="" |
component |
<component :is=''></component> |
keepAlive |
<keep-alive></keep-alive> |
transition |
<transition></transition> |
transitionGroup |
<transition-group></transition-group> |
enterClass |
enter-class='' |
leaveClass |
leave-class='' |
appearClass |
appear-class='' |
enterToClass |
enter-to-class='' |
leaveToClass |
leave-to-class='' |
appearToClass |
appear-to-class='' |
enterActiveClass |
enter-active-class='' |
leaveActiveClass |
leave-active-class='' |
appearActiveClass |
appear-active-class='' |
beforeEnterEvent |
@before-enter='' |
beforeLeaveEvent |
@before-leave='' |
beforeAppearEvent |
@before-appear='' |
enterEvent |
@enter='' |
leaveEvent |
@leave='' |
appearEvent |
@appear='' |
afterEnterEvent |
@after-enter='' |
afterLeaveEvent |
@after-leave='' |
afterAppearEvent |
@after-appear='' |
enterCancelledEvent |
@enter-cancelled='' |
leaveCancelledEvent |
@leave-cancelled='' |
appearCancelledEvent |
@appear-cancelled='' |
| Prefix |
Vue Router Snippet Content |
routerLink |
<router-link></router-link> |
routerView |
<router-view></router-view> |
to |
to="" |
tag |
tag="" |
newVueRouter |
const router = newVueRouter({ }) |
routerBeforeEach |
router.beforeEach((to, from, next) => { } |
routerBeforeResolve |
router.beforeResolve((to, from, next) => { } |
routerAfterEach |
router.afterEach((to, from) => { } |
routerPush |
router.push() |
routerReplace |
router.replace() |
routerGo |
router.back() |
routerBack |
router.push() |
routerForward |
router.forward() |
routerGetMatchedComponents |
router.getMatchedComponents() |
routerResolve |
router.resolve() |
routerAddRoutes |
router.addRoutes() |
routerOnReady |
router.onReady() |
routerOnError |
router.onError() |
routes |
routes: [] |
beforeEnter |
beforeEnter: (to, from, next) => { } |
beforeRouteEnter |
beforeRouteEnter (to, from, next) { } |
beforeRouteLeave |
beforeRouteLeave (to, from, next) { } |
scrollBehavior |
scrollBehavior (to, from, savedPosition) { } |
| Prefix |
Vuex Snippet Content |
newVuexStore |
const store = new Vuex.Store({ }) |
| Prefix |
Nuxt.js Snippet Content |
nuxt |
<nuxt/> |
nuxtChild |
<nuxt-child/> |
nuxtLink |
<nuxt-link to=""/> |
asyncData |
asyncData() {} |
how to use
install the extensioon and then type l-.all prefixs are begin with l-.
snippets
Template
Table
| Snipet |
Purpose |
| l-tabel__row |
el-table-column |
| l-tabel__row--template |
el-table-column with template |
| l-tabel__pagination |
the custom pagination component |
| Snipet |
Purpose |
| l-form-item__input_trim |
el-input in el-from-item with trim |
| l-form-item__input_number |
el-input in el-from-item with number |
| l-form-item__switch |
el-switch in el-from-item |
| l-form-item__select |
el-select in el-from-item |
| l-form-item__dateTime |
select dateTime in el-from-item |
| l-form-item__dateRange |
select dataRange in el-from-item |
| l-form-item__upload |
upload image in el-from-item ,you should import Upload component |
| Snipet |
Purpose |
| l-input__trim |
el-input with trim |
| l-input__number |
el-input with number |
| l-input__checkbox |
el-checkbox |
| l-input__switch |
el-switch |
| l-input__select |
el-select |
| l-input__dateTime |
select dateTime |
| l-input__dateRange |
select dataRange |
| l-input__textarea |
el-input textarea |
| l-input__radio |
el-radio-group |
| l-input__trim--query |
el-input with trim and query |
| l-input__number--query |
el-input with number and query |
| l-input__checkbox--query |
el-checkbox with query |
| l-input__select--query |
el-select with query |
| l-input__dateRange--query |
el-select with query |
| Snipet |
Purpose |
| l-button--primary |
primary el-button |
| l-button--success |
success el-button |
| l-button--danger |
danger el-button |
| l-button--searchIcon |
primary el-button with search icon |
| l-button--exportIcon |
primary el-button with export icon |
| l-button--createIcon |
primary el-button with create icon |
| l-button--addIcon |
primary el-button with add icon |
| l-button--deleteIcon |
primary el-button with delete icon |
Tag
| Snipet |
Purpose |
| l-tag--primary |
primary el-tag |
| l-tag--success |
success el-tag |
| l-tag--info |
info el-tag |
| l-tag--warning |
warning el-tag |
| l-tag--danger |
danger el-tag |
Router
| Snipet |
Purpose |
| l-method__skipToRoute |
skip to a window in current page |
| l-method__skipToRoute--newWindow |
skip to a new page |
| l-method__skipToPrevious |
skip to previous page |
Message
| Snipet |
Purpose |
| l-message__success |
success message |
| l-message__error |
error message |
| l-message__confirm |
message need to confirm |
common
some snippet i don't know where to put
| Snipet |
Purpose |
| l-common__opt |
the templete of options |
others are deep coupled with vue-element-admin
Vue
| Snippet |
Purpose |
| l-base |
Single file component base |
| l-base__list |
Single file list with query and table base |
| l-base__deploy |
Single file deploy with form base |
Conponent
| Snipet |
Purpose |
| l-conponent__sticky |
Sticky Conponnet |
Script
Methods
| Snipet |
Purpose |
| l-method__pagination |
handlePagination |
| l-method__handleDownload |
handleDownload |
| l-method__paste |
handlePaste |
Apis
| Snipet |
Purpose |
| l-api__get |
get request |
| l-api__get--query |
get query request |
| l-api__post |
post request |
Import
import frequently-used components and util and etc
| Snipet |
Purpose |
| l-import__api |
import api from common folder |
| l-import__opt |
import option from common folder |
| l-import__defaultVal |
import default from common folder |
| l-import__util |
import utils |
| l-import__fetch |
import fetch method from utils floder |
| l-import__param |
import param method from utils floder |
| l-import__parseTime |
import parseTime method from utils floder |
| l-import__dateTime |
import dateTime component from Conponents floder |
| l-import__upload |
import upload component from Conponents floder |
| l-import__upload--plus |
import uploadPlus component from Conponents floder |
