mirror of
https://github.com/amix/vimrc
synced 2025-07-05 15:35:01 +08:00
gitignore sources_non_forked_cache
This commit is contained in:
208
sources_non_forked/vim-snippets/snippets/vue.snippets
Normal file
208
sources_non_forked/vim-snippets/snippets/vue.snippets
Normal file
@ -0,0 +1,208 @@
|
||||
# This snippet file enables vue files to use tabs for html, js and css. It also
|
||||
# includes some vue-specific html-like snippets, as well as some general
|
||||
# boilerplate code for vue.
|
||||
|
||||
extends html, javascript, css
|
||||
|
||||
# These snippets form a port of Sarah Drasner's vue-sublime-snippets
|
||||
|
||||
# some html-like snippets
|
||||
|
||||
snippet slot
|
||||
<slot></slot>
|
||||
|
||||
snippet template
|
||||
<template></template>
|
||||
|
||||
snippet transition
|
||||
<transition></transition>
|
||||
|
||||
# The following snippets create more complex boilerplate code.
|
||||
|
||||
snippet vbase
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
${0}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
snippet vimport:c
|
||||
import ${1:Name} from './components/$1.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
$1
|
||||
}
|
||||
}
|
||||
|
||||
snippet vactions
|
||||
actions: {
|
||||
${1:updateValue}({commit}, ${2:payload}) {
|
||||
commit($1, $2);
|
||||
}
|
||||
},
|
||||
|
||||
# Add in js animation hooks
|
||||
snippet vanim:js:el
|
||||
<transition
|
||||
@before-enter="beforeEnter"
|
||||
@enter="enter"
|
||||
@after-enter="afterEnter"
|
||||
@enter-cancelled="enterCancelled"
|
||||
|
||||
@before-Leave="beforeLeave"
|
||||
@leave="leave"
|
||||
@after-leave="afterLeave"
|
||||
@leave-cancelled="leaveCancelled"
|
||||
:css="false">
|
||||
|
||||
</transition>
|
||||
|
||||
snippet vanim:js:method
|
||||
methods: {
|
||||
beforeEnter(el) {
|
||||
console.log('beforeEnter');
|
||||
},
|
||||
enter(el, done) {
|
||||
console.log('enter');
|
||||
done();
|
||||
},
|
||||
afterEnter(el) {
|
||||
console.log('afterEnter');
|
||||
},
|
||||
enterCancelled(el, done) {
|
||||
console.log('enterCancelled');
|
||||
},
|
||||
beforeLeave(el) {
|
||||
console.log('beforeLeave');
|
||||
},
|
||||
leave(el, done) {
|
||||
console.log('leave');
|
||||
done();
|
||||
},
|
||||
afterLeave(el) {
|
||||
console.log('afterLeave');
|
||||
},
|
||||
leaveCancelled(el, done) {
|
||||
console.log('leaveCancelled');
|
||||
}
|
||||
}
|
||||
|
||||
snippet vcl
|
||||
@click="${1}"
|
||||
|
||||
snippet vdata
|
||||
data() {
|
||||
return {
|
||||
${1:key}: ${2:value}
|
||||
};
|
||||
},
|
||||
|
||||
snippet vmounted
|
||||
mounted() {
|
||||
console.log('mounted');
|
||||
},
|
||||
|
||||
snippet vmethods
|
||||
methods: {
|
||||
${1:method}() {
|
||||
console.log('method');
|
||||
}
|
||||
},
|
||||
|
||||
snippet vcomputed
|
||||
computed: {
|
||||
${1:fnName}() {
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
snippet vfilter
|
||||
filters: {
|
||||
${1:fnName}: function(${2:value}) {
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
snippet vfor
|
||||
<div v-for="${1:item} in ${2:items}" :key="$1.id">
|
||||
{{ $1 }}
|
||||
</div>
|
||||
|
||||
snippet vgetters
|
||||
getters: {
|
||||
${1:value}: state => {
|
||||
return state.$1;
|
||||
}
|
||||
},
|
||||
|
||||
snippet vimport
|
||||
import ${1:New} from './components/$1.vue';
|
||||
|
||||
snippet vkeep
|
||||
<keep-alive>
|
||||
<component :is="">
|
||||
<p>default</p>
|
||||
</component>
|
||||
</keep-alive>
|
||||
|
||||
snippet vmixin
|
||||
const ${1:mixinName} = {
|
||||
mounted() {
|
||||
console.log('hello from mixin!')
|
||||
},
|
||||
}
|
||||
const ${2:Component} = Vue.extend({
|
||||
mixins: [$1]
|
||||
})
|
||||
|
||||
snippet vmutations
|
||||
mutations: {
|
||||
${1:updateValue}(state, ${3:payload}) => {
|
||||
state.${2:value} = $3;
|
||||
}
|
||||
},
|
||||
|
||||
snippet vprops:d
|
||||
${1:propName}: {
|
||||
type: ${2:Number},
|
||||
default: ${0}
|
||||
},
|
||||
|
||||
snippet vprops
|
||||
${1:propName}: {
|
||||
type: ${2:Number}
|
||||
},
|
||||
|
||||
snippet vstore
|
||||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
export const store = new Vuex.Store({
|
||||
state: {
|
||||
${1:key}: ${2:value}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
# vue-i18n snippets https://github.com/kazupon/vue-i18n
|
||||
|
||||
snippet trans
|
||||
$t('$1')
|
||||
|
||||
# Translation with parameter
|
||||
snippet transc
|
||||
$t('$1', { $2: $3 })
|
||||
|
Reference in New Issue
Block a user