Vue (Instance)

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

Laten we beginnen. Het is Gratis
of registreren met je e-mailadres
Vue (Instance) Door Mind Map: Vue (Instance)

1. options { }

1.1. data { }

1.2. template

1.3. methods

1.4. lifecycle hooks

1.4.1. beforeCreate

1.4.2. create

1.4.3. beforeMount

1.4.4. mounted

1.4.5. beforeUpadte

1.4.6. updated

1.4.7. beforeDestroy

1.4.8. destroyed

2. Properties

3. Reactivity

4. Own properties $

4.1. $on(eventName)

4.1.1. modifiers

4.1.1.1. .native

4.2. $emit(eventName)

5. Directives

5.1. v-bind

5.1.1. shorthand

5.2. v-show

5.2.1. v-if vs v-show

5.3. v-on

5.3.1. shorthand

5.4. key

5.5. v-for

5.5.1. list rendering guide

5.6. v-on:submit.prevent

5.6.1. v-on

5.6.1.1. directive

5.6.2. submit

5.6.2.1. param

5.6.2.1.1. keyup

5.6.3. prevent

5.6.3.1. modifier

5.6.3.1.1. .stop

5.6.3.1.2. .prevent

5.6.3.1.3. .capture

5.6.3.1.4. .self

5.6.3.1.5. .once

5.6.3.1.6. Keyboard modifiers

6. Watchers

7. Computed Properties

7.1. Computed vs Watched

7.2. setters

8. Event Handling

8.1. param

8.1.1. event to listen

8.2. value

8.2.1. event handler

9. Advanced Topics

9.1. Components

9.1.1. Child Components Refs

9.1.2. Recursive components

9.1.3. Circular References

9.1.4. Inline Templates

9.1.5. X-templates

9.1.6. Lot of static content ?

9.1.6.1. v-once

9.1.7. Async Components

9.1.7.1. Vue only

9.1.7.2. Webpack's code splitting

9.1.7.3. Webpack 2 + ES2015

9.2. Reactivity

9.2.1. Vue instance

9.2.1.1. Convert data { } to

9.2.1.1.1. getters

9.2.1.1.2. setters

9.2.1.2. data

9.2.2. Watcher instance

9.2.3. Caveats

9.2.3.1. Property

9.2.3.1.1. Addition

9.2.3.1.2. Deletion

9.2.3.1.3. assign/_.extend

9.2.3.2. Array

9.2.4. Async Update Queue

9.2.4.1. this.$nextTick

9.2.4.2. Vue.$nextTick

9.3. Transitions and Effects

9.3.1. Single elements/components

9.3.1.1. condicional rendering ( v-if )

9.3.1.2. condicional display ( v-show )

9.3.1.3. Dynamic components

9.3.1.4. Component root nodes

9.3.2. exmaple

9.3.2.1. html

9.3.2.2. javascript

9.3.2.3. css

9.3.3. classes

9.3.3.1. v-enter

9.3.3.2. v-enter-active

9.3.3.3. v-enter-to

9.3.3.4. v-leave

9.3.3.5. v-leave-active

9.3.3.6. v-leave-to

9.3.4. Css transitions

9.3.5. Css Animations

9.3.6. Custom Transition Classes

9.3.7. Transitions and Animation

9.3.8. Javascript Hooks

9.3.9. Initial Render

9.3.10. Between Elements

9.3.11. Between Modules

9.3.12. List Transitions

9.3.13. Reusable Transitions

9.3.14. Dynamic Transitions

9.4. Transition State

9.4.1. Animating State With Watchers

9.4.2. Dynamic State Transitions

9.4.3. Organizing transitions into Components

9.5. Render function

10. Form Input Binding

10.1. Directives

10.1.1. v-bind

10.1.2. v-model

10.1.3. Modifiers

10.1.3.1. .lazy

10.1.3.2. .number

10.1.3.3. .trim

11. angular transclude/ Slots

12. Special Attributes

12.1. key

12.2. ref

12.3. slot

13. Global Config (Vue.config)

13.1. silent

