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