178 lines
2.7 KiB
Text
178 lines
2.7 KiB
Text
# 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 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}
|
|
}
|
|
});
|