Vue.

js

Vue.js Framework (1/4)

Marco Monteiro
 Summary
1. Concepts
2. Vue instance

Marco Monteiro Vue.js (1/4) 2

 1 – CONCEPTS

Marco Monteiro 3
 Vue.js
} Framework for building user interfaces and
simplifying SPA development
} MVVM (Model-View View-Model) pattern
} Adoptable
} Core library focused on view layer only
} Can integrate other libraries or projects to create
full SPA applications
} Communication; Routing; State Management; Testing;
Animations; etc.
} ”Easy to learn, difficult to master”
Marco Monteiro Vue.js (1/4) 4
 Main paradigm
} UI rendering is not done directly (using DOM
or jQuery), but by using HTML-based
declarative templates and manipulating the
application model
} It is the Vue.js framework which is responsible
for the UI rendering. Vue.js binds the rendered
DOM to the underlying model data
} Similar paradigm is used by Angular, React, and
most SPA frameworks

Marco Monteiro Vue.js (1/4) 5

 Declarative Rendering
} Web page manipulation (render) is defined by
declarative rendering, using a template syntax
} View (template) includes data declarative directives
} When data value changes on the model, Vue.js will
automatically change the view to represent the
new value Application Data (Model):
var app = new Vue({
View (template): el: '#app',
<div id="app"> data: {
message: 'Olá Vue!'
{{ message }}
}
</div> })

Marco Monteiro Vue.js (1/4) 6

 Reactive two-way data binding
} UI data-binding is a technique where data
sources (variables, arrays, objects, …) are
connected and synchronized with UI elements.
} With two-way data binding, synchronization
works both ways.
} When data source changes, UI element changes
accordingly, and when UI elements changes, data
sources also changes
} Vue.js has a two-way data-binding

Marco Monteiro Vue.js (1/4) 7

 Some Template Directives
} Text Interpolation {{ data }}
} Double curly braces
} On runtime, it is replaced by the data value
} When data value changes, view also changes
} Not applicable to attributes

} v-bind – attribute interpolation

} For HTML attributes, use v-bind attribute
interpolation(text interpolation cannot be used).
<div v-bind:id="dynamicId"></div>

Marco Monteiro Vue.js (1/4) 8

 Some Template Directives
} v-if directive <div v-if="isAdmin"></div>
} Conditional directive
} UI Element presence depends of Boolean data
(true -> element is present; false -> element is not
present)

} v-for directive <li v-for="todo in todos">

} Loop directive
} For array data-binding.
} To create similar and repeatable UI Elements
– one UI element for each item on the array
Marco Monteiro Vue.js (1/4) 9
 Some Template Directives
} v-on directive
} Event directive
} Attach event listener to execute methods of the
model.
<button v-on:click="func">button text</button>

} v-model directive
} Two-way binding directive
} Only for UI elements that allow user input (form
inputs). <input v-model="message">

Marco Monteiro Vue.js (1/4) 10

 Components
} An abstraction to build large-scale applications
composed of small, self-contained, and often
reusable components.
} Application UI can be abstracted into a tree of
components

Marco Monteiro Vue.js (1/4) 11

 Vue.js components
} A Vue component is a Vue instance with
predefined options
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})

} A component can be used by other

component’s template:
<ol>
<todo-item></todo-item>
</ol>

Marco Monteiro Vue.js (1/4) 12

 Vue.js components properties
} Vue components can include properties.
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})

} Properties are used as custom attributes

<ol>
<todo-item v-for="item in groceryList"
v-bind:todo="item" v-bind:key="item.id">
</todo-item>
</ol>

Marco Monteiro Vue.js (1/4) 13

 Vue Devtools
} Before starting to create Vue applications,
install Vue.js devtools
} https://github.com/vuejs/vue-devtools

Marco Monteiro Vue.js (1/4) 14

 2 – VUE.JS INSTANCES

Marco Monteiro 15
 Vue Instances
} Vue instances are the core of Vue applications
} Every Vue application starts by creating a
new Vue instance with the Vue function
var vm = new Vue({
// options
})

} A Vue application consists of a root Vue

instance, optionally organized into a tree of
nested, reusable components

Marco Monteiro Vue.js (1/4) 16

 Instance Options
} el
} Defines the root DOM element that the Vue
instance is managing.
} data
} Object that contains all properties that respond to
Vue’s reactivity system (data binding). When the
values of those properties change, the view will
“react”, updating to match the new values.
} Properties outside of data are not reactive
} Properties in data are only reactive if they existed
when the instance was created
Marco Monteiro Vue.js (1/4) 17
 Instance Options
} “Data” properties are directly accessible from
the vue instance.
vm.$data.propertyName === vm.propertyName
} Other properties and methods of Vue instance
are prefixed with $, to differentiate them from
user-defined (data) properties

Marco Monteiro Vue.js (1/4) 18

 Instance Options
