183 lines
3 KiB
Text
183 lines
3 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{
|
|
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
|
|
</style>
|
|
snippet vimport:c
|
|
import New from './components/New.vue';
|
|
|
|
export default{
|
|
components: {
|
|
appNew: New
|
|
}
|
|
}
|
|
|
|
snippet vactionsis now
|
|
|
|
actions: {
|
|
updateValue({commit}, payload) {
|
|
commit(updateValue, payload);
|
|
}
|
|
}
|
|
|
|
# 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=""
|
|
|
|
snippet vdata
|
|
data: function () {
|
|
return {
|
|
key: value
|
|
};
|
|
}
|
|
|
|
snippet vfilter
|
|
filters: {
|
|
fnName: function (v) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
snippet vfor
|
|
<div v-for="item in items" :key="item.id">
|
|
{{ item }}
|
|
</div
|
|
|
|
snippet vgetters
|
|
getters: {
|
|
value: state => {
|
|
return state.value;
|
|
}
|
|
}
|
|
|
|
snippet vimport
|
|
import New from './components/New.vue';
|
|
|
|
snippet vkeep
|
|
<keep-alive>
|
|
<component :is="">
|
|
<p>default</p>
|
|
</component>
|
|
</keep-alive>
|
|
|
|
snippet vmixin
|
|
// define a mixin object
|
|
var myMixin = {
|
|
created: function () {
|
|
this.hello()
|
|
},
|
|
methods: {
|
|
hello: function () {
|
|
console.log('hello from mixin!')
|
|
}
|
|
}
|
|
}
|
|
// define a component that uses this mixin
|
|
var Component = Vue.extend({
|
|
mixins: [myMixin]
|
|
})
|
|
var component = new Component() // -> "hello from mixin!"
|
|
|
|
snippet vmutations
|
|
// define a mixin object
|
|
var myMixin = {
|
|
created: function () {
|
|
this.hello()
|
|
},
|
|
methods: {
|
|
hello: function () {
|
|
console.log('hello from mixin!')
|
|
}
|
|
}
|
|
}
|
|
// define a component that uses this mixin
|
|
var Component = Vue.extend({
|
|
mixins: [myMixin]
|
|
})
|
|
var component = new Component() // -> "hello from mixin!"
|
|
|
|
snippet vprops:d
|
|
propName: {
|
|
type: Number,
|
|
default: 100
|
|
},
|
|
|
|
snippet vprops
|
|
propName: {
|
|
type: Number
|
|
},
|