mirror of
1
0
Fork 0
ultimate-vim/sources_non_forked/vim-snippets/snippets/vue.snippets

184 lines
3.0 KiB
Plaintext

# 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
},