Vue 3 Snippets for Visual Studio Code
Vue 3 代码片段用于 Visual Studio Code
This extension adds Vue 2 Snippets and Vue 3 Snippets into Visual Studio Code.
此扩展将 Vue 2 代码片段和 Vue 3 代码片段添加到 Visual Studio Code 中。
这个插件基于最新的 Vue 2 及 Vue 3 的 API 添加了 Code Snippets。
It looks like: 看起来像：
Snippets 片段
Including all of the API of Vue.js 2 and Vue.js 3. The code snippet of the extension is shown in the following table. You don't need to remember something, just write code as usual in vscode. You can type vcom, choose VueConfigOptionMergeStrategies, and press ENTER, then Vue.config.optionMergeStrategies appear on the screen.
包括 Vue.js 2 和 Vue.js 3 的所有 API。扩展的代码片段如下表所示。你无需记住什么，只需像往常一样在 vscode 中编写代码。你可以输入 vcom ，选择 VueConfigOptionMergeStrategies ，然后按 ENTER，接着 Vue.config.optionMergeStrategies 显示在屏幕上。
这个插件包含了所有的 Vue.js 2 和 Vue.js 3 的 api 对应的代码片段。插件的代码片段如下表格所示，你不需要记住什么snippets，就像往常一样在 vscode 里写代码就好了。比如你可以键入 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 将为您提供 this.$data 和 vm.$data 的选择。
如下表所示，vmData 的内容是 ${this, vm}.$data，这表明这个 snippet 会提供 this.$data and vm.$data 两种选项供你选择。
Vue 3 Snippets Vue 3 代码片段
| Prefix 前缀 |
JavaScript Snippet Content
JavaScript 代码片段内容 |
importFromVue |
import ... from 'vue' |
reactive |
const obj = reactive() |
readonly |
const obj = readonly() |
setup |
setup() { } |
onBeforeMount |
onBeforeMount(() => {}) |
onMounted |
onMounted(() => {}) |
onBeforeUpdate |
onBeforeUpdate(() => {}) |
onUpdated |
onUpdated(() => {}) |
onBeforeUnmount |
onBeforeUnmount(() => {}) |
onUnmounted |
onUnmounted(() => {}) |
onErrorCaptured |
onErrorCaptured(() => {}) |
onRenderTracked |
onRenderTracked(() => {}) |
onRenderTriggered |
onRenderTriggered(() => {}) |
| Prefix 前缀 |
HTML Snippet Content HTML 片段内容 |
teleport |
<teleport to='' /> |
componentIs |
<component :is=''></component> |
Vue 2 Snippets Vue 2 代码片段
| Prefix 前缀 |
JavaScript Snippet Content
JavaScript 代码片段内容 |
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(); |
| Prefix 前缀 |
HTML Snippet Content HTML 片段内容 |
template |
<template></template> |
script |
<script></script> |
style |
<style></style> |
vText |
v-text=msg |
vHtml |
v-html=html |
vShow |
v-show |
vIf |
v-if |
vElse |
v-else |
vElseIf |
v-else-if |
vForWithoutKey |
v-for |
vFor |
v-for="" :key="" |
vOn |
v-on |
vBind |
v-bind |
vModel |
v-model |
vPre |
v-pre |
vCloak |
v-cloak |
vOnce |
v-once |
key |
:key |
ref |
ref |
slotA |
slot="" |
slotE |
<slot></slot> |
slotScope |
slot-scope="" |
component |
<component :is=''></component> |
keepAlive |
<keep-alive></keep-alive> |
transition |
<transition></transition> |
transitionGroup |
<transition-group></transition-group> |
enterClass |
enter-class='' |
leaveClass |
leave-class='' |
appearClass |
appear-class='' |
enterToClass |
enter-to-class='' |
leaveToClass |
leave-to-class='' |
appearToClass |
appear-to-class='' |
enterActiveClass |
enter-active-class='' |
leaveActiveClass |
leave-active-class='' |
appearActiveClass |
appear-active-class='' |
beforeEnterEvent |
@before-enter='' |
beforeLeaveEvent |
@before-leave='' |
beforeAppearEvent |
@before-appear='' |
enterEvent |
@enter='' |
leaveEvent |
@leave='' |
appearEvent |
@appear='' |
afterEnterEvent |
@after-enter='' |
afterLeaveEvent |
@after-leave='' |
afterAppearEvent |
@after-appear='' |
enterCancelledEvent |
@enter-cancelled='' |
leaveCancelledEvent |
@leave-cancelled='' |
appearCancelledEvent |
@appear-cancelled='' |
| Prefix 前缀 |
Vue Router Snippet Content
Vue Router 代码片段内容 |
routerLink |
<router-link></router-link> |
routerView |
<router-view></router-view> |
to |
to="" |
tag |
tag="" |
newVueRouter |
const router = newVueRouter({ }) |
routerBeforeEach |
router.beforeEach((to, from, next) => { } |
routerBeforeResolve |
router.beforeResolve((to, from, next) => { } |
routerAfterEach |
router.afterEach((to, from) => { } |
routerPush |
router.push() |
routerReplace |
router.replace() |
routerGo |
router.back() |
routerBack |
router.push() |
routerForward |
router.forward() |
routerGetMatchedComponents |
router.getMatchedComponents() |
routerResolve |
router.resolve() |
routerAddRoutes |
router.addRoutes() |
routerOnReady |
router.onReady() |
routerOnError |
router.onError() |
routes |
routes: [] |
beforeEnter |
beforeEnter: (to, from, next) => { } |
beforeRouteEnter |
beforeRouteEnter (to, from, next) { } |
beforeRouteLeave |
beforeRouteLeave (to, from, next) { } |
scrollBehavior |
scrollBehavior (to, from, savedPosition) { } |
| Prefix 前缀 |
Vuex Snippet Content Vuex 代码片段内容 |
newVuexStore |
const store = new Vuex.Store({ }) |
| Prefix 前缀 |
Nuxt.js Snippet Content Nuxt.js 代码片段内容 |
nuxt |
<nuxt/> |
nuxtChild |
<nuxt-child/> |
nuxtLink |
<nuxt-link to=""/> |
asyncData |
asyncData() {} |
Supported languages 支持的语言
- vue(.vue)
- HTML(.html)
- javascript(.js)
- typescript(.ts)
- pug(.pug)
Base on 基础上
vue-syntax-highlight (vue.tmLanguage)
2020/11/30 (1.0.0)
- Add some Vue 3 snippets
添加一些 Vue 3 代码片段
2020/07/27 (0.1.12)
- Add snippets and fix bugs
添加代码片段并修复错误
2019/01/27 (0.1.11)
2018/12/19 (0.1.10)
- Update snippets (like
watchWithOptions / asyncData / nuxt / nuxtChild / nuxtLink and so on)
更新片段（如 watchWithOptions / asyncData / nuxt / nuxtChild / nuxtLink 等）
2018/09/04 (0.1.9)
2018/06/24 (0.1.8)
2018/06/05 (0.1.7)
- Update snippets, add choices(
this and vm) to snippets that begin with vm.
更新代码片段，为以 vm 开头的代码片段添加选项（ this 和 vm ）。
2018/05/22 (0.1.6)
2017/09/17 (0.1.5)
- Fix and update snippets
修复和更新代码片段
2017/03/12 (0.1.1)
- Add support .pug files (thanks to Gregory Bass)
添加对 .pug 文件的支持（感谢 Gregory Bass）
2017/01/01 (0.1.0)
- Update some snippets 更新一些代码片段
2016/12/31 (0.0.10)
- Update newest api snippets (like
v-else-if / Vue.config.ignoredElements and so on)
更新最新的 API 代码片段（如 v-else-if / Vue.config.ignoredElements 等）
- Fix a bug (before:
vm.off,after:vm.$off)
修复一个错误（之前： vm.off ，之后： vm.$off ）
2016/12/15 (0.0.9)
- Update newest syntax highlight file
更新最新的语法高亮文件
2016/11/13 (0.0.8)
- Add some snippets 添加一些代码片段
- Change this extension's logo to vue's logo
将此扩展的标志更改为 Vue 的标志
- Update readme 更新自述文件
2016/10/18 (0.0.7)
- Fix
v-for snippet (thanks to Daniel D)
修复 v-for 代码片段（感谢丹尼尔·D）
2016/10/18 (0.0.6)
2016/10/16 (0.0.5)
- Fix this extension can not be downloaded with the latest version(1.6.1) of VS code
修复此扩展无法与最新版本（1.6.1） 的 VS 代码下载。
2016/10/15 (0.0.4)
2016/09/30 (0.0.1)
- Add code snippets 添加代码片段
- Add syntax highlight 添加语法高亮
| |
