更新记录

1.0.2（2020-12-22）

添加 Vue2 和 Vue 3 的教程

1.0.1（2020-12-02）

添加新的代码片段

1.0.0（2020-12-01）

增加vue3的代码片段

查看更多

平台兼容性

HBuilderX最低兼容版本
2.7.0

HBuilderX插件通用注意事项

HBuilderX-2.7.12以下版本安装插件市场内的插件后，卸载时需手动卸载，详细教程参考：如何手动卸载插件

Vue 2/3 代码片段 语法高亮 格式化插件

这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。

Vue 2/3 详细教程

附赠一些 Vue 中文教程，希望能帮助你快速上手：

代码片段

Vue 3 代码片段

关键字 JavaScript 代码片段
import import {...} from "@vue/composition-api"
import import {...} from 'vue'
newVue newVue({...})
defineComponent defineComponent({...})
export export default { ... }
setup setup(${...}) {...}
reactive const data = reactive({...})
watch watch(..., ...)
watchFn watch(() => {...})
watchArray watch([...]) => {...}
watchEffect watchEffect(() => {...})
computed computed(() => { get: () => {...}, set: () => {...}})
toRefs toRefs(...)
ref ref(...)
props props(...)
onBeforeMount onBeforeMount(...)
onMounted onMounted(...)
(...)
onUpdated onUpdated(...)
onBeforeUnmount onBeforeUnmount(...)
onUnmounted onUnmounted(...)
onErrorCaptured onErrorCaptured(...)

Vue 2 代码片段

兼容所有常用 Vue 2 代码片段，如下：

关键字 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();


关键字 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=''


关键字 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) { }


关键字 Vuex 代码片段
newVuexStore const store = new Vuex.Store({})
mapGetters import { mapGetters } from 'vuex'
mapMutations import { mapMutations } from 'vuex'
mapActions import { mapActions } from 'vuex'
state state
mutations mutations
actions actions
modules modules
plugins plugins
dispatch dispatch
subscribe subscribe
registerModule registerModule
unregisterModule unregisterModule
hotUpdate hotUpdate


关键字 Nuxt.js 代码片段
nuxt <nuxt/>
nuxtChild <nuxt-child/>
nuxtLink <nuxt-link to=""/>
asyncData asyncData() {}

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...