Files
dotfiles/dot_vim/plugged/friendly-snippets/snippets/frameworks/vue/html.json

422 lines
12 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{
"template": {
"prefix": "template",
"body": [
"<template>",
"\t<${1:div}$2>",
"\t\t$0",
"\t</${1:div}>",
"</template>"
],
"description": "template element"
},
"v-text": {
"prefix": "vText",
"body": [
"v-text=\"${1:msg}\""
],
"description": "Expects: string. Updates the elements textContent."
},
"v-html": {
"prefix": "vHtml",
"body": [
"v-html=\"${1:html}\""
],
"description": "Expects: string. Updates the elements innerHTML."
},
"v-show": {
"prefix": "vShow",
"body": [
"v-show=\"${1:condition}\""
],
"description": "Expects: any"
},
"v-if": {
"prefix": "vIf",
"body": [
"v-if=\"${1:condition}\""
],
"description": "Expects: any"
},
"v-else": {
"prefix": "vElse",
"body": [
"v-else"
],
"description": "Does not expect expression. previous sibling element must have v-if or v-else-if."
},
"v-else-if": {
"prefix": "vElseIf",
"body": [
"v-else-if=\"${1:condition}\""
],
"description": "Expects: any. previous sibling element must have v-if or v-else-if."
},
"v-for-without-key": {
"prefix": "vForWithoutKey",
"body": [
"v-for=\"${1:item} in ${2:items}\""
],
"description": "Expects: Array | Object | number | string"
},
"v-for": {
"prefix": "vFor",
"body": [
"v-for=\"(${1:item}, ${2:index}) in ${3:items}\" :key=\"${4:index}\""
],
"description": "Expects: Array | Object | number | string"
},
"v-on": {
"prefix": "vOn",
"body": [
"v-on:${1:event}=\"${2:handle}\""
],
"description": "Expects: Function | Inline Statement"
},
"v-on-shortcut": {
"prefix": "@",
"body": [
"@${1:event}=\"${2:handle}\""
],
"description": "v-on shortcut from vue 3"
},
"v-bind": {
"prefix": "vBind",
"body": [
"v-bind$1=\"${2}\""
],
"description": "Expects: any (with argument) | Object (without argument)"
},
"v-model": {
"prefix": "vModel",
"body": [
"v-model=\"${1:something}\""
],
"description": "Expects: varies based on value of form inputs element or output of components"
},
"v-slot": {
"prefix": "vSlot",
"body": [
"v-slot$1=\"${2}\""
],
"description": "Expects: JavaScript expression that is valid in a function argument position (supports destructuring in supported environments). Optional - only needed if expecting props to be passed to the slot."
},
"v-pre": {
"prefix": "vPre",
"body": [
"v-pre"
],
"description": "Does not expect expression"
},
"v-cloak": {
"prefix": "vCloak",
"body": [
"v-cloak"
],
"description": "Does not expect expression"
},
"v-once": {
"prefix": "vOnce",
"body": [
"v-once"
],
"description": "Does not expect expression"
},
"key": {
"prefix": "key",
"body": [
":key=\"${1:key}\""
],
"description": "Expects: string. Children of the same common parent must have unique keys. Duplicate keys will cause render errors."
},
"ref": {
"prefix": "ref",
"body": [
"ref=\"${1:reference}\"$0"
],
"description": "Expects: string. ref is used to register a reference to an element or a child component. The reference will be registered under the parent components $refs object. If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be component instance."
},
"slotA": {
"prefix": "slotA",
"body": [
"slot=\"$1\"$0"
],
"description": "slot=''. Expects: string. Used on content inserted into child components to indicate which named slot the content belongs to."
},
"slotE": {
"prefix": "slotE",
"body": [
"<slot$1>$2</slot>$0"
],
"description": "<slot></slot>. Expects: string. Used on content inserted into child components to indicate which named slot the content belongs to."
},
"slotScope": {
"prefix": "slotScope",
"body": [
"slot-scope=\"$1\"$0"
],
"description": "Used to denote an element or component as a scoped slot. The attributes value should be a valid JavaScript expression that can appear in the argument position of a function signature. This means in supported environments you can also use ES2015 destructuring in the expression. Serves as a replacement for scope in 2.5.0+."
},
"scope": {
"prefix": "scope",
"body": [
"scope=\"${1:this api replaced by slot-scope in 2.5.0+}\"$0"
],
"description": "Used to denote a <template> element as a scoped slot, which is replaced by `slot-scope` in 2.5.0+."
},
"component": {
"prefix": "component",
"body": [
"<component :is=\"${1:componentId}\"></component>$0"
],
"description": "component element"
},
"keep-alive": {
"prefix": "keepAlive",
"body": [
"<keep-alive$1>",
"$2",
"</keep-alive>$0"
],
"description": "keep-alive element"
},
"transition": {
"prefix": "transition",
"body": [
"<transition$1>",
"$2",
"</transition>$0"
],
"description": "transition element"
},
"transition-group": {
"prefix": "transitionGroup",
"body": [
"<transition-group$1>",
"$2",
"</transition-group>"
],
"description": "transition-group element"
},
"enter-class": {
"prefix": "enterClass",
"body": [
"enter-class=\"$1\"$0"
],
"description": "enter-class=''. Expects: string."
},
"leave-class": {
"prefix": "leaveClass",
"body": [
"leave-class=\"$1\"$0"
],
"description": "leave-class=''. Expects: string."
},
"appear-class": {
"prefix": "appearClass",
"body": [
"appear-class=\"$1\"$0"
],
"description": "appear-class=''. Expects: string."
},
"enter-to-class": {
"prefix": "enterToClass",
"body": [
"enter-to-class=\"$1\"$0"
],
"description": "enter-to-class=''. Expects: string."
},
"leave-to-class": {
"prefix": "leaveToClass",
"body": [
"leave-to-class=\"$1\"$0"
],
"description": "leave-to-class=''. Expects: string."
},
"appear-to-class": {
"prefix": "appearToClass",
"body": [
"appear-to-class=\"$1\"$0"
],
"description": "appear-to-class=''. Expects: string."
},
"enter-active-class": {
"prefix": "enterActiveClass",
"body": [
"enter-active-class=\"$1\"$0"
],
"description": "enter-active-class=''. Expects: string."
},
"leave-active-class": {
"prefix": "leaveActiveClass",
"body": [
"leave-active-class=\"$1\"$0"
],
"description": "leave-active-class=''. Expects: string."
},
"appear-active-class": {
"prefix": "appearActiveClass",
"body": [
"appear-active-class=\"$1\"$0"
],
"description": "appear-active-class=''. Expects: string."
},
"before-enter": {
"prefix": "beforeEnterEvent",
"body": [
"@before-enter=\"$1\"$0"
],
"description": "@before-enter=''"
},
"before-leave": {
"prefix": "beforeLeaveEvent",
"body": [
"@before-leave=\"$1\"$0"
],
"description": "@before-leave=''"
},
"before-appear": {
"prefix": "beforeAppearEvent",
"body": [
"@before-appear=\"$1\"$0"
],
"description": "@before-appear=''"
},
"enter": {
"prefix": "enterEvent",
"body": [
"@enter=\"$1\"$0"
],
"description": "@enter=''"
},
"leave": {
"prefix": "leaveEvent",
"body": [
"@leave=\"$1\"$0"
],
"description": "@leave=''"
},
"appear": {
"prefix": "appearEvent",
"body": [
"@appear=\"$1\"$0"
],
"description": "@appear=''"
},
"after-enter": {
"prefix": "afterEnterEvent",
"body": [
"@after-enter=\"$1\"$0"
],
"description": "@after-enter=''"
},
"after-leave": {
"prefix": "afterLeaveEvent",
"body": [
"@after-leave=\"$1\"$0"
],
"description": "@after-leave=''"
},
"after-appear": {
"prefix": "afterAppearEvent",
"body": [
"@after-appear=\"$1\"$0"
],
"description": "@after-appear=''"
},
"enter-cancelled": {
"prefix": "enterCancelledEvent",
"body": [
"@enter-cancelled=\"$1\"$0"
],
"description": "@enter-cancelled=''"
},
"leave-cancelled": {
"prefix": "leaveCancelledEvent",
"body": [
"@leave-cancelled=\"$1\"$0"
],
"description": "@leave-cancelled='' (v-show only)"
},
"appear-cancelled": {
"prefix": "appearCancelledEvent",
"body": [
"@appear-cancelled=\"$1\"$0"
],
"description": "@appear-cancelled=''"
},
"routerLink": {
"prefix": "routerLink",
"body": [
"<router-link $1>$2</router-link>$0"
],
"description": "router-link element"
},
"routerLinkTo": {
"prefix": "routerLinkTo",
"body": [
"<router-link to=\"$1\">$2</router-link>$0"
],
"description": "<router-link to=''></router-link>. router-link element"
},
"to": {
"prefix": "to",
"body": [
"to=\"$1\"$0"
],
"description": "to=''"
},
"tag": {
"prefix": "tag",
"body": [
"tag=\"$1\"$0"
],
"description": "tag=''"
},
"routerView": {
"prefix": "routerView",
"body": [
"<router-view>$1</router-view>$0"
],
"description": "router-view element"
},
"nuxt": {
"prefix": "nuxt",
"body": [
"<nuxt/>"
],
"description": "This component is used only in layouts to display the page components."
},
"nuxtChild": {
"prefix": "nuxtChild",
"body": [
"<nuxt-child $1/>$0"
],
"description": "This component is used for displaying the children components in a nested route."
},
"nuxtLink": {
"prefix": "nuxtLink",
"body": [
"<nuxt-link ${1|to,:to|}=\"$2\">$0</nuxt-link>"
],
"description": "This component is used to provide navigations between page components."
},
"teleport": {
"prefix": "teleport",
"body": [
"<Teleport to=\"$1\">",
"$0",
"</Teleport>"
],
"description": "<Teleport> is a built-in component that allows us to 'teleport' a part of a component's template into a DOM node that exists outside the DOM hierarchy of that component."
},
"suspense": {
"prefix": "suspense",
"body": [
"<Suspense>",
"$0",
"</Suspense>"
],
"description": "<Suspense> will render its default slot content in memory. If any async dependencies are encountered during the process, it will enter a pending state."
}
}