加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
vue-html.code-snippets 22.24 KB
一键复制 编辑 原始数据 按行查看 历史
凌雲 提交于 2020-07-10 21:37 . 主要文件
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732
{
"#ifdef": {
"body": [
"<!-- #ifdef ${1|APP-PLUS,MP,MP-ALIPAY,MP-BAIDU,MP-WEIXIN,MP-QQ,H5|} -->",
"$0",
"<!-- #endif -->"
],
"prefix": "ifdef",
"project": "uni-app",
"scope": "vue-html"
},
"#ifndef": {
"body": [
"<!-- #ifndef ${1|APP-PLUS,MP,MP-ALIPAY,MP-BAIDU,MP-WEIXIN,MP-QQ,H5|} -->",
"$0",
"<!-- #endif -->"
],
"prefix": "ifndef",
"project": "uni-app",
"scope": "vue-html"
},
"Vue Base": {
"body": [
"<template>",
"\t<${1:div}>",
"",
"\t</${1:div}>",
"</template>",
"",
"<script>",
"\texport default {",
"\t\t${0}",
"\t}",
"</script>",
"",
"<style scoped>",
"",
"</style>"
],
"description": "Base for Vue File",
"prefix": "vbase",
"scope": "vue-html"
},
"Vue Class Binding": {
"body": [
"<${1|div|} :class=\"{ ${2:className}: ${3:data} }\"><,${1:div}>"
],
"description": "vue class binding",
"prefix": "vclass",
"scope": "vue-html"
},
"Vue Class Binding Object": {
"body": [
"<${1|div|} :class=\"[${2:classNameA}, ${3:classNameB}]\"><,${1:div}>"
],
"description": "vue class binding",
"prefix": "vclass-obj",
"scope": "vue-html"
},
"Vue Component with Props Binding": {
"body": [
"<${1|component|} :${1:propName}=\"${0}\"><,${1:component}>"
],
"description": "component element with props",
"prefix": "vel-props",
"scope": "vue-html"
},
"Vue Image Source Binding": {
"body": [
"<img :src=\"'/path/to/images/' + ${1:fileName}\" alt=\"${2:altText}\"/>"
],
"description": "image source binding",
"prefix": "vsrc",
"scope": "vue-html"
},
"Vue Multiple Conditional Class Bindings": {
"body": [
"<${1|div|} :class=\"[${2:classNameA}, {${3:classNameB} : ${4:condition}}]\"><,${1:div}>"
],
"description": "vue multiple conditional class bindings",
"prefix": "vclass-obj-mult",
"scope": "vue-html"
},
"Vue Nuxt Routing Link": {
"body": [
"<nuxt-link to=\"/${1:page}\">${1:page}</nuxt-link>"
],
"description": "nuxt routing link",
"prefix": "vnuxtl",
"scope": "vue-html"
},
"Vue Style Binding": {
"body": [
"<${1|div|} :style=\"{ fontSize: ${2:data} + 'px' }\"><,${1:div}>"
],
"description": "vue inline style binding",
"prefix": "vstyle",
"scope": "vue-html"
},
"Vue Style Binding Object": {
"body": [
"<${1|div|} :style=\"[${2:styleObjectA}, ${3:styleObjectB]}\"><,${1:div}>"
],
"description": "vue inline style binding, objects",
"prefix": "vstyle-obj",
"scope": "vue-html"
},
"Vue Transition Component with JavaScript Hooks": {
"body": [
"<transition",
"\tmode=\"out-in\"",
"\t@before-enter=\"beforeEnter\"",
"\t@enter=\"enter\"",
"",
"\t@before-leave=\"beforeLeave\"",
"\t@leave=\"leave\"",
"\t:css=\"false\">",
"",
"</transition>"
],
"description": "transition component js hooks",
"prefix": "vanim",
"scope": "vue-html"
},
"Vue v-for": {
"body": [
"<${1:div} v-for=\"${2:item} in ${2:item}s\" :key=\"${2:item}.id\">",
"\t{{ ${2:item} }}",
"</${1:div}>"
],
"description": "vfor statement",
"prefix": "vfor",
"scope": "vue-html"
},
"Vue v-model Directive": {
"body": [
"<input v-model=\"${1:data}\" type=\"text\" />"
],
"description": "v-model directive",
"prefix": "vmodel",
"scope": "vue-html"
},
"Vue v-model Number Directive": {
"body": [
"<input v-model.number=\"${1:numData}\" type=\"number\" step=\"1\" />"
],
"description": "v-model directive number input",
"prefix": "vmodel-num",
"scope": "vue-html"
},
"Vue v-on Shortcut Directive": {
"body": [
"@click=\"${1:handler}(${2:arg}, $event)\""
],
"description": "v-on click handler with arguments",
"prefix": "von",
"scope": "vue-html"
},
"uAccordion": {
"body": [
"<view class=\"uni-list\">",
"\t<view class=\"uni-list-cell uni-collapse\" v-for=\"(item,index) in list$1\" :key=\"index\">",
"\t\t<view class=\"uni-list-cell-navigate uni-navigate-bottom\" :class=\"item.show ? 'uni-active' : ''\" @click=\"trigerCollapse$0(index)\">",
"\t\t\t折叠面板{{index}}",
"\t\t</view>",
"\t\t<view class=\"uni-collapse-content\" :class=\"item.show ? 'uni-active' : ''\">",
"\t\t\t<view class=\"page-pd\">",
"\t\t\t\t<view class=\"uni-h1\">hello uni-app</view>",
"\t\t\t\t<view class=\"uni-h2\">hello uni-app</view>",
"\t\t\t\t<view class=\"uni-h3\">hello uni-app</view>",
"\t\t\t</view>",
"\t\t</view>",
"\t</view>",
"</view>"
],
"prefix": "uaccordion",
"project": "uni-app",
"scope": "vue-html"
},
"uAudio": {
"body": [
"<audio :src=\"$1\" :poster=\"$0\" :name=\"$2\" :author=\"$3\" :action=\"$4\" controls></audio>"
],
"prefix": "uaudio",
"project": "uni-app",
"scope": "vue-html"
},
"uBadge": {
"body": [
"<uni-badge text=\"$1\" type=\"$2\"></uni-badge>"
],
"prefix": "ubadge",
"project": "uni-app",
"scope": "vue-html"
},
"uButton": {
"body": [
"<button type=\"primary\">$1</button>"
],
"prefix": "ubutton",
"project": "uni-app",
"scope": "vue-html"
},
"uCalendar": {
"body": [
"<uni-calendar lunar=\"\" @change=\"$1\" @to-click=\"$2\"></uni-calendar>"
],
"prefix": "ucalendar",
"project": "uni-app",
"scope": "vue-html"
},
"uCard": {
"body": [
"<uni-card title=\"标题文字\" thumbnail=\"$1\" extra=\"额外信息$2\" note=\"Tips$3\">",
"\t内容主体,可自定义内容及样式$4",
"</uni-card>"
],
"prefix": "ucard",
"project": "uni-app",
"scope": "vue-html"
},
"uCheckbox": {
"body": [
"<label class=\"checkbox\">",
"\t<checkbox value=\"$1\" checked= />$0",
"</label>"
],
"prefix": "ucheckbox",
"project": "uni-app",
"scope": "vue-html"
},
"uCollapse": {
"body": [
"<uni-collapse @change=\"$1\">",
"\t<uni-collapse-item title=\"$2\">",
"\t\t内容$3",
"\t</uni-collapse-item>",
"</uni-collapse>"
],
"prefix": "uCollapse",
"project": "uni-app",
"scope": "vue-html"
},
"uCountDown": {
"body": [
"<uni-countdown font-color=\"$1\" bgr-color=\"$2\" timer=\"$3\"></uni-countdown>"
],
"prefix": "ucountdown",
"project": "uni-app",
"scope": "vue-html"
},
"uDrawer": {
"body": [
"<uni-drawer :visible=\"$1\">",
"\t<view style=\"padding:30upx;\">",
"\t\t$2",
"\t</view>",
"</uni-drawer>"
],
"prefix": "uDrawer",
"project": "uni-app",
"scope": "vue-html"
},
"uEditor": {
"body": [
"<editor placeholder=\"$1\"></editor>"
],
"prefix": "uEditor",
"project": "uni-app",
"scope": "vue-html"
},
"uForm": {
"body": [
"<form @submit=\"formSubmit\" @reset=\"formReset\">",
"\t<view class=\"section section_gap\">",
"\t\t<view class=\"section__title\">switch$1</view>",
"\t\t<switch name=\"switch\" />",
"\t</view>",
"\t<view class=\"section section_gap\">",
"\t\t<view class=\"section__title\">slider</view>",
"\t\t<slider name=\"slider\" show-value></slider>",
"\t</view>",
"\t<view class=\"section\">",
"\t\t<view class=\"section__title\">input</view>",
"\t\t<input name=\"input\" placeholder=\"please input here\" />",
"\t</view>",
"\t<view class=\"section section_gap\">",
"\t\t<view class=\"section__title\">radio</view>",
"\t\t<radio-group name=\"radio-group\">",
"\t\t<label>",
"\t\t\t<radio value=\"radio1\" />radio1</label>",
"\t\t<label>",
"\t\t\t<radio value=\"radio2\" />radio2</label>",
"\t\t</radio-group>",
"\t</view>",
"\t<view class=\"section section_gap\">",
"\t\t<view class=\"section__title\">checkbox</view>",
"\t\t<checkbox-group name=\"checkbox\">",
"\t\t\t<label>",
"\t\t\t\t<checkbox value=\"checkbox1\" />checkbox1</label>",
"\t\t\t<label>",
"\t\t\t\t<checkbox value=\"checkbox2\" />checkbox2</label>",
"\t\t</checkbox-group>",
"\t</view>",
"\t<view class=\"btn-area\">",
"\t\t<button formType=\"submit\">Submit</button>",
"\t\t<button formType=\"reset\">Reset</button>",
"\t</view>",
"</form>"
],
"prefix": "uform",
"project": "uni-app",
"scope": "vue-html"
},
"uGrid": {
"body": [
"<uni-grid :data=\"$1\"></uni-grid>"
],
"prefix": "ugrid",
"project": "uni-app",
"scope": "vue-html"
},
"uIcon": {
"body": [
"<uni-icon type=\"$1\"></uni-icon>"
],
"prefix": "uicon",
"project": "uni-app",
"scope": "vue-html"
},
"uImage": {
"body": [
"<image src=\"$1\" mode=\"$2\">$0</image>"
],
"prefix": "uimage",
"project": "uni-app",
"scope": "vue-html"
},
"uInput": {
"body": [
"<input type=\"text$1\" value=\"$0\" />"
],
"prefix": "uinput",
"project": "uni-app",
"scope": "vue-html"
},
"uList": {
"body": [
"<uni-list>",
"\t<uni-list-item title=\"$1\" note=\"$2\"></uni-list-item>",
"\t<uni-list-item title=\"$3\" note=\"$4\"></uni-list-item>",
"</uni-list>"
],
"prefix": "ulist",
"project": "uni-app",
"scope": "vue-html"
},
"uListMedia": {
"body": [
"<view class=\"uni-list\">",
"\t<view class=\"uni-list-cell\" hover-class=\"uni-list-cell-hover\" v-for=\"(item,index) in list$1\" :key=\"index\">",
"\t\t<view class=\"uni-media-list\">",
"\t\t\t<image class=\"uni-media-list-logo\" :src=\"item.img$2\"></image>",
"\t\t\t<view class=\"uni-media-list-body\">",
"\t\t\t\t<view class=\"uni-media-list-text-top\">{{item.title$3}}</view>",
"\t\t\t\t<view class=\"uni-media-list-text-bottom uni-ellipsis\">{{item.content$4}}</view>",
"\t\t\t</view>",
"\t\t</view>",
"\t</view>",
"</view>"
],
"prefix": "ulistmedia",
"project": "uni-app",
"scope": "vue-html"
},
"uLoadMore": {
"body": [
"<uni-load-more :loadingType=\"$1\" :contentText=\"$2\"></uni-load-more>"
],
"prefix": "uloadmore",
"project": "uni-app",
"scope": "vue-html"
},
"uMap": {
"body": [
"<map :latitude=\"$1\" :longitude=\"$0\"></map>"
],
"prefix": "umap",
"project": "uni-app",
"scope": "vue-html"
},
"uNavBar": {
"body": [
"<uni-nav-bar left-icon=\"back\" left-text=\"返回\" right-text=\"菜单\" title=\"标题$1\"></uni-nav-bar>"
],
"prefix": "unavbar",
"project": "uni-app",
"scope": "vue-html"
},
"uNavigator": {
"body": [
"<navigator url=\"$1\">$0</navigator>"
],
"prefix": "unavigator",
"project": "uni-app",
"scope": "vue-html"
},
"uNoticeBar": {
"body": [
"<uni-notice-bar single=\"$1\" text=\"$2\"></uni-notice-bar>"
],
"prefix": "uNoticeBar",
"project": "uni-app",
"scope": "vue-html"
},
"uNumberBox": {
"body": [
"<uni-number-box @change=\"$1\"></uni-number-box>"
],
"prefix": "unumberbox",
"project": "uni-app",
"scope": "vue-html"
},
"uPagination": {
"body": [
"<uni-pagination title=\"$1\" show-icon=\"$2\" total=\"$3\" current=\"$4\"></uni-pagination>"
],
"prefix": "uPagination",
"project": "uni-app",
"scope": "vue-html"
},
"uPicker": {
"body": [
"<picker mode=\"$1\" :range=\"$2\" @change=\"$3\">",
"\t<view>picker组件</view>",
"</picker>"
],
"prefix": "upicker",
"project": "uni-app",
"scope": "vue-html"
},
"uPickerView": {
"body": [
"<picker-view indicator-style=\"height: 50px;\" :value=\"value$1\" @change=\"bindChange\">",
"\t<picker-view-column>",
"\t\t$0",
"\t</picker-view-column>",
"\t<picker-view-column>",
"\t\t$2",
"\t</picker-view-column>",
"\t<picker-view-column>",
"\t\t",
"\t</picker-view-column>",
"</picker-view>"
],
"prefix": "upickerview",
"project": "uni-app",
"scope": "vue-html"
},
"uPopup": {
"body": [
"<uni-popup msg=\"$1\" :show=\"true$2\" type=\"middle$3\"></uni-popup>"
],
"prefix": "upopup",
"project": "uni-app",
"scope": "vue-html"
},
"uProductList": {
"body": [
"<view class=\"uni-product-list\">",
"\t<view class=\"uni-product\" v-for=\"(product,index) in productList$1\" :key=\"index\">",
"\t\t<view class=\"image-view\">",
"\t\t\t<image v-if=\"renderImage\" class=\"uni-product-image\" :src=\"product.image\"></image>",
"\t\t</view>",
"\t\t<view class=\"uni-product-title\">{{product.title}}</view>",
"\t\t<view class=\"uni-product-price\">",
"\t\t\t<text class=\"uni-product-price-favour\">¥{{product.originalPrice}}</text>",
"\t\t\t<text class=\"uni-product-price-original\">¥{{product.favourPrice}}</text>",
"\t\t\t<text class=\"uni-product-tip\">{{product.tip}}</text>",
"\t\t</view>",
"\t</view>",
"</view>"
],
"prefix": "uproductlist",
"project": "uni-app",
"scope": "vue-html"
},
"uProgress": {
"body": [
" <progress percent=\"$1\" show-info$0 />"
],
"prefix": "uprogress",
"project": "uni-app",
"scope": "vue-html"
},
"uRadio": {
"body": [
"<label class=\"radio\">",
"\t<radio value=\"$1\" checked= />$0",
"</label>"
],
"prefix": "uradio",
"project": "uni-app",
"scope": "vue-html"
},
"uRate": {
"body": [
"<uni-rate value=\"$1\"></uni-rate>"
],
"prefix": "uRate",
"project": "uni-app",
"scope": "vue-html"
},
"uRichText": {
"body": [
"<rich-text :nodes=\"$1\"></rich-text>"
],
"prefix": "urichtext",
"project": "uni-app",
"scope": "vue-html"
},
"uScrollView": {
"body": [
"<scroll-view scroll-y$1>",
"\t<view>$0</view>",
"\t<view></view>",
"\t<view></view>",
"\t<view></view>",
"</scroll-view>"
],
"prefix": "uscrollview",
"project": "uni-app",
"scope": "vue-html"
},
"uSegmentedControl": {
"body": [
"<uni-segmented-control :current=\"current$1\" :values=\"$0\" @clickItem=\"$2\"></uni-segmented-control>",
"<view class=\"content\">",
"\t<view v-show=\"current === 0\">",
"\t\t选项卡1的内容",
"\t</view>",
"\t<view v-show=\"current === 1\">",
"\t\t选项卡2的内容",
"\t</view>",
"\t<view v-show=\"current === 2\">",
"\t\t选项卡3的内容",
"\t</view>",
"</view>"
],
"prefix": "usegmentedcontrol",
"project": "uni-app",
"scope": "vue-html"
},
"uSlider": {
"body": [
"<slider @change=\"$1\" show-value$0/>"
],
"prefix": "uslider",
"project": "uni-app",
"scope": "vue-html"
},
"uSteps": {
"body": [
"<uni-steps :options=\"$1\" :active=\"0$2\"></uni-steps>"
],
"prefix": "usteps",
"project": "uni-app",
"scope": "vue-html"
},
"uSwipeAction": {
"body": [
"<uni-swipe-action :options=\"$1\">",
"\t$2",
"</uni-swipe-action>"
],
"prefix": "uSwipeAction",
"project": "uni-app",
"scope": "vue-html"
},
"uSwiper": {
"body": [
"<swiper :indicator-dots=\"true\" :autoplay=\"true\" :interval=\"3000\" :duration=\"1000\">",
"\t<swiper-item>",
"\t\t<view class=\"swiper-item\">$1</view>",
"\t</swiper-item>",
"\t<swiper-item>",
"\t\t<view class=\"swiper-item\">$2</view>",
"\t</swiper-item>",
"\t<swiper-item>",
"\t\t<view class=\"swiper-item\">$0</view>",
"\t</swiper-item>",
"</swiper>"
],
"prefix": "uswiper",
"project": "uni-app",
"scope": "vue-html"
},
"uSwipermsg": {
"body": [
"<view class=\"uni-swiper-msg\">",
"\t<view class=\"uni-swiper-msg-icon\">",
"\t\t<image src=\"$1\" mode=\"widthFix\"></image>",
"\t</view>",
"\t<swiper vertical=\"true\" autoplay=\"true\" circular=\"true\" interval=\"3000\">",
"\t\t<swiper-item>",
"\t\t\t<navigator>消息1</navigator>",
"\t\t</swiper-item>",
"\t\t<swiper-item>",
"\t\t\t<navigator>消息2</navigator>",
"\t\t</swiper-item>",
"\t\t<swiper-item>",
"\t\t\t<navigator>消息3</navigator>",
"\t\t</swiper-item>",
"\t</swiper>",
"</view>"
],
"prefix": "uswipermsg",
"project": "uni-app",
"scope": "vue-html"
},
"uSwitch": {
"body": [
"<switch checked @change=\"$1\" />"
],
"prefix": "uswitch",
"project": "uni-app",
"scope": "vue-html"
},
"uTag": {
"body": [
"<uni-tag text=\"$1\" type=\"$2\"></uni-tag>"
],
"prefix": "utag",
"project": "uni-app",
"scope": "vue-html"
},
"uTemplate": {
"body": [
"<template>",
"\t<view>$0</view>",
"</template>"
],
"prefix": "utemplate",
"project": "uni-app",
"scope": "vue-html"
},
"uText": {
"body": [
"<text>$0</text>"
],
"prefix": "utext",
"project": "uni-app",
"scope": "vue-html"
},
"uTextarea": {
"body": [
"<textarea value=\"$1\" placeholder=\"$0\" />"
],
"prefix": "utextarea",
"project": "uni-app",
"scope": "vue-html"
},
"uTimeline": {
"body": [
"<view class=\"uni-timeline\">",
"\t<view class=\"uni-timeline-item uni-timeline-first-item\">",
"\t\t<view class=\"uni-timeline-item-keynode\">日期1$1</view>",
"\t\t<view class=\"uni-timeline-item-divider\"></view>",
"\t\t<view class=\"uni-timeline-item-content\">事件1</view>",
"\t</view>",
"\t<view class=\"uni-timeline-item\">",
"\t\t<view class=\"uni-timeline-item-keynode\">日期2</view>",
"\t\t<view class=\"uni-timeline-item-divider\"></view>",
"\t\t<view class=\"uni-timeline-item-content\">事件2</view>",
"\t</view>",
"\t<view class=\"uni-timeline-item uni-timeline-last-item\">",
"\t\t<view class=\"uni-timeline-item-keynode\">日期3</view>",
"\t\t<view class=\"uni-timeline-item-divider\"></view>",
"\t\t<view class=\"uni-timeline-item-content\">事件3</view>",
"\t</view>",
"</view>"
],
"prefix": "utimeline",
"project": "uni-app",
"scope": "vue-html"
},
"uVideo": {
"body": [
"<video src=\"$1\" controls></video>"
],
"prefix": "uvideo",
"project": "uni-app",
"scope": "vue-html"
},
"uView": {
"body": [
"<view class=\"$1\">$0</view>"
],
"prefix": "uview",
"project": "uni-app",
"scope": "vue-html"
},
"uWebView": {
"body": [
"<web-view src=\"$1\"></web-view>"
],
"prefix": "uwebview",
"project": "uni-app",
"scope": "vue-html"
},
"view for": {
"body": [
"<view v-for=\"(item,index) in ${1:dataList}\" :key=\"index\">",
"\t$0",
"</view>"
],
"description": "view带for循环",
"prefix": "viewfor",
"project": "uni-app",
"scope": "vue-html"
},
"view_class": {
"body": [
"<view class=\"$1\">",
"\t$0",
"</view>"
],
"prefix": "viewclass",
"scope": "vue-html",
"triggerAssist": true
}
}
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化