- What
- Why
- Instance
- components
- global registration
- Local registration
- Props & data
- computed
- watchers
- Bindings
- events
- classes
- states
- Tips & tricks
- Bonus examples
- Basics of
Vue
🚀 - Not using .vue files
- using existing DOM as templates
Vue is a progressive framework for building user interfaces.
- Binds data / states to the DOM
- Reactive: data changes > DOM changes
- A Vue instance/component works like a (view)model. Populating and mutating its own data.
The attached DOM reacts accordingly.
- Fast
- Easy to learn
- Easy to write (no
.jsx
, although you can use.vue
) - Easy to install
- Detailed, clean and understandable docs
- No one million thousand dependencies
- An application is started with one
Vue
instance.- Often refered as the
vm
, for view model
(remember, depending on the view model, the DOM is manipulated) - only one instance should be needed per page
- Often refered as the
- My first VueJS instance
At a high level, components are custom elements that Vue’s compiler attaches behavior to
- Components live inside a
Vue
instance - Registered with an
id
, used in the DOM with thatid
as tag - Components are reusable (also inside the same instance)
Registrate global to use it anywhere in the Vue
instance.
No need to let the instance know which components are used.
Global registration:
Vue.component('my-custom-component', {
mounted() {
//
},
});
- Only create a config object, aka the definition
*Make the component only available in the scope of another instance / component
(docs)
Local registration:
// component definition
const myComponent = {
mounted() {
//
},
};
// usage in an instance
new Vue({
components: {
'my-custom-component': myComponent,
},
});
- The core of a
Vue
instance / component - Two different purposes
- Scoped to the component
- Should not be altered from outside the component
- Can't receive data from parent
- Can pass data to child components
- VueJS uses one way data flow, from parent to child
- Parent passes
data
to child - Child receives it as a
prop
- Parent changes
data
,prop
changes in child - Component can't directly alter its own
props
-
A child component needs to explicitly declare the props it expects to receive using the props option Docs
- Two different type of props:
- dynamic
- static
- Return a property, based on other
props
ordata
- Computed properties are reactive
// Component JS
data() {
return {
firstName: 'Bertus',
lastName: 'Stijgerpijp',
};
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
},
},
// HTML
{{ fullName }}
- events: Easily bind click, input, etc events on inputs
- classes: Add or remove classes based on the data
- states: Display or hide elements based on the data
Bindings demo
v-cloak
attributeinline-template
- Devtools
-
- loop through an array to render a list
- add and remove items from the list
-
- Fetch movies from themoviedb.org
- Render results in a list
- Load details for a movie