Vue Basic Snippets (Visual Studio Code)
中文
🌈🌈🌈 Need to install "Vue 2 Snippets" or "Vue 3 Snippets" (coming soon), they are one combined release.
Design

Vue 2 and 3 have relatively large changes, 2 recommends the Optional paradigm, and 3 recommends the Composition Functions paradigm. The commonly used "Global API, Directives, Transition, Async Components, Instance Events, Lifecycle" in Vue have undergone major changes. And VueX also launched 4 versions.
In addition, with the introduction of new features of "reactive refs" and "Teleport", the upgrade of many community resources will be major changes.
Therefore, it is not good to design Vue 2 and 3 Code Snippets together.
It is best to separate the Code Snippets of Vue 2 and 3 respectively. According to the actual situation in the project, select Disable (Workspace) in the extension. If you feel this is more cumbersome, you can install the extension supported by version 2 in "VS Code " , Install the extensions supported by version 3 in "VS Code-Insiders ".
Vue 2 and 3 Template Directives are the same.

Supported languages (file extensions)
- HTML (
.html )
- HTML (
.vue )
- JavaScript (
.js )
- TypeScript (
.ts )
- Vue (
.vue )
Resources 🤞
Snippets
- HTML
- Dynamic Component, Keep Alive
- Slot
- Transition
- Instance Methods Events
- Vue Router
- CSS
- JavaScript
HTML 🌴
Style & Class
vClass - :class="{ 'class-name': expression }" , Class binding: object syntax inline
vClass - :class="classObject" , Class binding: object syntax
vClass - :class="[classObject]" , Class binding: apply a list of classes
vClass - :class="[expression ? 'class-name' : '', classObject]" , Class binding: with a ternary expression
vClass - :class="[classObject, { 'class-name': expression }]" , Class binding: multiple conditional classes
vStyle - :style="{ 'css-property': 'value', cssProperty: ${styleValue}px}" , Style binding: object syntax inline
vStyle - :style="styleObject" , Style binding: object syntax
vStyle - :style="[baseStyles, overridingStyles]" , Style binding: multiple styles
Directives
template - template
templateFunctional - functional template
xtemplate - x-template
vFor - v-for="(item, index) in items" :key="index" , Vue v-for
vForWithoutKey - v-for="item in items" , Vue v-for, Without Key
vIf - v-if="condition" , Vue v-if
vElse - v-else , Vue v-else
vElseIf - v-else-if="condition" , Vue v-else-if
vIfWithKey_UNSAFE - v-if="condition" key="{feature}" , Vue v-if, With Key, Vue 3 DEPRECATED!
vElseWithKey_UNSAFE - v-else key="{feature}" , Vue v-else, With Key, Vue 3 DEPRECATED!
vElseIfWithKey_UNSAFE - v-else-if="condition" key="{feature}" , Vue v-else-if, With Key, Vue 3 DEPRECATED!
vShow - v-show="condition" , Vue v-show
vText - v-text="text" , Vue v-text
vFilter_UNSAFE - :text-content.prop="text | filter" , Vue v-bind filter, Vue 3 REMOVED!
vHtml - v-html="html" , Vue v-html
vModel - v-model="value" , Vue v-model
vOn - @click="handler(arg, $event)" , v-on event/listener
vOnLonghand - v-on:click="handler(arg, $event)" , v-on Longhand
vOnDynamic - @[event]="handler(arg, $event)" , v-on dynamic event
vOnStopPropagation - vOnStopPropagation , v-on stop propagation
vOnPreventDefault - @click.prevent="handler(arg, $event)" , v-on prevent default
vOnStopPropagationPreventDefault - @click.stop.prevent="handler(arg, $event)" , v-on stop propagation and prevent default
vOnKeyAlias - @keyup.enter="handler(arg, $event)" , v-on key modifier using keyAlias
vOnKeyCode_UNSAFE - @keyup.13="handler(arg, $event)" , v-on key modifier using keyCode, Vue 3 DEPRECATED!
vOnOnce - @click.once="handler(arg, $event)" , v-on triggered at most once
vOnObject - v-on="{ mousedown: handler(arg, $event), mouseup: handler(arg, $event) }" , v-on object syntax
vBind - :attribute="value" , Vue v-bind
vBindLonghand - v-bind:attribute="value" , Vue v-bind Longhand
vBindDynamic - :[attribute]="value" , Vue v-bind dynamic directive
vAttrs - "v-bind="$attrs" , Vue v-bind $attrs
vOnce - v-once , Vue v-once
vPre - v-pre , Vue v-pre
vCloak - v-cloak , Vue v-cloak
vEmit - @event="$emit('event-name', $event.target.value)" , $emit
ref - ref="reference"
key - :key="number|string|boolean|symbol"
Dynamic Component
component - <component :is="componentId"></component>
keepAlive - <keep-alive></keep-alive>
Slots
slotElement - <slot> Element
slotElementScope - <slot> Element, Scoped Slots
vSlot - v-slot
vSlotScope - v-slot, Scoped Slots
vSlotLonghand - v-slot, Longhand
vSlotScopeLonghand - v-slot, Scoped Slots, Longhand
UNSAFE_slot - UNSAFE!!! Slot Deprecated
UNSAFE_slotScope - UNSAFE!!! Slot Deprecated, Scope Removed
UNSAFE_slotSlotScope - UNSAFE!!! Slot Deprecated, slotScope Deprecated
Transitions
transition - Vue Transition Component
transition - Vue Transition Component with JavaScript Hooks
transitionGroup - Vue transition-group Component
Custom Transition Classes
enterClass / transitionEnterClass - enter-class
enterActiveClass / transitionEnterActiveClass - enter-active-class
enterToClass / transitionEnterToClass - enter-to-class
leaveClass / transitionLeaveClass - leave-class
leaveToClass / transitionLeaveToClass - leave-to-class
leaveActiveClass / transitionLeaveActiveClass - leave-active-class
appearClass / transitionAppearClass - appear-class
appearToClass / transitionAppearToClass - appear-to-class
appearActiveClass / transitionAppearActiveClass - appear-active-class
Hooks
beforeEnterHook /transitionBeforeEnterHook → @before-enter='beforeEnter'
enterHook /transitionEnterHook → @enter='enter'
afterEnterHook /transitionAfterEnterHook → @after-enter='afterEnter'
enterCancelledHook /transitionEnterCancelledHook → @enter-cancelled='enterCancelled'
beforeLeaveHook /transitionBeforeLeaveHook → @before-leave='beforeLeave'
leaveHook /transitionLeaveHook → @leave='leave'
afterLeaveHook /transitionAfterLeaveHook → @after-leave='afterLeave'
leaveCancelledHook /transitionLeaveCancelledHook → @leave-cancelled='leaveCancelled'
beforeAppearHook /transitionBeforeAppearHook → @before-appear='beforeAppear'
appearHook /transitionAppearHook → @appear='appear'
afterAppearHook /transitionAfterAppearHook → @after-appear='afterAppear'
appearCancelledHook /transitionAppearCancelledHook → @appear-cancelled='appearCancelled'
Vue Router
routerView - <router-view></router-view> , Router View;
routerViewNamed - <router-view name="viewFeature"></router-view> , Named Router View;
routerLink - <router-link to="">path</router-link> , Router link with literal string;
routerLink - <router-link :to="">path</router-link> , Router link using v-bind;
routerLinkPath - <router-link :to="{ path: 'pathname' }">pathname</router-link> , Router link to path;
routerLinkParams - <router-link :to="{ path: 'pathname', params: { property: 'value' } }">path</router-link> , Router link to path with params;
routerLinkQuery - <router-link :to="{ path: 'pathname', query: { property: 'value' } }">path</router-link> , Router link to path with query;
routerLinkAppend - <router-link :to="{ path: 'pathname' }" append>path</router-link> , Router link to path using append mode;
routerLinkReplace - <router-link :to="{ path: 'pathname' }" replace>path</router-link> , Router link to path using replace mode;
routerLinkNamedRoute - <router-link :to="{ name: 'routename' }">path</router-link> , Router link to named route;
routerLinkNamedRouteParams - <router-link :to="{ name: 'routename', params: { property: 'value' } }">path</router-link> , Router link to named route with params;
routerLinkNamedRouteQuery - <router-link :to="{ name: 'routename', query: { property: 'value' } }">path</router-link> , Router link to named route with query;
routerParams - params: { property: 'value' } , Router with params;
routerQuery - query: { property: 'value' } , Router with query;
routerActiveClass - active-class="router-link-active" , Router active-class;
routerExact - exact , Router with exact match;
routerExactActiveClass - exact-active-class="router-link-exact-active" , Router exact-active-class;
routerAriaCurrentValue - aria-current-value="page" , Router aria-current-value;
routerTag - tag="a" , Router tag;
CSS 🌷
v-cloak
enterCSS / transitionEnterCSS → .feature-enter {}
enterActiveCSS /transitionEnterActiveCSS → .feature-enter-active {}
enterToCSS / transitionEnterToCSS → .feature-enter-to {}
leaveCSS / transitionLeaveCSS → .feature-leave {}
leaveToCSS / transitionLeaveToCSS → .feature-leave-to {}
leaveActiveCSS /transitionLeaveActiveCSS → .feature-leave-active {}
appearCSS / transitionAppearCSS → .feature-appear {}
appearToCSS / transitionAppearToCSS → .feature-appear-to {}
appearActiveCSS /transitionAppearActiveCSS → .feature-appear-active {}
JavaScript 🌿
Import
importComponent / ivc , import Feature from '@/components/Feature'; , import a vue component
importDirective / ivd , import Feature from '@/directives/Feature'; , import a vue directive
importService / ivs , import { Feature } from '@/services/Feature'; , import a vue service
importUtil / ivu , import { Feature } from '@/utils/Feature'; , import a vue util
importConstant / ivc , import { Feature } from '@/constants/Feature'; , import a vue constant
importConfig / ivcg , import { Feature } from '@/configs/Feature'; , import a vue cnfig
Transition
beforeEnterEvent / transitionBeforeEnterEvent - before-enter
enterEvent / transitionEnterEvent - enter
afterEnterEvent / transitionAfterEnterEvent - after-enter
enterCancelledEvent / transitionEnterCancelledEvent - enter-cancelled
beforeLeaveEvent / transitionBeforeLeaveEvent - before-leave
leaveEvent / transitionLeaveEvent - leave
afterLeaveEvent / transitionAfterLeaveEvent - after-leave
leaveCancelledEvent / transitionLeaveCancelledEvent - leave-cancelled
beforeAppearEvent / transitionBeforeAppearEvent - before-appear
appearEvent / transitionAppearEvent - appear
afterAppearEvent / transitionAfterAppearEvent - after-appear
appearCancelledEvent / transitionAppearCancelledEvent - appear-cancelled
License 📃
MIT License
Donate

| |