13.2. optionMergeStrategies

13.3. devtools

13.4. errorHandler

13.5. ignoredElements

13.6. keyCodes

14. Directives

14.1. v-text

14.2. v-html

14.3. v-show

14.4. v-if

14.5. v-else

14.6. v-else-if

14.7. v-for

14.8. v-on

14.9. v-bind

14.10. v-model

14.11. v-pre

14.12. v-cloak

14.13. v-once

15. Options

15.1. Assets

15.1.1. directives

15.1.2. filters

15.1.3. components

15.2. Misc

15.2.1. parent

15.2.2. mixins

15.2.3. name

15.2.4. extends

15.2.5. delimiters

15.2.6. functional

15.3. Lifecycle Hooks

15.3.1. beforeCreate

15.3.2. create

15.3.3. beforeMount

15.3.4. mounted

15.3.5. beforeUpdate

15.3.6. updated

15.3.7. activated

15.3.8. deactivated

15.3.9. beforeDestroy

15.3.10. destroyed

15.4. Data

15.4.1. data

15.4.2. props

15.4.3. propsData

15.4.4. compute

15.4.5. methods

15.4.6. watch

15.5. DOM

15.5.1. el

15.5.2. template

15.5.3. render

16. Components

16.1. Usage

16.1.1. Registration

16.1.2. Local registration

16.2. Templates

16.2.1. html

16.2.1.1. HTML restrictions

16.2.1.1.1. Do

16.2.1.1.2. Don't do

16.2.2. script tag

16.2.3. inline template strings

16.2.4. .vue components

16.3. Options { }

16.3.1. data( )

16.4. Composition

16.4.1. Parent Child

16.4.1.1. props

16.4.1.1.1. passing props

16.4.1.1.2. Dynamic props

16.4.1.1.3. Literal

16.4.1.1.4. One-way Data Flow

16.4.1.1.5. Props validations

16.4.1.2. Custom Events

16.4.1.2.1. $on

16.4.2. No Parent Child

16.4.2.1. complex cases? Vuex

16.5. Custom Form Inputs

16.6. Content Distribution ( Slots )

16.6.1. Compilation Scope

16.6.1.1. don't do

16.6.2. Single Slot

16.6.3. Named Slots

16.6.4. Passing Data to

16.6.4.1. Scoped Slots

16.7. Dynamic Components

16.7.1. <keep-alive>

16.8. Naming Convencions

16.9. API

16.9.1. Props

16.9.2. Events

16.9.3. Slots

17. API

17.1. VNode Interface

17.2. Server-Side Rendering

17.3. Built-In Components

17.3.1. component

17.3.2. transition

17.3.3. transition-group

17.3.4. keep-alive

17.3.5. slot

17.4. Instance

17.4.1. Methods

17.4.1.1. Data

17.4.1.1.1. vm.$watch

17.4.1.1.2. vm.$set

17.4.1.1.3. vm.$delete

17.4.1.2. Events

17.4.1.2.1. vm.$on

17.4.1.2.2. vm.$once

17.4.1.2.3. vm.$off

17.4.1.2.4. vm.$emit

17.4.1.3. Lifecycle

17.4.1.3.1. vm.$mount

17.4.1.3.2. vm.$forceUpdate

17.4.1.3.3. vm.$nextTick

17.4.1.3.4. vm.$destroy

17.4.2. Instance Properties

17.4.2.1. vm.$data

17.4.2.2. vm.$el

17.4.2.3. vm.$options

17.4.2.4. vm.$parent

17.4.2.5. vm.$root

17.4.2.6. vm.$children

17.4.2.7. vm.$slots

17.4.2.8. vm.$scopedSlots

17.4.2.9. vm.$refs

17.4.2.10. vm.$isServer

17.5. Global API

17.5.1. Vue.extend( options )

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

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

17.5.4. Vue.delete( object, key )

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

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

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

17.5.8. Vue.use( plugin )

17.5.9. Vue.mixin( mixin )

17.5.10. Vue.compile( template )

17.5.11. Vue.version

18. Authoring reusable components