一、Emmet语法:
E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。
二、Emmet基础用法
div => <div> </div>
foo => <foo> </foo>
html:5 => 将生成html5标准的包含body为空基本dom
html:xt => 生成XHTML过渡文档类型,DOCTYPE为XHTML
html:4s => 生成HTML4严格文档类型,DOCTYPE为HTML 4.01
a:mail => <a href="mailto:"></a>
a:link => <a href="http://"></a>
base => <base href="">
br => <br>
link => <link rel="stylesheet" href="">
script:src => <script src=""></script>
form:get => <form action="" method="get"></form>
label => <label for=""></label>
input => <input type="text">
inp => <input type="text" name="" id="">
input:hidden => <input type="hidden" name=""> input:h亦可
input:email => <input type="email" name="" id="">
input:password => <input type="password" name="" id="">
input:checkbox => <input type="checkbox" name="" id="">
input:radio => <input type="radio" name="" id="">
select => <select name="" id=""></select>
option => <option value=""></option>
bq => <blockquote></blockquote>
btn => <button></button>
btn:s => <button type="submit"></button>
btn:r => <button type="reset"></button>
三、vue-vscode-snippets
You can enable tab completion (recommended) by opening `Code > Preferences > Settings` (on a Mac) and applying `"editor.tabCompletion": "onlySnippets"` to your personal settings
## Snippets
### Vue
| Snippet | Purpose |
| ------------------ | ------------------------------------------------------------ |
| `vbase` | Single file component base with SCSS |
| `vbase-3` | Single File component Composition API with SCSS |
| `vbase-3-setup` | Single File component setup Composition API with SCSS |
| `vbase-3-reactive` | Single File component Composition API with Reactive and SCSS |
| `vbase-css` | Single file component base with CSS |
| `vbase-pcss` | Single file component base with PostCSS |
| `vbase-styl` | Single file component base with Stylus |
| `vbase-ts` | Single file component base with Typescript |
| `vbase-ts-class` | Single file component base with Typescript Class Format |
| `vbase-3-ts` | Single File component Composition API with Typescript |
| `vbase-3-ts-setup` | Single File component setup Composition API with Typescript |
| `vbase-ns` | Single file component with no styles |
| `vbase-sass` | Single file component base with SASS |
| `vbase-less` | Single file component base with LESS |
### Template
| Snippet | Purpose |
| ----------------- | ----------------------------------- |
| `vfor` | v-for directive |
| `vmodel` | Semantic v-model directive |
| `vmodel-num` | Semantic v-model number directive |
| `von` | v-on click handler with arguments |
| `vslot-named` | Named slot |
| `vel-props` | Component element with props |
| `vsrc` | Image src binding |
| `vstyle` | Inline style binding |
| `vstyle-obj` | Inline style binding with objects |
| `vclass` | Class binding |
| `vclass-obj` | Class binding with objects |
| `vclass-obj-mult` | Multiple conditional class bindings |
| `vanim` | Transition component with JS hooks |
| `vnuxtl` | Nuxt Routing Link |
| `vroutename` | router-link Named Routing |
| `vroutenameparam` | router-link Named with Parameters |
| `vroutepath` | router-link Path Routing Link |
| `vemit-child` | Emit event from child component |
| `vemit-parent` | Emit event to parent component |
### Script
| Snippet | Purpose |
| ----------------- | ------------------------------------------------------------------------ |
| `vdata` | Component data as a function |
| `vmethod` | Vue method |
| `vcomputed` | Vue computed property |
| `vwatcher` | Vue watcher with new and old value args |
| `vbeforecreate` | beforeCreate lifecycle method |
| `vcreated` | created lifecycle method |
| `vbeforemount` | beforeMount lifecycle method |
| `vmounted` | vmounted lifecycle method |
| `vbeforeupdate` | beforeUpdate lifecycle method |
| `vupdated` | updated lifecycle method |
| `vbeforedestroy` | beforeDestroy lifecycle method |
| `vdestroyed` | destroyed lifecycle method |
| `vprops` | Props with type and default |
| `vimport` | Import one component into another |
| `vimport-dynamic` | Import one component that should be lazy loaded by webpack |
| `vcomponents` | Import one component into another within the export statement |
| `vimport-export` | Import one component into another and use it within the export statement |
| `vmapstate` | import mapState from Vuex into vue component component |
| `vmapgetters` | import mapGetters from Vuex into vue component component |
| `vmapmutations` | import mapMutations from Vuex into vue component component |
| `vmapactions` | import mapActions from Vuex into vue component component |
| `vfilter` | Vue filter |
| `vmixin` | Create a Vue Mixin |
| `vmixin-use` | Bring a mixin into a component to use |
| `vc-direct` | Vue create a custom directive |
| `vimport-lib` | Import a library |
| `vimport-gsap` | Import GreenSock |
| `vanimhook-js` | Using the Transition component JS hooks in methods |
| `vcommit` | Commit to Vuex store in methods for mutation |
| `vdispatch` | Dispatch to Vuex store in methods for action |
| `vtest` | A simple unit testing component |
### Vue Composition API
| Snippet | Purpose |
| ------------------- | ----------------------------------------------------- |
| `v3reactive` | Vue Composition API - reactive |
| `v3reactive-setup` | Vue Composition API - reactive with setup boilerplate |
| `v3computed` | Vue Composition API - computed |
| `v3watch` | Vue Composition API - watcher single source |
| `v3watch-array` | Vue Composition API - watch as array |
| `v3watcheffect` | Vue Composition API - watchEffect |
| `v3ref` | Vue Ref |
| `v3onmounted` | Lifecycle hook - onMounted |
| `v3onbeforemount` | Lifecycle hook - onBeforeMount |
| `v3onbeforeupdate` | Lifecycle hook - onBeforeUpdate |
| `v3onupdated` | Lifecycle hook - onUpdated |
| `v3onerrorcaptured` | Lifecycle hook - onErrorCaptured |
| `v3onunmounted` | Lifecycle hook - (destroyed) onUnmounted |
| `v3onbeforeunmount` | Lifecycle hook - (beforeDestroy) onBeforeUnmount |
| `v3useinoptions` | Use Composition API in Options API |
### Vuex
| Snippet | Purpose |
| --------------- | ------------------------------ |
| `vstore` | Base for Vuex store.js |
| `vgetter` | Vuex Getter |
| `vmutation` | Vuex Mutation |
| `vaction` | Vuex Action |
| `vmodule` | Vuex Module |
| `vstore-import` | Import vuex store into main.js |
| `vstore2` | Updated Base for Vuex store |
### Vue Router
| Snippet | Purpose |
| -------------------- | --------------------------------------------- |
| `vrouter` | Vue Router base |
| `vscrollbehavior` | Vue Router scrollBehavior |
| `vbeforeeach` | Vue Router global guards beforeEach |
| `vbeforeresolve` | Vue Router global guards beforeResolve |
| `vaftereach` | Vue Router global guards afterEach |
| `vbeforeenter` | Vue Router per-route guard beforeEnter |
| `vbeforerouteenter` | Vue Router component guards beforeRouteEnter |
| `vbeforerouteupdate` | Vue Router component guards beforeRouteUpdate |
| `vbeforerouteleave` | Vue Router component guards beforeRouteLeave |
### Vue Config
| Snippet | Purpose |
| --------- | -------------------------------------------------------------------- |
| `vplugin` | Import a plugin to main.js or plugins file |
| `vconfig` | vue.config.js file, example imports a sass file into every component |
### Nuxt Config
| Snippet | Purpose |
| ------- | ------------------------------------------------------- |
| `nfont` | link to include fonts in a nuxt project, in nuxt-config |
| `ncss` | link to css assets such as normalize |
### Nuxt Page
| Snippet | Purpose |
| ----------------- | -------------------------------- |
| `nasyncdata` | Nuxt asyncData |
| `nasyncdataaxios` | Nuxt asyncData with Axios module |
| `nfetch` | Nuxt Fetch |
| `nfetchaxios` | Nuxt Fetch with Axios module |
| `nhead` | Nuxt Head |
| `nparam` | Nuxt Route Params |
### Extra (plaintext)
| Snippet | Purpose |
| ----------- | ----------------------- |
| `gitignore` | .gitignore file presets |
\
