Deprecated! It has been included in the Vue2 or Vue3 code snippets, no longer maintained separately.
弃用! 已迁移至 Vue2 或 Vue3 代码片断中,不在单独维护了。
🌈🌈🌈 Need to install "Vue 2 Snippets" or "Vue 3 Snippets" (coming soon), they are one combined release.
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.
- HTML (
.html
) - HTML (
.vue
) - JavaScript (
.js
) - TypeScript (
.ts
) - Vue (
.vue
)
- JavaScript Code Snippet - Visual Studio Marketplace
- JavaScript Comment Snippet - Visual Studio Marketplace
- React Snippets - Visual Studio Marketplace
- HTML
- Style & Class
- Directives
- Dynamic Component, Keep Alive
- Slot
- Transition
- Instance Methods Events
- Vue Router
- CSS
- JavaScript
vClass
-:class="{ 'class-name': expression }"
, Class binding: object syntax inlinevClass
-:class="classObject"
, Class binding: object syntaxvClass
-:class="[classObject]"
, Class binding: apply a list of classesvClass
-:class="[expression ? 'class-name' : '', classObject]"
, Class binding: with a ternary expressionvClass
-:class="[classObject, { 'class-name': expression }]"
, Class binding: multiple conditional classesvStyle
-:style="{ 'css-property': 'value', cssProperty:
${styleValue}px}"
, Style binding: object syntax inlinevStyle
-:style="styleObject"
, Style binding: object syntaxvStyle
-:style="[baseStyles, overridingStyles]"
, Style binding: multiple styles
template
- templatetemplateFunctional
- functional templatextemplate
- x-templatevFor
-v-for="(item, index) in items" :key="index"
, Vue v-forvForWithoutKey
-v-for="item in items"
, Vue v-for, Without KeyvIf
-v-if="condition"
, Vue v-ifvElse
-v-else
, Vue v-elsevElseIf
-v-else-if="condition"
, Vue v-else-ifvIfWithKey_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-showvText
-v-text="text"
, Vue v-textvFilter_UNSAFE
-:text-content.prop="text | filter"
, Vue v-bind filter, Vue 3 REMOVED!vHtml
-v-html="html"
, Vue v-htmlvModel
-v-model="value"
, Vue v-modelvOn
-@click="handler(arg, $event)"
, v-on event/listenervOnLonghand
-v-on:click="handler(arg, $event)"
, v-on LonghandvOnDynamic
-@[event]="handler(arg, $event)"
, v-on dynamic eventvOnStopPropagation
-vOnStopPropagation
, v-on stop propagationvOnPreventDefault
-@click.prevent="handler(arg, $event)"
, v-on prevent defaultvOnStopPropagationPreventDefault
-@click.stop.prevent="handler(arg, $event)"
, v-on stop propagation and prevent defaultvOnKeyAlias
-@keyup.enter="handler(arg, $event)"
, v-on key modifier using keyAliasvOnKeyCode_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 oncevOnObject
-v-on="{ mousedown: handler(arg, $event), mouseup: handler(arg, $event) }"
, v-on object syntaxvBind
-:attribute="value"
, Vue v-bindvBindLonghand
-v-bind:attribute="value"
, Vue v-bind LonghandvBindDynamic
-:[attribute]="value"
, Vue v-bind dynamic directivevAttrs
-"v-bind="$attrs"
, Vue v-bind $attrsvOnce
-v-once
, Vue v-oncevPre
-v-pre
, Vue v-prevCloak
-v-cloak
, Vue v-cloakvEmit
-@event="$emit('event-name', $event.target.value)"
, $emitref
-ref="reference"
key
-:key="number|string|boolean|symbol"
component
-<component :is="componentId"></component>
keepAlive
-<keep-alive></keep-alive>
slotElement
-<slot>
ElementslotElementScope
-<slot>
Element, Scoped SlotsvSlot
- v-slotvSlotScope
- v-slot, Scoped SlotsvSlotLonghand
- v-slot, LonghandvSlotScopeLonghand
- v-slot, Scoped Slots, LonghandUNSAFE_slot
- UNSAFE!!! Slot DeprecatedUNSAFE_slotScope
- UNSAFE!!! Slot Deprecated, Scope RemovedUNSAFE_slotSlotScope
- UNSAFE!!! Slot Deprecated, slotScope Deprecated
transition
- Vue Transition Componenttransition
- Vue Transition Component with JavaScript HookstransitionGroup
- Vue transition-group Component
enterClass
/transitionEnterClass
- enter-classenterActiveClass
/transitionEnterActiveClass
- enter-active-classenterToClass
/transitionEnterToClass
- enter-to-classleaveClass
/transitionLeaveClass
- leave-classleaveToClass
/transitionLeaveToClass
- leave-to-classleaveActiveClass
/transitionLeaveActiveClass
- leave-active-classappearClass
/transitionAppearClass
- appear-classappearToClass
/transitionAppearToClass
- appear-to-classappearActiveClass
/transitionAppearActiveClass
- appear-active-class
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'
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;
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 {}
importComponent
/ivc
,import Feature from '@/components/Feature';
, import a vue componentimportDirective
/ivd
,import Feature from '@/directives/Feature';
, import a vue directiveimportService
/ivs
,import { Feature } from '@/services/Feature';
, import a vue serviceimportUtil
/ivu
,import { Feature } from '@/utils/Feature';
, import a vue utilimportConstant
/ivc
,import { Feature } from '@/constants/Feature';
, import a vue constantimportConfig
/ivcg
,import { Feature } from '@/configs/Feature';
, import a vue cnfig
beforeEnterEvent
/transitionBeforeEnterEvent
- before-enterenterEvent
/transitionEnterEvent
- enterafterEnterEvent
/transitionAfterEnterEvent
- after-enterenterCancelledEvent
/transitionEnterCancelledEvent
- enter-cancelledbeforeLeaveEvent
/transitionBeforeLeaveEvent
- before-leaveleaveEvent
/transitionLeaveEvent
- leaveafterLeaveEvent
/transitionAfterLeaveEvent
- after-leaveleaveCancelledEvent
/transitionLeaveCancelledEvent
- leave-cancelledbeforeAppearEvent
/transitionBeforeAppearEvent
- before-appearappearEvent
/transitionAppearEvent
- appearafterAppearEvent
/transitionAfterAppearEvent
- after-appearappearCancelledEvent
/transitionAppearCancelledEvent
- appear-cancelled
MIT License
Donate