Vue (Instance)

A mental map I did while I was learning Vue.js

Get Started. It's Free
or sign up with your email address
Vue (Instance) by Mind Map: Vue (Instance)

1. Special Attributes

1.1. key

1.2. ref

1.3. slot

2. Global Config (Vue.config)

2.1. silent

2.2. optionMergeStrategies

2.3. devtools

2.4. errorHandler

2.5. ignoredElements

2.6. keyCodes

3. Directives

3.1. v-text

3.2. v-html

3.3. v-show

3.4. v-if

3.5. v-else

3.6. v-else-if

3.7. v-for

3.8. v-on

3.9. v-bind

3.10. v-model

3.11. v-pre

3.12. v-cloak

3.13. v-once

4. Options

4.1. Assets

4.1.1. directives

4.1.2. filters

4.1.3. components

4.2. Misc

4.2.1. parent

4.2.2. mixins

4.2.3. name

4.2.4. extends

4.2.5. delimiters

4.2.6. functional

4.3. Lifecycle Hooks

4.3.1. beforeCreate

4.3.2. create

4.3.3. beforeMount

4.3.4. mounted

4.3.5. beforeUpdate

4.3.6. updated

4.3.7. activated

4.3.8. deactivated

4.3.9. beforeDestroy

4.3.10. destroyed

4.4. Data

4.4.1. data

4.4.2. props

4.4.3. propsData

4.4.4. compute

4.4.5. methods

4.4.6. watch

4.5. DOM

4.5.1. el

4.5.2. template

4.5.3. render

5. Components

5.1. Usage

5.1.1. Registration

5.1.2. Local registration

5.2. Templates

5.2.1. html

5.2.1.1. HTML restrictions

5.2.1.1.1. Do

5.2.1.1.2. Don't do

5.2.2. script tag

5.2.3. inline template strings

5.2.4. .vue components

5.3. Options { }

5.3.1. data( )

5.4. Composition

5.4.1. Parent Child

5.4.1.1. props

5.4.1.1.1. passing props

5.4.1.1.2. Dynamic props

5.4.1.1.3. Literal

5.4.1.1.4. One-way Data Flow

5.4.1.1.5. Props validations

5.4.1.2. Custom Events

5.4.1.2.1. $on

5.4.2. No Parent Child

5.4.2.1. complex cases? Vuex

5.5. Custom Form Inputs

5.6. Content Distribution ( Slots )

5.6.1. Compilation Scope

5.6.1.1. don't do

5.6.2. Single Slot

5.6.3. Named Slots

5.6.4. Passing Data to

5.6.4.1. Scoped Slots

5.7. Dynamic Components

5.7.1. <keep-alive>

5.8. Naming Convencions

5.9. API

5.9.1. Props

5.9.2. Events

5.9.3. Slots

6. API

6.1. VNode Interface

6.2. Server-Side Rendering

6.3. Built-In Components

6.3.1. component

6.3.2. transition

6.3.3. transition-group

6.3.4. keep-alive

6.3.5. slot

6.4. Instance

6.4.1. Methods

6.4.1.1. Data

6.4.1.1.1. vm.$watch

6.4.1.1.2. vm.$set

6.4.1.1.3. vm.$delete

6.4.1.2. Events

6.4.1.2.1. vm.$on

6.4.1.2.2. vm.$once

6.4.1.2.3. vm.$off

6.4.1.2.4. vm.$emit

6.4.1.3. Lifecycle

6.4.1.3.1. vm.$mount

6.4.1.3.2. vm.$forceUpdate

6.4.1.3.3. vm.$nextTick

6.4.1.3.4. vm.$destroy

6.4.2. Instance Properties

6.4.2.1. vm.$data

6.4.2.2. vm.$el

6.4.2.3. vm.$options

6.4.2.4. vm.$parent

6.4.2.5. vm.$root

6.4.2.6. vm.$children

6.4.2.7. vm.$slots

6.4.2.8. vm.$scopedSlots

6.4.2.9. vm.$refs

6.4.2.10. vm.$isServer

6.5. Global API

6.5.1. Vue.extend( options )

6.5.2. Vue.nextTick( [callback, context] )