var vm = new Vue({ . . .
el: '#rootElement',
data: { vm.$el === document.
a: 1, getElementById('rootElement');
b: 'abc',
c: [1, 2, 'a'], vm.a = 20 // Reactive
d: { p: 10 } vm.e = 23 // e is not Reactive
}
}) // vm.e is not reactive. It
// will not trigger UI updates
vm.a === vm.$data.a // because “e” property was
// a is the “a” data property // not defined as an option
// vm.$data is a reference // when instance was created
// to data object
. . .

Marco Monteiro Vue.js (1/4) 19

 Instance Options
} methods
} Functions (methods) to use on the template – to
handle events or to be used on expressions
<button v-on:click="doubleVal"></button>

var vm = new Vue({

el: '#rootElement',
data: { a: 12 },
methods: {
doubleVal: function () {
this.a = this.a * 2;
} } })

Marco Monteiro Vue.js (1/4) 20

 Instance Options
} computed
} Computed properties are used as properties on the
template, but handled by a method on the model
<div> {{ reverseMessage }} </div>

var vm = new Vue({

el: '#rootElement',
data: { msg: 'some text' },
computed: {
reverseMessage: function () {
return this.msg.split('').reverse().join('');
} } })

Marco Monteiro Vue.js (1/4) 21

 Instance Options
} methods vs computed
} Methods and computed functions are similar - they
can both be used to calculate values for template
data-binding
} However, the difference is that computed
properties are cached based on their dependencies
} For instance, previous example depends of “msg”
property, which means that the value is only calculated
(computed) when “msg” has changed.
} With Methods, the value is constantly re-evaluated.

Marco Monteiro Vue.js (1/4) 22

 Instance Options
} watch
} Contains custom watchers – functions that are
executed when some data changes
var vm = new Vue({ . . .
data: { question: '',
answer: 'I’ll give an answer after you ask a question!'},
watch: {
// whenever question changes, this function will run
question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
} . . .

Marco Monteiro Vue.js (1/4) 23

 $watch
} Monitor changes.
} $watch is a callback that is called when an
expression or a computed value changes.
} The new value and the old value are passed on to
the callback.
var vm = new Vue({
data: { a: 1 }
})
vm.$watch('a', function (newValue, oldValue) {
console.log('Value of a has changed from ' +
oldValue + ' to ' + newValue);
});

Marco Monteiro Vue.js (1/4) 24

 Some Instance Properties
} $el
} The root element that Vue is managing
} $data
} The data object that the Vue instance is observing
} $parent
} The parent instance (if the current instance has one)
} $root
} The root instance of the current component tree. If
current instance has no parent this values itself
} $children
} The direct child components of the current instance

Marco Monteiro Vue.js (1/4) 25

 Some Instance Properties
} $isServer
} Whether the current instance is running on the server
} $options
} The instantiation options used for current instance
} $props
} An object representing the current props a component has
received
} $attrs
} Parent-scope attribute bindings (except for class and style)
that are not recognized (and extracted) as props
} $listeners
} Parent-scope v-on event listeners

Marco Monteiro Vue.js (1/4) 26

 Some Instance Methods
} $watch()
} Monitor changes of expressions or computed values
} $forceUpdate()
} Force the Vue instance to re-render.
Note it does not affect all child components
} $emit()
} Triggers an event on the current instance
} $on()
} Listen for a custom event on the current instance
} $once()
} Listen for a custom event, but only once
} $off()
} Remove custom event listener

Marco Monteiro Vue.js (1/4) 27

 Instance Lifecycle

Marco Monteiro Vue.js (1/4) 28

 Instance Lifecycle Hooks
} Instance Lifecycle Hooks allow users to add
their own code at specific stages of the Vue
instance lifecycle. Example:

new Vue({
data: { a: 1 },
created: function () {
console.log('Vue instance was just created')
}
})

Marco Monteiro Vue.js (1/4) 29

 Instance Lifecycle Hooks
} beforeCreate, created
} When instance is created and initialized
} beforeMount, mounted
} When instance is mounted to a DOM element
(association between DOM element and the Vue
instance is completed)
} beforeUpdate, updated
} When data (reactive data) is changed and DOM element
is re-rendered
} beforeDestroy, destroyed
} When vue instance is about to be destroyed

Marco Monteiro Vue.js (1/4) 30

 BIBLIOGRAPHY

Marco Monteiro 31
 Bibliography
} Vue.js, https://vuejs.org
} Anthony Gore, Exploring Vue.js: Reactive Two-Way
Data Binding, https://medium.com/js-dojo/exploring-
vue-js-reactive-two-way-data-binding-da533d0c4554
} vue-devtools, https://github.com/vuejs/vue-devtools
} Laracasts, “Learn Vue 2: Step By Step”,
https://laracasts.com/series/learn-vue-2-step-by-step

Marco Monteiro Vue.js (1/4) 32