下载链接
演示
使用说明
Vue
| Snippet | Purpose |
|---|---|
vueinit |
Single file component with script setup, template, and style |
vuesfinit |
Single file component with script setup function, template, and style |
vuescript |
vue script tag |
vuetemplate |
vue template tag |
vuestyle |
vue style tag |
TypeScript Vue
| Snippet | Purpose |
|---|---|
vuetsinit |
TypeScript Vue SFC with script setup |
vuetsdefineprops |
TypeScript define props with interface |
vuetsdefineemits |
TypeScript define emits with type interface |
vuetsref |
TypeScript ref with type annotation |
vuetsreactive |
TypeScript reactive state with interface |
vuetscomputed |
TypeScript computed property with type annotation |
Script
| Snippet | Purpose |
|---|---|
vuedefineprops |
define properties |
vuecomputed |
computed property |
vuewatch |
watcher |
vueprovide |
vue provide |
vueinject |
vue inject |
vueonmounted |
mounted lifecycle method |
vueonunmounted |
mounted lifecycle method |
vueonbeforemount |
beforeMount lifecycle method |
vueonbeforeunmount |
beforeMount lifecycle method |
vueonbeforeupdate |
beforeUpdate lifecycle method |
vueonupdated |
updated lifecycle method |
vueonactivated |
keepalive lifecycle method |
vueondeactivated |
keepalive lifecycle method |
vueonrendertracked |
called when a reactive dependency has been tracked |
vueonrendertriggered |
reactive dependency triggers the component’s render effect to be re-run |
Template
| Snippet | Purpose |
|---|---|
vtext |
v-text |
vhtml |
inserting html |
vshow |
setting element to display one |
vif |
removing or adding element to dom |
velse |
v-else |
velseif |
use along side v-if |
vfor |
v-for directive |
von |
v-on click handler with arguments |
vbind |
binding onto attributes |
vmodel |
Semantic v-model directive |
vslot |
denotes named slot |
vpre |
skip compilation for this element and its children |
vonce |
evaluate only once |
vmemo |
memoize data |
vcloak |
Used to hide un-compiled template until it is ready |
vkey |
key |
vref |
reference to a dom element |