- Basics and Core Concepts
- Rendering Conditional Content and Lists
- Component Communication
- Diving Deeper into Components
-
DOM and Templates
- Vue can be used to define the goal instead of the steps (declarative approach).
- Connect Vue to HTML via "mount": Vue then renders the real DOM based on the connected template.
-
Data and Event Bindings
- You can bind data via interpolation ({{ }}) or the v-bind (":") directive.
- You listen for events via v-on ("@").
-
Reactivity
- Vue updates the real DOM for you when bound data changes.
- Computed properties and watchers allow you to react to data changes.
-
Styling
- Dynamic CSS class and inline style bindings are supported by Vue.
- Vue offers multiple special syntaxes (object-based, array-based) for efficient bindings.
-
Conditional Content
- v-if (and v-show) allows you to render content only if a certain condition is met.
- v-if can be combined with v-else and v-else-if (only on direct sibling elements!).
-
Lists
- v-for can be used to render multiple elements dynamically.
- v-for can be used with arrays, objects, and ranges (numbers).
-
v-for Variations
- You can extract values, values and indexes, or values, keys, and indexes.
- If you need v-for and v-if, DON'T use them on the same element. Use a wrapper with v-if instead.
-
Keys
- Vue re-uses DOM elements to optimize performance. This can lead to bugs if elements contain state.
- Bind the key attribute to a unique value to help Vue identify elements that belong to list content.
-
Component Communication Overview
- Components are used to build UIs by combining them.
- Components build "parent-child" relations and use "unidirectional data flows" for communication.
-
Props (parent => child)
- "Props" are used to pass data from a parent to a child component.
- Props should be defined in advance, possibly in great detail (type, required etc.).
-
Custom Events (child => parent)
- "Custom Events" are emitted (via $emit) to trigger a method in a parent component.
- Custom events can carry data which can be used in the called method.
-
Provide-Inject
- If data needs to be passed across multiple components ("pass through"), you can use provide/inject.
- Provide data in a parent component, inject it into a child component.
-
Component Registration and Styles
- Components can be registered globally or locally: Prefer local registration.
- Styles can be global or scoped to a component: Prefer scoped for most components.
-
Slots
- Slots can be used to add a "placeholder" for dynamic HTML code.
- Multiple, named slots are possible, default fallbacks can be provided. Scoped slots allow adv. use-cases.
-
Dynamic Components
- Components can be swapped dynamically via the built-in "component" component.
- Component caching can be added via the "keep-alive" component.
-
Teleport and Style Guide
- DOM structure can be manipulated via "teleport" - it keeps the component hierarchy!
- Consider following the official style guide to keep your code clean and understandable.