CHEAT SHEET

VUEJS 2 PROGRESSIVE FRAMEWORK BASICS, DIRECTIVES & INSTANCES

Created by @Manz ( https://twitter.com/Manz ) https://lenguajejs.com/

d Directives <elem v-directive></elem> { } Template Syntax Templates s Special Tags & Attrs <elem attr></elem>
BASIC DIRECTIVES BASIC (MUSTACHE SYNTAX) SPECIAL ATTRIBUTES

v-text=" s " set textContent (text) {{ var }} show data (props, data...) ref=" s " register elem or child component
{{ v }} use expression or data SHORTHAND {{ bool ? 'Yes' : 'No' }} ternary condition slot=" s " name of component slot
v-html=" s " set innerHTML (raw HTML) XSS {{ var + 's' }} JS short expression slot-scope=" s " scoped slot (expr) 2.5.0+
v-pre skip render {{ vars }} (inside) ADVANCED (MUSTACHE SYNTAX) key=" n s " hint for vDOM identify node
v-cloak hide element until vue is ready {{ computed }} complex expression SPECIAL TAGS
v-once only render {{ vars }} first time {{ var | filter }} apply filter over var <component> meta-component (dynamic)
CONTROL DIRECTIVES is=" s o " used in dynamic components
v-show=" b " css-hide if false (always exists) f Custom Filters
CALLBACK VALUES
inline-template include templates inline
v-if=" b " render content if true, else none f (v) prev. value <keep-alive> cache comp. w/o destroy
GENERAL SYNTAX (GLOBAL)
v-else-if=" b " chained v-if condition 2.1.0+ include=" s " only cache match names 2.1.0+
v-else otherwise, render this content Vue.filter( s name, f filter_fn) exclude=" s " not cache match names 2.1.0+
LOOPS DIRECTIVES max=" n " maximum comp. to cache 2.5.0+
i Vue Instance vm = ViewModel
v-for="i in elem" iterate elem (for...in) <slot> serve as content distribution slot
PROPERTIES
v-for="(v, i) in a " v=value, i=index name=" s " name slot
v-for="(v, k, i) in o " v=value, k=key, i=index o vm.$data data vue observing
v-for="i in n " iterate from 1 to num o vm.$props component props 2.2.0+ t Vue Transitions Transition & Animations
READ-ONLY PROPERTIES
v-for="i in s " iter. from first to last char SINGLE TRANSITIONS

:key=" n s " hint for identify elements e vm.$el root DOM element <transition> transition effect for elem/comp.
BINDING DIRECTIVES
o vm.$options instance custom options name=" s " auto expand name (def: "v")
MODEL FORM BINDING (2-WAY) v vm.$parent parent instance appear apply transition on init render
v-model=" s " bind on input/select/textarea v vm.$root root instance (or itself) css=" b " apply css transition classes
v-model.lazy=" s " listen "change" event a vm.$children direct childs instances type=" s " set "transition" or "animation"
v-model.number=" n " cast to number o vm.$slots distribution slots mode=" s " set timing "out-in" or "in-out"
v-model.trim=" s " strip left/right spaces o vm.$scopedSlots scoped slots 2.1.0+ CLASSES FOR APPLY TRANSITION CLASS
HTML ATTRIBUTE BINDING
o vm.$refs elems registered w/ref attrs enter *-class *-to-class *-active-class
b vm.$isServer server-side instance SSR leave *-class *-to-class *-active-class
v-bind=" o s " bind key:val on element attrs
o vm.$attrs parent-scope attrs bindings appear *-class *-to-class *-active-class
v-bind:attr=" s " bind "s" on attr (ex: alt <img>)
o vm.$listeners parent-scope v-on ev. l.
:attr=" s " binding var "s" on attr SHORTHAND EVENTS
METHODS
:attr=" b " only show attr if true (ex: disabled) enter before-* after-* *-cancelled
:attr.prop =" s " binding as DOM property f vm.$watch( f exp, f fn, o options) leave before-* after-* *-cancelled
:attr.camel =" s " kebab-c camelCase 2.1.0+ * vm.$set( o a tgt, s n key, * v) appear before-* after-* *-cancelled
:attr.sync =" s " expand into v-on handler 2.3.0+ * vm.$delete( o a tgt, s n key)
MULTIPLE TRANSITIONS
CLASS BINDING INLINE EQUIVALENT METHODS (CUSTOM EVENTS)
<transition-group> trans. effect for multiple
:class=" s " add string to class ="'string'" vm.$on( s a s ev, f fn) listen c. ev. tag=" s " convert to html tag 'span'
:class=" a s " add all to class ="[s1,s2]" vm.$once( s ev, f fn) only once move-class=" s " overwrite during trans.
:class=" o b " add key if true ="{key:b}" vm.$off( s a s ev, f fn) remove c. ev.
same trans. props (except mode) & events
STYLE BINDING INLINE EQUIVALENT
vm.$emit( s name, a args) trigger
d Custom Directives Create your v-some!
:style=" s " apply string styles ="'prop:val'" METHODS (LIFECYCLE)

:style=" o s " apply k:v styles ="{prop:val}" v vm.$mount( e s el) manual mount GENERAL SYNTAX (GLOBAL)

:style=" a o s " apply objects ="[o1,o2]" vm.$forceUpdate() force to re-render Vue.directive( ... )
vm.$nextTick( f fn) next DOM update 1 ( s name, o f hooks) global register
EVENTS DIRECTIVES
vm.$destroy() destroy vue instance 2 ( s name, f bind_and_update_fn) SHORTHAND
v-on=" o f " add n-events (key:func) 2.4.0+
v-on:event=" f " add event listener e Custom Events Communication
HOOK METHODS

@event=" f " event listener SHORTHAND

EMIT CUSTOM EVENT FROM CHILD TO PARENT
.bind: f when bound to element (only once)
@event=" f (param, $event)" inline emits custom event w/data to parent: .inserted: f when inserted into parent node
@event.stop=" f " call .stopPropagation() this.$emit('myevent-kebab-case') .update: f after content has updated
@event.prevent=" f " call .preventDefault() CAPTURE CUSTOM EVENT ON PARENT .componentUpdated: f same, and children
@event.capture=" f " capture mode listen capture custom event from child: .unbind: f when unbound from elem (once)
@event.self=" f " trigger only from this @myevent="method-handler" HOOK METHODS ARGUMENTS
@event.once=" f " trigger at most once KEYCODE ALIAS SYSKEY BUTTON e el when bound to element (only once)
@event.keyCode=" f " trigger on key enter up ctrl left HOOK METHODS ARGUMENTS (READ-ONLY)
@event.sysKey=" f " trigger on key 2.1.0+ tab down alt middle o binding data object with...
@event.native=" f " listen native event delete left shift right s .name directive name, w/o v- prefix
@event.button=" f " only mouse button 2.2.0+ esc right meta
space custom * .value directive value, computed
@event.passive=" f " add passive event 2.3.0+ exact WATCH OPTIONS
* .oldValue prev value (update hooks)
b deep nested s .expression value as string
b immediate s .arg argument (ex: v-sample:foo)
n number c component a array o object o .modifiers mods list (ex:v-sample.foo)
s string d date s symbol undefined e vnode virtual node produced by vue
b boolean r regexp t datatype e HTMLElement e oldVnode prev virtual node (update hooks)
b def: true f function * any v Vue instance
 CHEAT SHEET

VUEJS 2 PROGRESSIVE FRAMEWORK COMPONENTS & SINGLE FILE COMPONENTS

Created by @Manz ( https://twitter.com/Manz ) https://lenguajejs.com/

c Vue Components Create your component v Vue Create new Vue instance
GENERAL SYNTAX (GLOBAL) DOM MOUNT function(createElement) { INITIAL CODE FOR VUEJS

Vue.component( ... ) auto mount: return createElement(App) import Vue from 'vue'
1 ( s id, o def) register a global component el:'#app' } const vm = new Vue({ VUE BUILDS
2 ( s id) retrieve a registered component manual mount: h => h(App) el: '#app', compiler render f.
vm.$mount(el) h: hyperscript ... runtime vue core
DEFINITION / NAME
}) full core+compiler
.name: s set/change name to component RENDER FUNCTIONS PROPS COMPLEX SYNTAX

DEFINITION / DOM OPTIONS h(el,def,child) type: t a t datatype, s Single File Components .vue files
.el: s existing DOM element to mount on el: s c element required: b bool,
TEMPLATES (HTML CODE)
def: o definition default: * value,
.template: s string template as markup <template> component html code
child: s a s elems validator: f boolean
.render: ce alternative with render functions lang=" s " preprocessor (pug)
.renderError: ce alt. output for errors 2.2.0+ o Data Options Main data options src=" s " externalize code on file
DEFINITION / DATA OPTIONS PROPS (EXTERNAL DATA) STYLES (CSS CODE)

.props: a s o attrs exposed from parent 1 props a s [ ... ] attrs from out SHORT SYNTAX <style> component css code (style)
.propsData: o pass props to an instance props o { ... } lang=" s " less, sass, scss, stylus, postcss
.data: f data object (reactive). Return a o 2 { key: t a t datatype, ... } FAST SYNTAX src=" s " externalize code on file
.computed: o f cached computed data 3 { key: props options, ... } COMPLEX SYNTAX scoped apply css only to this component
.methods: o f methods object data propsData o { ... } pass props to instance SCRIPT (JAVASCRIPT CODE)

.watch: o f observe for changes (old, new) DATA <script> component javascript code
DEFINITION / LIFECYCLE HOOKS 1 data o { ... } data object SIMPLE SYNTAX lang=" s " preprocessor (ts)
.beforeCreate: f before data observation 2 data f { return o { ... } } IN COMPONENTS src=" s " externalize code on file
.created: f after instance is created COMPUTED DATA (CACHED) INITIAL SNIPPET FOR SFC COMPONENT

.beforeMount: f before mount step computed o f {...} cached data objects import File from './File';
.mounted: f after mount step 1 { key: f function, ... } FAST SYNTAX 1 export default { ... JAVASCRIPT
.beforeUpdate: f before DOM patched 2 { key: { get: f , set: f } COMPLEX SYNTAX 2 export default Vue.extend({ ... TYPESCRIPT
.updated: f after vDOM re-render & patch METHODS (FUNCTIONS)
name: 'file',
.activated: f kept-alive c. activated components: {
methods o f { ... } methods object
.deactivated: f kept-alive c. deactivated 'file-component': File
.beforeDestroy: f before instance destroy { key: f function, ... }
WATCH (KEY IS NAME FROM DATA TO WATCH)
.destroyed: f after instance destroyed s Structure Vue File Structure
.errorCaptured: f (err, vm, info) 2.5.0+ watch o { ... } run when data name changes INITIAL FILE & FOLDER STRUCTURE
1 { key: f function, ... }
DEFINITION / ASSETS src // source files
2 { key: s methodName, ... } assets // dynamic assets
.directives: o name-directive hash 3 { key: { handler: f , deep: b } }
.filters: o name-filter hash components // ui components
4 { key: { handler: f , immediate: b } } mixins // reused defs
.components: o name-component hash 5 { key: a f [ ... ] } router // routing data
CALLBACK VALUES
DEFINITION / COMPOSITION store // vuex, flux, ...
6 { s 'obj.name': f }
.parent: v set parent-child relationship (new_v, old_v)
f translations // i18n translations
EXAMPLE SNIPPET FOR WATCH
.mixins: a o merge objects (priority: own) utils // helpers
1 a: (v,old) => {...}; views // view components
.extends: o extends from other component
2 b: 'fnName', main.js // app entry file
.provide: o data inject into descendants 2.2.0+
3 c: { handler: (v,old) => {...}, deep: b } App.vue // main app component
.inject: a o retrieve data from ancestor 2.2.0+
6 'd.a': (v,old) => {...}
DEFINITION / MISC

.delimiters: a s set delimiters ['{{','}}'] A Global API Other main options c Vue.config Configuration API
.functional: b set stateless & instanceless ASYNC UPDATE QUEUE PROPERTIES
.model: o s custom prop/event v-model 2.2.0+ Vue.nextTick( f fn, o ctx) defer exec func. .optionMergeStrategies o f (par, child, vm)
.inheritAttrs: b set parent-scope inherit 2.4.0+ to next DOM update cycle (wait changes) .ignoredElements a s customElems
.comments: b preserve comments 2.4.0+ 1 .nextTick( f fn) normal use .keyCodes o n define keycode aliases
2 .nextTick().then( f fn) w/promise 2.1.0+
ERRORS/WARNINGS HANDLER
x Reuse Components Mixins & Extends
REUSABILITY & COMPOSITION (GLOBAL)
SET/UNSET REACTIVE DATA .errorHandler f (err, vm, info 2.2.0+ )
Vue.set( o a tgt, s n key, * v) add data .warnHandler f (msg, vm, trace) 2.4.0+
Vue.extend( o def) create "subclass"
Vue.delete( o a tgt, s n key) del data FLAGS
Vue.mixin( o mixin) apply & merge mixin
INITIAL SNIPPET FOR MIXINS OTHERS .silent b supress all vue logs/warnings
import { m1 } from './mixins/m1.js'; Vue.use( o f plugin) install Vue plugin .devtools b allow vue devtools inspect
export default { Vue.compile( s tpl) compile to render func. .performance b monitoring vue perf.
mixin: [m1] export const = {...} s Vue.version return Vue version string .productionTip b show tips on startup

$data available $el available $destroy() is called

beforeCreate created beforeMount mounted beforeDestroy destroyed activated desactivated

SSR SSR
beforeUpdate updated