6.5.3. Vue.set( object, key, value )

6.5.4. Vue.delete( object, key )

6.5.5. Vue.directive( id, [definition] )

6.5.6. Vue.filter( id, [definition] )

6.5.7. Vue.component( id, [definition] )

6.5.8. Vue.use( plugin )

6.5.9. Vue.mixin( mixin )

6.5.10. Vue.compile( template )

6.5.11. Vue.version

7. options { }

7.1. data { }

7.2. template

7.3. methods

7.4. lifecycle hooks

7.4.1. beforeCreate

7.4.2. create

7.4.3. beforeMount

7.4.4. mounted

7.4.5. beforeUpadte

7.4.6. updated

7.4.7. beforeDestroy

7.4.8. destroyed

8. Properties

9. Reactivity

10. Own properties $

10.1. $on(eventName)

10.1.1. modifiers

10.1.1.1. .native

10.2. $emit(eventName)

11. Directives

11.1. v-bind

11.1.1. shorthand

11.2. v-show

11.2.1. v-if vs v-show

11.3. v-on

11.3.1. shorthand

11.4. key

11.5. v-for

11.5.1. list rendering guide

11.6. v-on:submit.prevent

11.6.1. v-on

11.6.1.1. directive

11.6.2. submit

11.6.2.1. param

11.6.2.1.1. keyup

11.6.3. prevent

11.6.3.1. modifier

11.6.3.1.1. .stop

11.6.3.1.2. .prevent

11.6.3.1.3. .capture

11.6.3.1.4. .self

11.6.3.1.5. .once

11.6.3.1.6. Keyboard modifiers

12. Watchers

13. Computed Properties

13.1. Computed vs Watched

13.2. setters

14. Event Handling

14.1. param

14.1.1. event to listen

14.2. value

14.2.1. event handler

15. Advanced Topics

15.1. Components

15.1.1. Child Components Refs

15.1.2. Recursive components

15.1.3. Circular References

15.1.4. Inline Templates

15.1.5. X-templates

15.1.6. Lot of static content ?

15.1.6.1. v-once

15.1.7. Async Components

15.1.7.1. Vue only

15.1.7.2. Webpack's code splitting

15.1.7.3. Webpack 2 + ES2015

15.2. Reactivity

15.2.1. Vue instance

15.2.1.1. Convert data { } to

15.2.1.1.1. getters

15.2.1.1.2. setters

15.2.1.2. data

15.2.2. Watcher instance

15.2.3. Caveats

15.2.3.1. Property

15.2.3.1.1. Addition

15.2.3.1.2. Deletion

15.2.3.1.3. assign/_.extend

15.2.3.2. Array

15.2.4. Async Update Queue

15.2.4.1. this.$nextTick

15.2.4.2. Vue.$nextTick

15.3. Transitions and Effects

15.3.1. Single elements/components

15.3.1.1. condicional rendering ( v-if )

15.3.1.2. condicional display ( v-show )

15.3.1.3. Dynamic components

15.3.1.4. Component root nodes

15.3.2. exmaple

15.3.2.1. html

15.3.2.2. javascript

15.3.2.3. css

15.3.3. classes

15.3.3.1. v-enter

15.3.3.2. v-enter-active

15.3.3.3. v-enter-to

15.3.3.4. v-leave

15.3.3.5. v-leave-active

15.3.3.6. v-leave-to

15.3.4. Css transitions

15.3.5. Css Animations

15.3.6. Custom Transition Classes

15.3.7. Transitions and Animation

15.3.8. Javascript Hooks

15.3.9. Initial Render

15.3.10. Between Elements

15.3.11. Between Modules

15.3.12. List Transitions

15.3.13. Reusable Transitions

15.3.14. Dynamic Transitions

15.4. Transition State

15.4.1. Animating State With Watchers

15.4.2. Dynamic State Transitions

15.4.3. Organizing transitions into Components

15.5. Render function

16. Form Input Binding

16.1. Directives

16.1.1. v-bind

16.1.2. v-model

16.1.3. Modifiers

16.1.3.1. .lazy

16.1.3.2. .number

16.1.3.3. .trim

17. angular transclude/ Slots

18. Authoring reusable components