Table of Contents

• 8. Vue CLI
• 9. Slots
• 16. Transitions
• 17. HTTP: vue-resource
• 18. Routing

Vue.js 2.0 Basics. Create Vue.js object - This creates new Vue object that targets the id of the div tag. You can then data bind the keyword property. Title: Vue & Vuex & Quasar Cheat Sheet by przemekgrenda - Cheatography.com Created Date: 1655Z.

1 Events

2 Styling

3 Conditionals

4 Looping

5 Components

6 Vue lifecycle

Vue ←watch→ Virtual DOM ←update→ DOM

• new Vue();
• .beforeCreate();
• .created();
• .beforeMount();
• .updated();
• .beforeUpdate();
• .beforeDestroy();
• .destroyed();

7 Development workflow

8 Vue CLI

Different templates: simple, webpack-simple, webpack, browserify / browserify-simple

9 Slots

Passing some content (i.e. DOM trees) from outside into a component?

Parent.vue:

Child component:

9.1 Multiple slots: <slot name='>

In child.vue:

In parent.vue:

Vue Js Cheat Sheet Github

An unnamed slot is the default slot!

10 Dynamic components: <component>

An old component is destroyed on change!Although:

Hooks into <keep-alive> lifecycle:

11 Forms

The .lazy modifier: don't react on every little change, just on enter/blur:

Multiple bindings to the same name in data make an array in data automatically (useful for checkboxes, <input type='checkbox'></input>).

– automatically switches the choice value.

12 Using v-model with components

Component:

13 Directives: v-..

Hooks:

• bind(el, binding, vnode) – Once directive is attached;
• inserted(el, binding, vnode) – Inserted in parent node;
• update(el, binding, vnode, oldVnode) – once component is updated (without children);
• componentUpdated(el, binding, vnode, oldVnode) – (with children);
• unbind(el, binding, vnode)

Arguments for a directive:

Modifiers:

Registering directives locally:

Sensus ar5502. Multiple modifiers values: pass an object

14 Filters

15 Mixins

16 Transitions

<transition name='*'> elements.CSS classes:

Vue Js Quickstart

• *-enter when forward animation starts;
• *-enter-active when forward animation ends;
• *-leave when reverse animation starts;
• *-leave-active when reverse animation ends;

16.1appear attribute

triggers animations on load.

17 HTTP: vue-resource

17.1 Setup

or

18 Routing

18.2 First route

Vue Cheat Sheet 3

routes.js:

main.js:

App.vue:

18.3 Routing modes (hash vs history)

'Seamless' mode: the server always returns index.html on any request

Vue Cheat Sheet

Vue Jest Cheat Sheet