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(); |

Supported languages

• vue(.vue)
• HTML(.html)
• javascript(.js)
• typescript(.ts)
• pug(.pug)