vaction

Vuex action

actions: {
 $updateValue$({commit}, $payload$) {
  commit('$updateValue$', $payload$);
 }
}

vanim

Vue transition component with JavaScript hooks

<transition
 mode="out-in"
 @before-enter="beforeEnter"
 @enter="enter"

 @before-leave="beforeLeave"
 @leave="leave"
 :css="false">

</transition>

vanimhook-js

Vue transition component js hooks

beforeEnter(el) {
 console.log('beforeEnter');
},
enter(el, done) {
 console.log('enter');
 done();
},
beforeLeave(el) {
 console.log('beforeLeave');
},
leave(el, done) {
 console.log('leave');
 done();
},

vbase-css

Base for Vue File with CSS

<template>
 <div>

 </div>
</template>

<script>
 export default {
  $END$
 }
</script>

<style scoped>

</style>

vc-direct

Vue custom directive

Vue.directive('$directiveName$', {
 bind(el, binding, vnode) {
  el.style.$arg$ = binding.value.$arg$;
 }
});

vclass

Vue class binding

<$div$ :class="{ $className$: $data$ }"></$div$>

vclass-obj

Vue class binding

<$div$ :class="[$classNameA$, $classNameB$]"></$div$>

vclass-obj-mult

Vue multiple conditional class bindings

<$div$ :class="[$classNameA$, {$classNameB$ : $condition$}]"></$div$>

vcomponents

Import one component into another, within export statement

components: {
 $New$,
},

vcomputed

Computed value

computed: {
 $name$() {
  return this.$data$ $END$
 }
},

vdata

Vue Component Data

data() {
 return {
  $key$: $value$
 }
},

vel-props

Vue component element with props

<$component$ :$propName$="$END$"></$component$>

vfilter

Vue filter

filters: {
 $fnName$: function($value$) {
  return $value$$END$;
 }
}

vfor

Vue v-for statement

<$div$ v-for="$item$ in $item$s" :key="$item$.id">
 {{ $item$ }}
</$div$>

vgetter

Vuex getter

getters: {
 $value$: state => {
  return state.$value$;
 }
}

vimport

Import one component into another

import $New$ from '@/components/$New$.vue';

vimport-export

Import a component and include it in export default

import $Name$ from '@/components/$Name$.vue';

export default {
 components: {
  $Name$
 },
};

vimport-gsap

Import GSAP library

import gsap from 'gsap';

vimport-lib

Import a library

import { $libName$ } from '$libName$';

vmethod

Vue method

methods: {
 $name$() {
  $END$
 }
},

vmixin

Vue mixin

const $mixinName$ = {
 mounted() {
  console.log('hello from mixin!');
 },
};

vmixin-use

Vue use mixin

mixins: [$mixinName$],

vmodel

Vue v-model directive

<input v-model="$data$" type="text" />

vmodel-num

Vue v-model directive number input

<input v-model.number="$numData$" type="number" step="1" />

vmutation

Vuex mutation

mutations: {
 $updateValue$(state, $payload$) {
  state.$value$ = $payload$;
 }
}

von

Vue v-on click handler with arguments

@click="$handler$($arg$, $event$)"

vprops

Vue Props with Default

props: {
 $propName$: {
  type: $type$,
  default: $default$
 },
},

vsrc

Vue image source binding

<img :src="'/path/to/images/' + $fileName$" alt="$altText$"/>

vstore

Base for Vuex store

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
 state: {
  $key$: $value$
 }
});

vstore-import

Import vuex store into main.js

import { store } from './store/index';

vstyle

Vue inline style binding

<$div$ :style="{ fontSize: $data$ + 'px' }"></$div$>

vstyle-obj

Vue inline style binding, objects

<$div$ :style="[$styleObjectA$, $styleObjectB$]"></$div$>

vwatcher

Vue watcher

watch: {
 $data$($newValue$, $oldValue$) {
  $END$
 }
},

标签: export, image, log, default, name, this, value, key, vnode, use, function, lue, const, data, type, from, component, console, arguments, number, class, main, import, event, vuex

知识共享许可协议
本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

评论暂时关闭了,可以过段时间再试

  • 目录