Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>vue-element-sinppetsNew to Visual Studio Code? Get it now.

vue-element-sinppets

zhouxiaosa

|
4,597 installs
| (4) | Free
编写速速提高5倍以上,Vue.js2.X和element超强代码块
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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

Form

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

Input

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

Button

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
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2022 Microsoft