Vue Snippets for Visual Studio Code
This extension adds Vue Code Snippets and Syntax Highlight into Visual Studio Code.
Recommend use vue-ls extension.
本代码片段搜集了常用的 vue 代码片段，详细清单请参考下文列表。
推荐结合 vue-ls 扩展一同使用。
Vue Snippets
Vue Base Snippets
| Prefix |
Snippet Content |
vbase |
<template>
<div>
</div>
</template>
<script>
export default {
|
}
</script>
<style scoped>
</style>
|
template |
<template>
|
</template>
|
templatePug |
<template lang="pug">
|
</template>
|
script |
<script>
|
</script>
|
style |
<style>
|
</style>
|
styleLang |
<style lang="|">
|
</style>
|
Vue Template Snippets
| Prefix |
Snippet Content |
v-for |
v-for="|item in |items" :key="|item.id"
|
v-if |
v-if="|condition"
|
v-if-with-key |
v-if="|condition" key="|key"
|
v-else-if |
v-else-if="|condition"
|
v-else-if-with-key |
v-else-if="|condition" key="|key"
|
v-else |
v-else
|
v-else-with-key |
v-else key="|key"
|
v-show |
v-show="|condition"
|
v-text |
v-text="|msg"
|
v-html |
v-html="|html"
|
v-pre |
v-pre
|
v-bind |
v-bind:|="|"
|
v-model |
v-model="|something"
|
v-on |
v-on:|event="|handle"
|
v-on-click |
@click="|handler(|arg, $event)"
|
v-once |
v-once
|
v-cloak |
v-cloak
|
key |
:key="|key"
|
ref |
ref="|reference"
|
slot |
slot="|"
|
enter-class |
enter-class="|"
|
leave-class |
leave-class="|"
|
appear-class |
appear-class="|"
|
enter-to-class |
enter-to-class="|"
|
leave-to-class |
leave-to-class="|"
|
appear-to-class |
appear-to-class="|"
|
enter-active-class |
enter-active-class="|"
|
leave-active-class |
leave-active-class="|"
|
appear-active-class |
appear-active-class="|"
|
before-enter-event |
@before-enter="|"
|
befor-eleave-event |
@before-leave="|"
|
before-appear-event |
@before-appear="|"
|
enter-event |
@enter="|"
|
leave-event |
@leave="|"
|
appear-event |
@appear="|"
|
after-enter-event |
@after-enter="|"
|
after-leave-event |
@after-leave="|"
|
after-appear-event |
@after-appear="|"
|
enter-cancelled-event |
@enter-cancelled="|"
|
leave-cancelled-event |
@leave-cancelled="|"
|
appear-cancelled-event |
@appear-cancelled="|"
|
vFor |
<|div v-for="|item in |items" :key="|item.id">
{{ |item }}
</|div>
|
vIf |
<|div v-if="|condition">
|
</|div>
|
vIfWithKey |
<|div v-if="|condition" key="|key">
|
</|div>
|
vElseIf |
<|div v-else-if="|condition">
|
</|div>
|
vElseIfWithKey |
<|div v-else-if="|condition" key="|key">
|
</|div>
|
vElse |
<|div v-else>
|
</|div>
|
vElseWithKey |
<|div v-else key="|key">
|
</|div>
|
vModel |
<input v-model="|data" type="text" />
|
vModelNum |
<input v-model.number="|numData" type="number" step="1" />
|
vElProps |
<|component :|propName="|propValue">
|
</|component>
|
vSrc |
<img :src="'/path/to/images/' + |fileName" alt="|altText"/>
|
vClass |
<|div :class="{ |className: |data }">
|
</|div>
|
vClassObj |
<|div :class="[|classNameA, |classNameB]">
|
</|div>
|
vClassObjMult |
<|div :class="[|classNameA, {|classNameB : |condition}]">
|
</|div>
|
vStyle |
<|div :style="{ fontSize: |data + 'px' }">
|
</|div>
|
vStyleObj |
<|div :style="[|styleObjectA, |styleObjectB]">
|
</|div>
|
vTransition |
<transition|>
|
</transition>
|
vTransitionAnim |
<transition
mode="out-in"
@before-enter="beforeEnter"
@enter="enter"
@before-leave="beforeLeave"
@leave="leave"
:css="false">
|
</transition>
|
vTransitionGroup |
<transition-group|>
|
</transition-group>
|
vSlot |
<slot|>|</slot>
|
vComponent |
<component :is="|componentId"></component>
|
vKeepAlive |
<keep-alive|>
|
</keep-alive>
|
Vue Template Pug Snippets
| Prefix |
Snippet Content |
vFor |
|div(v-for="|item in |items" :key="|item.id")
{{ |item }}
|
vIf |
|div(v-if="|condition")
|
|
vIfWithKey |
|div(v-if="|condition" key="|key")
|
|
vElseIf |
|div(v-else-if="|condition")
|
|
vElseIfWithKey |
|div(v-else-if="|condition" key="|key")
|
|
vElse |
|div(v-else)
|
|
vElseWithKey |
|div(v-else key="|key")
|
|
vModel |
input(v-model="|data" type="text")
|
vModelNum |
input(v-model.number="|numData" type="number" step="1")
|
vElProps |
|component(:|propName="|propValue")
|
|
vSrc |
img(:src="'/path/to/images/' + |fileName" alt="|altText")
|
vClass |
|div(:class="{ |className: |data }")
|
|
vClassObj |
|div(:class="[|classNameA, |classNameB]")
|
|
vClassObjMult |
|div(:class="[|classNameA, {|classNameB : |condition}]")
|
|
vStyle |
|div(:style="{ fontSize: |data + 'px' }")
|
|
vStyleObj |
|div(:style="[|styleObjectA, |styleObjectB]")
|
|
vTransition |
transition
|
|
vTransitionAnim |
transition(
mode="out-in"
@before-enter="beforeEnter"
@enter="enter"
@before-leave="beforeLeave"
@leave="leave"
:css="false")
|
|
vTransitionGroup |
transition-group
|
|
vSlot |
slot
|
|
vComponent |
component(:is="|componentId")
|
vKeepAlive |
keep-alive
|
|
Vue Script Snippets
| Prefix |
Snippet Content |
function => |
(|) => {
|
}
|
console-block |
console.log('\n\n------ begin: | ------')
console.log(|'')
console.log('------ end: | ------\n\n')
|
console.log |
console.log('|tag', |'')
|
console.info |
console.info('|tag', |'')
|
console.warn |
console.warn('|tag', |'')
|
console.error |
console.error('|tag', |'')
|
vImport |
import |Name from './components/|Name'
|
vImportLib |
import |libName from '|libName'
|
vBaseWithComponent |
import |Name from '@/components/|Name'
export default {
components: {
|Name
},
}
|
vNewVue |
new Vue({
|
})
|
vConfigSilent |
Vue.config.silent = |true
|
vConfigOptionMergeStrategies |
Vue.config.optionMergeStrategies
|
vConfigDevtools |
Vue.config.devtools = |true
|
vConfigErrorHandler |
Vue.config.errorHandler = function (err, vm, info) {
|// handle error
}
|
vConfigWarnHandler |
Vue.config.warnHandler = function (msg, vm, trace) {
|// handle error
}
|
vConfigIgnoredElements |
Vue.config.ignoredElements = [
'|'
]
|
vConfigKeyCodes |
Vue.config.keyCodes = {
|// camelCase won`t work
}
|
vConfigPerformance |
Vue.config.performance = |true
|
vConfigProductionTip |
Vue.config.productionTip = |false
|
vUse |
Vue.use(|plugin)
|
vInstallDirective |
Vue.directive(|id|, [definition])
|
vInstallFilter |
Vue.filter(|id|, [definition])
|
vInstallComponent |
Vue.component(|id|, [definition])
|
vNextTick |
Vue.nextTick({
|
})
|
vSet |
Vue.set(|target, |key, |value)
|
vDelete |
Vue.delete(|target, |key)
|
vMixin |
Vue.mixin(|mixin)
|
vCompile |
Vue.compile(|template)
|
vExtend |
Vue.extend({
template:|template
})
|
vComponents |
components: {
|componentsName,
},
|
vDirectives |
directives: {
|
},
|
vDirective |
|directiveName: {
bind(el, binding, vnode) {
|
}
},
|
vFilters |
filters: {
|fnName: function(|value) {
return |value|
}
},
|
vFilter |
|fnName: function(|value) {
return |value|
},
|
vMixins |
mixins: [|mixinName],
|
vProps |
props: {
|propName: {
type: |number,
default: |
},
},
|
vProp |
|propName: {
type: |number,
default: |
},
|
vData |
data() {
return {
|key: |value
}
},
|
vComputed |
computed: {
|name() {
return this.|data |
},
},
|
vComputedItem |
|name() {
return this.|data |
},
|
vWatch |
watch: {
|data(|newValue, |oldValue) {
|
},
},
|
vWatchItem |
|data(|newValue, |oldValue) {
|
},
|
vMethods |
methods: {
|name() {
|
},
},
|
vMethod |
|name() {
|
},
|
vTransitionAnimHook |
beforeEnter(el) {
console.log('beforeEnter')
},
enter(el, done) {
console.log('enter')
done()
},
beforeLeave(el) {
console.log('beforeLeave')
},
leave(el, done) {
console.log('leave')
done()
},
|
vm-data |
|[this,vm].$data|
|
vm-props |
|[this,vm].$props|
|
vm-el |
|[this,vm].$el|
|
vm-options |
|[this,vm].$options|
|
vm-parent |
|[this,vm].$parent|
|
vm-root |
|[this,vm].$root|
|
vm-children |
|[this,vm].$children|
|
vm-slots |
|[this,vm].$slots|
|
vm-scoped-slots |
$this.$scopedSlots.default({
|
})
|
vm-refs |
|[this,vm].$refs|
|
vm-is-server |
|[this,vm].$isServer|
|
vm-attrs |
|[this,vm].$attrs|
|
vm-listeners |
|[this,vm].$listeners|
|
vm-watch |
|[this,vm].$watch(|expOrFn, |callback)
|
vm-set |
|[this,vm].$set(|object, |key, |value)
|
vm-delete |
|[this,vm].$delete(|object, |key)
|
vm-on |
|[this,vm].$on('|event', |callback)
|
vm-once |
|[this,vm].$once('|event', |callback)
|
vm-off |
|[this,vm].$off('|event', |callback)
|
vm-emit |
|[this,vm].$emit('|event'|, […args])
|
vm-mount |
|[this,vm].$mount('|')
|
vm-force-update |
|[this,vm].$forceUpdate()
|
vm-next-tick |
|[this,vm].$nextTick(() => {
|
})
|
vm-destroy |
|[this,vm].$destroy()
|
propsData |
propsData
|
scopedSlots |
scopedSlots
|
computed |
computed
|
render |
render
|
beforeCreate |
beforeCreate
|
created |
created
|
beforeMount |
beforeMount
|
mounted |
mounted
|
beforeUpdate |
beforeUpdate
|
updated |
updated
|
activated |
activated
|
deactivated |
deactivated
|
beforeDestroy |
beforeDestroy
|
destroyed |
destroyed
|
directives |
directives
|
filters |
filters
|
component |
component
|
components |
components
|
mixins |
mixins
|
extends |
extends
|
provide |
provide
|
inject |
inject
|
delimiters |
delimiters
|
functional |
functional
|
model |
model
|
inheritAttrs |
inheritAttrs
|
comments |
comments
|
Vue Router Snippets
Vue Template Router Snippets
| Prefix |
Snippet Content |
vRouterView |
<router-view>|</router-view>
|
vRouterLink |
<router-link |>|</router-link>
|
vRouterLinkTo |
<router-link to="|">|</router-link>
|
to |
to="|"
|
tag |
tag="|"
|
Vue Template Router Pug Snippets
| Prefix |
Snippet Content |
vRouterView |
router-view
|
vRouterLink |
router-link
|
vRouterLinkTo |
router-link(to="|")
|
Vue Script Router Snippets
| Prefix |
Snippet Content |
vNewVueRouter |
const |router = new VueRouter({
|
})
|
vRoutes |
routes: [|]
|
vRouterBeforeEach |
|router.beforeEach((to, from, next) => {
|// to and from are both route objects
})
|
vBeforeEnter |
beforeEnter: (to, from, next) => {
|// ...
}
|
vBeforeRouteEnter |
beforeRouteEnter: (to, from, next) => {
|// ...
}
|
vBeforeRouteLeave |
beforeRouteLeave: (to, from, next) => {
|// ...
}
|
vScrollBehavior |
scrollBehavior (to, from, savedPosition) {
|// ...
}
|
vrouter-push |
this.$router.push(|)
|
vrouter-replace |
this.$router.replace(|)
|
vrouter-go |
this.$router.go(|)
|
alias |
alias
|
mode |
mode
|
children |
children
|
meta |
meta
|
Vuex Snippets
Vue Script Vuex Snippets
| Prefix |
Snippet Content |
vVuexBase |
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
|key: |value
}
});
|
vNewVuexStore |
const |store = new Vuex.Store({
|// ...
})
|
vVuexGetters |
getters: {
value: |value => {
return state.|value;
}
}
|
vVuexMutations |
mutations: {
|updateValue(state, |payload) {
state.|value = |payload;
}
}
|
vVuexAction |
actions: {
|updateValue({commit}, |payload) {
commit(|updateValue, |payload);
}
}
|
vVuexCommitInMutation |
|mutationName() {
this.$store.commit('|mutationName', |payload)
}
|
vVuexDispatchInAction |
|actionName() {
this.$store.dispatch('|actionName', |payload)
}
|
vVuexImport |
import { store } from './store/store';
|
vImportGSAP |
import { TimelineMax, |Ease } from 'gsap'
|
state |
state
|
getters |
getters
|
mutations |
mutations
|
actions |
actions
|
modules |
modules
|
plugins |
plugins
|
commit |
commit
|
dispatch |
dispatch
|
replaceState |
replaceState
|
subscribe |
subscribe
|
registerModule |
registerModule
|
unregisterModule |
unregisterModule
|
hotUpdate |
hotUpdate
|
mapState |
mapState
|
mapGetters |
mapGetters
|
mapActions |
mapActions
|
mapMutations |
mapMutations
|
SSR Snippets
Vue Script Word Snippets
| Prefix |
Snippet Content |
vSsrRenderer |
const |renderer = require('vue-server-renderer').createRenderer()
|
vSsrCreateRenderer |
createRenderer({
|
})
|
renderToString |
renderToString
|
renderToStream |
renderToStream
|
createBundleRenderer |
createBundleRenderer
|
bundleRenderer.renderToString |
bundleRenderer.renderToString
|
bundleRenderer.renderToStream |
bundleRenderer.renderToStream
|
License
MIT
| |
