Skip to content

Commit 019cbd5

Browse files
authored
feat: Add vue-template snippets (#11)
* Add vue-template snippets #2 Snippets: - vfor - vmodel - von - vel-props - vslot-named - vimg - vstyle - vstyle-obj - vclass - vclass-ter - vtrans - vtrans-group - vrlink - vrlink-param
1 parent f3a892c commit 019cbd5

File tree

2 files changed

+96
-0
lines changed

2 files changed

+96
-0
lines changed

package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
{
2626
"language": "vue",
2727
"path": "./snippets/vue.code-snippets"
28+
},
29+
{
30+
"language": "html",
31+
"path": "./snippets/vue-template.code-snippets"
2832
}
2933
]
3034
}

snippets/vue-template.code-snippets

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
{
2+
"Vue v-for": {
3+
"prefix": "vfor",
4+
"body": [
5+
"<${1:div} v-for=\"${2:item} in ${2:item}s\" :key=\"${2:item}.id\">",
6+
"\t{{ ${2:item} }}",
7+
"</${1:div}>"
8+
],
9+
"description": "v-for statement"
10+
},
11+
"Vue v-model Directive": {
12+
"prefix": "vmodel",
13+
"body": ["<input v-model=\"${1:data}\" type=\"text\" />"],
14+
"description": "v-model directive"
15+
},
16+
"Vue v-on Shortcut Directive": {
17+
"prefix": "von",
18+
"body": ["@click=\"${1:handler}(${2})\""],
19+
"description": "v-on click handler"
20+
},
21+
"Vue Component with Props Binding": {
22+
"prefix": "vel-props",
23+
"body": ["<${1:component} :${1:propName}=\"${0}\"></${1:component}>"],
24+
"description": "component element with props"
25+
},
26+
"Vue Named Slot": {
27+
"prefix": "vslot-named",
28+
"body": ["<template v-slot:${0:name}>${1:defaultcontent}</template>"],
29+
"description": "named slot"
30+
},
31+
"Vue Image Source Binding": {
32+
"prefix": "vimg",
33+
"body": [
34+
"<img :src=\"${1:imageSrc}\" :alt=\"${2:altText}\"/>"
35+
],
36+
"description": "image source binding"
37+
},
38+
"Vue Style Binding": {
39+
"prefix": "vstyle",
40+
"body": [":style=\"{ fontSize: ${2:data} + 'px' }\""],
41+
"description": "vue inline style binding"
42+
},
43+
"Vue Style Binding Object": {
44+
"prefix": "vstyle-obj",
45+
"body": [
46+
":style=\"[${2:styleObjectA}, ${3:styleObjectB]}\""
47+
],
48+
"description": "vue inline style binding, objects"
49+
},
50+
"Vue Class Binding": {
51+
"prefix": "vclass",
52+
"body": [":class=\"{ '${2:classList}': ${1:condition} }\""],
53+
"description": "vue class binding"
54+
},
55+
"Vue Class Binding Ternary": {
56+
"prefix": "vclass-ter",
57+
"body": [
58+
":class=\"[${1:condition} ? '${2:classListOnTrue}' : '${3:classListOnFalse}']\""
59+
],
60+
"description": "vue ternary class binding"
61+
},
62+
"Vue Transition": {
63+
"prefix": "vtrans",
64+
"body": [
65+
"<Transition name=\"${1:transitionName}\">",
66+
"\t${0}",
67+
"</Transition>"
68+
],
69+
"description": "vue transition component"
70+
},
71+
"Vue Transition Group": {
72+
"prefix": "vtrans-group",
73+
"body": [
74+
"<TransitionGroup name=\"${1:transitionName}\">",
75+
"\t${0}",
76+
"</TransitionGroup>"
77+
],
78+
"description": "vue transition group component"
79+
},
80+
"Vue Routing Link": {
81+
"prefix": "vrlink",
82+
"body": ["<router-link to=\"/${1:path}\">${2:linkTitle}</router-link>"],
83+
"description": "vue router link"
84+
},
85+
"Vue Routing Link with param": {
86+
"prefix": "vrlink-param",
87+
"body": [
88+
"<router-link :to=\"`/${1:path}/${${2:param}}`\">${3:linkTitle}</router-link>"
89+
],
90+
"description": "vue router link with param"
91+
},
92+
}

0 commit comments

Comments
 (0)