Слияние кода завершено, страница обновится автоматически
Vue3 Snippets: генераторы и форматировщики кода для Visual Studio Code
Vue3 Snippets содержит подсветку кода, фрагменты кода и форматирование, обычно используемые в vue2 и vue3.
Вы можете включить переключатель «Автоматическое форматирование Vue» в нижней части vscode, который позволяет автоматически форматировать файл vue при его написании. Или щёлкните правой кнопкой мыши, чтобы отобразить раскрывающуюся панель меню, и выберите пункт меню «Форматировать документ», чтобы отформатировать его.
Также вы можете использовать команды «Генератор компонентов Vue» в папке для создания новых шаблонов компонентов.
Фрагменты
Включает большую часть API Vue3. Вы можете ввести «reactive», выбрать «reactive» и нажать ENTER, после чего на экране появится «const data = reactive({...})».
| Префикс | Содержание фрагмента JavaScript |
|---|---|
| import | import {...} from "@vue/composition-api" |
| import | import {...} из '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(...) |
| onBeforeUpdate | onBeforeUpdate(...) |
| onUpdated | onUpdated(...) |
| onBeforeUnmount | onBeforeUnMount(...) |
| onUnmounted | onUnmounted(...) |
| onErrorCaptured | onErrorCaptured(...) |
Все фрагменты кода 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=''. |
| --- | ------------------------------------- |
| routerLink | <router-link></router-link> |
| routerView | <router-view></router-view> |
| to | to="" |
| tag | tag="" |
| newVueRouter | const router = new VueRouter({ }) |
| 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 |
<nuxt/> |
nuxtChild |
<nuxt-child/> |
nuxtLink |
<nuxt-link to=""/> |
asyncData |
asyncData() {} |
Параметры конфигурации следующие:
vue3snippets.arrowParens
vue3snippets.bracketSpacing
vue3snippets.endOfLine
vue3snippets.htmlWhitespaceSensitivity
vue3snippets.insertPragma
vue3snippets.jsxBracketSameLine
vue3snippets.jsxSingleQuote
vue3snippets.printWidth
vue3snippets.proseWrap
vue3snippets.quoteProps
vue3snippets.requirePragma
vue3snippets.semi
vue3snippets.singleQuote
vue3snippets.tabWidth
vue3snippets.trailingComma
vue3snippets.useTabs
vue3snippets.vueIndentScriptAndStyle
| Ключ | Пример | По умолчанию |
|---|---|---|
| vue3snippets.printWidth | 10/20/30/40/n | 80 |
| vue3snippets.tabWidth | 1/2/3/4/n | 2 |
| vue3snippets.singleQuote | false/true | false |
| vue3snippets.trailingComma | none/es5/all | es5 |
| vue3snippets.bracketSpacing | true | true |
| vue3snippets.jsxBracketSameLine | false/true | false |
| vue3snippets.semi | false/true | true |
| vue3snippets.requirePragma | false/true | false |
| vue3snippets.insertPragma | false/true | false |
| vue3snippets.useTabs | false/true | false |
| vue3snippets.proseWrap | preserve/always/never | preserve |
| vue3snippets.arrowParens | avoid/always | always |
| vue3snippets.jsxSingleQuote | false/true | false |
| vue3snippets.htmlWhitespaceSensitivity | css/strict/ignore | css |
| vue3snippets.vueIndentScriptAndStyle | false/true | false |
| vue3snippets.endOfLine | auto/lf/crlf/cr | lf |
| vue3snippets.quoteProps | as-needed/consistent/preserve | as-needed |
Прилагаются некоторые учебные пособия по Vue на китайском языке, надеюсь, они помогут вам быстро начать работу:
|
Eno Yao |
Aaron Xie |
DK Lan |
Yong |
Li Ting |
Xin |
Lemon | [
В запросе текст технической направленности из области разработки и тестирования программного обеспечения. Основной язык текста запроса — английский. Если вам нравится фронтенд, он у вас должен быть! Се, Яо, Юн, Тин, Цзин, Линь, Тянь, Синь, Ся, Ди Кей и Лемон ~ Мы ждём вас всем сердцем!
Если вы считаете это полезным, можете оставить нам сообщение и поставить лайк (https://marketplace.visualstudio.com/items?itemName=Wscats.vue&ssr=false#review-details). Ваша поддержка — наша движущая сила 😀
Vue3 Snippets выпущен под лицензией MIT (http://opensource.org/licenses/MIT).
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )