VueJS

• Intro
• What
• Why

• Vue instance
• Components
  • Global registration
  • Local registration

• Data
  • Props & data
  • Computed
  • Watchers
• Bindings

• Tips & tricks
• Bonus examples

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.

a high level, components are custom elements that Vue’s compiler attaches behavior to

• Components live inside a Vue instance
• Create your own tag
• Components are reusable
  (also inside the same instance)
• Demo

Global registration

• 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() {
							    //
							  },
							});
					

Local registration

• 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
• Demo data & props

Data

• Scoped to the component
• Should not be altered from outside the component
• Can't receive data from parent
• Can pass data to child components

Props 1/2

• 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 *
• Child can't directly alter its own props

Props 2/2

A child component needs to explicitly declare the props it expects to receive using the props option

* Two different type of props: dynamic & static

Computed properties 1/2

• Return a property, based on other props or data
• Computed properties are reactive

Computed properties 2/2

							// Component JS
							data() {
							  return {
							    firstName: 'Bertus',
							    lastName: 'Stijgerpijp',
							  };
							},

							computed: {
							  fullName() {
							    return `${this.firstName} ${this.lastName}`;
							  },
							},
						

							// HTML
							{{ fullName }}