Vue.js

Jadson Santos
Computing Engineer

Vue.js
•  Vue (pronounced /vjuː/, like view) is a progressive
framework for building user interfaces
•  The core library is focused on the view layer only,
and is easy to pick up and integrate with other
libraries or existing projects.
•  On the other hand, Vue is also perfectly capable of
powering sophisticated Single-Page Applications
2Vue.js

Vue.js
•  Progressive framework is a framework that you can
insert into your project as you feel the need for it
•  Differently of other JavaScript framework like
Angular, that since the beginning, you need a full
project make in Angular, follow the “Angular rules”.
•  This implies you need to learn a lot of things to start
programming with Angular.
3Vue.js

Vue.js
•  Vue is more simple and flexible
•  Vue allows you make just specific parts of your
application. You learn just what is necessary for the
problem you are dealing with.
•  Or if it is necessary and you have time, you can learn
more and make a full complex front-end application
100% Vue.
4Vue.js

Vue.js
•  Vue uses Javascript, Angular relies on TypeScript
•  Vue is pretty easy to learn, Angular’s learning curve is
much steeper
•  Vue Is indicated if you are working alone or have a
small team, Angular is for really large applications.
5Vue.js

Vue.js
•  While Angular offering data binding to deal with the
DOM without having to touch it directly, there were
still extra concepts that demanded code be
structured a certain way.
•  Vue had these efficiencies, but was even more
lightweight.
6Vue.js

Vue.js Hello World
•  Download it from:
•  https://vuejs.org/v2/guide/installation.html
•  And Include the vue script in your HTML page
8Vue.js

Vue.js Hello World
•  Now we have to indicate the part of HTML that Vue.js
will look at and use.
•  We will create the div with “app” id
10Vue.js

Vue.js Hello World
•  Create a new Vue() object with the “el” and “data”
elements.
•  el tell which element of our HTML we want Vue manipulate
•  The "data" field receives a javascript object with the data
that will be manipulated in the context of our application
11Vue.js

Vue.js Hello World
•  To show the data of the variable "message" in the div
app we use the interpolation putting the variable
"message" between double keys {{ }} inside the div.
12Vue.js

Vue.js Hello World
•  Open the html file in a browser
13Vue.js

Vue.js Directives
•  Directives are the part of Vue.js that attach special
meaning and behavior to plain html elements on the
page
16Vue.js

Vue.js V-model
•  v-model directive to make two way binding
between the HTML element and the data attribute it
refers to in the Vue JavaScript code
17Vue.js

Vue.js V-model
•  When you type your name in the input text with v-
model, the value type if update in the message
data of Vue model and the HTML view {{message}} is
updated too.
•  Vue message variable ßà HTML {{message}}
interpolation
18Vue.js

Vue.js Conditionals and Loops
•  v-if directive can be used to test some conditions
over the JavaScript object data
•  v-else directive can be used when the conditions on
the v-if fails
•  v-else-if directive can be used much like you would
use else-if clauses in JavaScript
19Vue.js

20Vue.js

Vue.js Directives Summary
•  v-model: used to create a two way binding
between the element and the data
•  v-show: used to conditionally display an element (css
based)
•  v-if, v-else, v-else-if: used to conditionally render an
element
•  v-for: iterate over a range, an array, an object, or an
array of objects
21Vue.js

•  v-for directive can be used for interact over a list of
items over the JavaScript object data
22Vue.js

Vue.js Directives Summary
•  v-on: listen to various DOM events (click, keyup,
submit, etc..)
•  v-bind: used to dynamically bind one or more
attributes, or a component prop, to an expression
•  v-text: same as {{ interpolation }} and updates the
element’s textContent
23Vue.js

Vue.js Components
•  Components are reusable structures with
encapsulated functionalities. That is, elements that
have html, css and javascript encapsulated and that
can be reused either within the same project or even
in others projects
24Vue.js

Vue.js Components
•  In Vue, a component is essentially a Vue instance
with pre-defined options
25Vue.js

Vue.js Class and Style Bindings
•  Vue provides special enhancements when v-bind is
used with class and style
26Vue.js

Vue.js Event Handing
•  We can use the v-on directive to listen to DOM
events and run some JavaScript when they’re
triggered
27Vue.js

Vue.js CLI
•  You can develop a complete Single Page
Application with Vue using vue-cli
•  Install it via the node.js package manager (npm)
29Vue.js

Vue.js CLI
•  What is Node.js and NPM?
•  Node.js is javascript development platform, the uses the
google’s engine V8. Basically, you cat execute
javascript applications on server side (out of a web
browser)
•  NPM is a package manager of Node.js, where you can
manager the javascript dependences of your project
( like maven ou gradle does in Java world ).
•  Similar Angular, Vue.js is not made in Node.js and does
not need Node.js to run, but use its package manger.
30Vue.js

Vue.js CLI
•  Download and install node.js from:
https://nodejs.org/en/
•  It will automatically install npm package manager
31Vue.js

Vue.js CLI
•  After that, install vue command line interface tool
with the commands:
•  $sudo npm install -g vue-cli
32Vue.js

Vue.js CLI
•  Creating a new vue project with vue-cli:
•  $ vue init <template-name> <project-name>
•  This command creates a project-name folder with a
new vue project using a vue template.
•  What is a vue template?
•  Vue.js does not define a default project structure
for vue projects, so you have choose what will be
your project structure.
33Vue.js

Vue.js CLI
•  There are three principal vue templates:
•  webpack – Uses the webpack as module bundler. It has
support to vue-loader with hot reload, javascript lint and units
tests. It is the more complete template.
•  webpack-simple – Simplification of webpack structure, for
example, it do not creates the unit test folders
•  browserify - It has support to vue-loader with hot reload,
javascript lint and units tests. It is more simple that webpack.
34Vue.js

Vue.js CLI
•  We will use the webpack, to to create a project
called “hello-vue-cli”, use the command:
•  $ vue init webpack-simple hello-vue-cli
35Vue.js

SPA with Vue.js
•  To run the empyt project:
•  cd hello-vue-cli
•  npm install (to downdoad the dependences)
36Vue.js
node_modules: vue.js dependences
src: Our Vue code
assets: imgs and other external files of our application
index.html: main and unique page of application
App.vue: The main vue componet

SPA with Vue.js
•  The default structure of a vue component is
composed of three elements: template, script, and
style
37Vue.js

SPA with Vue.js
•  To run the empyt project
•  npm run dev ( development environment )
38Vue.js

SPA with Vue.js
•  Vue.js install dependences
•  npm install font-awesome -- save
•  npm install bulma -- save
•  npm install bootstrap -- save
•  etc…
•  This will be install inside the node_modules. To include
them, open tem index.html and include it on <head>
tag
39Vue.js

Create a new Vue Component
•  Create a new .vue file with template, script and css.
•  Give a name to this new component
40Vue.js

Create a new Vue Component
•  Import it com App.vue component
•  Use this new component with the same name you declare
insde componet .vue file
41Vue.js

Visual Studio Code
•  Syntax Highlight
•  Compiler
•  Integrated Terminal
43Vue.js

Vue Extensions
•  For development install Vue.js devtools on Firefox or
Chrome
44Vue.js

Vue Extensions
•  For development install Vue.js devtools on Firefox or
Chrome
45Vue.js

Vue communication between components
46Vue.js

•  Son -> Father
•  Son emit a event:
47Vue.js

•  Son -> Father
•  Father listener the event of son and call another function:
48Vue.js

•  Father -> Son
•  Father pass value to son component:
49Vue.js
•  Son receive the value of the Father component

Vue.js Routes
•  Routers is the way you can “change” the page at
single-page applications
•  Create a project and install the vue-router library
vue init webpack-simple vue-routers
cd vue-routers
npm install
npm install vue-router --save
npm run dev
51Vue.js

Vue.js Routes
•  Create two components Bar and Foo
•  Create a file routes.js
•  At this file define a variable routes with path “/foo” to Foo
component and “/bar” to Bar Component
52Vue.js

Vue.js Routes
•  Now at the main.js:
•  Import the vue-router library,
•  Import the routes.js file
•  Declare Vue.use (VueRouter)
•  Create a na VueRuter variable and, define this variable at
app component
53Vue.js

Vue.js Routes
•  Now at the main.js:
54Vue.js

Vue.js Routes
•  At app component, include <router-link> to /foo
and /bar, and a <router-view> ( where the
components will be rendered ):
55Vue.js

Vue.js Routes
•  When click at the router-link /foo, the foo
component is rendered, and click at the router-link /
bar, the bar component is rendered:
56Vue.js

Vue.js Routes
•  Children routes:
57Vue.js

Vue.js Routes
•  Children routes:
58Vue.js

Vue.js connecting with the back-end
59Vue.js

•  Axios is a great http client library.
•  It uses promises by default and runs on both the
client and the server (which makes it appropriate for
fetching data during server-side rendering).
•  It’s also quite easy to use with Vue. Because it uses
promises, you can combine it with async/await to
get an amazingly concise and easy-to-use API.
60Vue.js

•  Install Axios:
vue init webpack-simple vue-rest-api
cd vue-rest-api/
npm install
npm install axios --save
61Vue.js

•  Back-end:
•  spring boot application:
62Vue.js

•  Back-end:
•  spring boot rest controller:
63Vue.js

•  Back-end:
•  Allow CORS origing for spring rest controllers.
•  Front-end and back-end will run at different address, so we
need to enable this configuration or our request will be block
64Vue.js

•  Front-end:
•  Create a file http-common.js and declare an AXIOS constant
and import it on App.vue component
65Vue.js

•  Front-end:
•  Declare data to hold the information, a user object and an
array of users.
66Vue.js

•  Front-end:
•  Configure fields to this data and action to call vue methods
that will call the back-end REST service
67Vue.js

•  Front-end:
•  Create vue methods, and use the axios instance HTTP to call
get and post back-end services.
68Vue.js

Vuex
•  If your Vue.js application grows bigger and consists
of multiple components you might run into the
problem of how to share data across the those
components and make sure that components which
are using the same data are always updated if data
is changing
•  Vuex is a library to use as a centralized state
management in your application.
70Vue.js

Vuex
•  Vuex Store concept:
•  State Tree: An object containing the data
•  Getters: Used to access data from the state tree of the store
•  Mutations: Handler functions that perform modifications of
data in the state tree
•  Actions: Functions that commit mutations. The main
difference to Mutations is that Actions can contain
asynchronous operations
71Vue.js

Vuex
•  Installation
•  Include via CDN (Content Delivery Network):
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
•  Or via npm:
vue init webpack-simple vue-vuex
cd vue-vuex/
npm install
npm install vuex - - save
npm run dev
72Vue.js

Vuex
•  Within the src folder create a new subfolder named
store. Within that folder create a new file store.js and
insert the following code:
73Vue.js

Vuex
•  First you need to import store. Next, add store to the
configuration object which is passed to the Vue
constructor. By providing the store option to the root
instance, the store will be injected into all child
components of the root and will be available on
them as this.$store:
74Vue.js

Vuex
•  Now we can implement a simple counter:
75Vue.js

Vuex
•  Keep vuex data between request
•  npm install vuex-persistedstate
•  npm install vue-cookies
76Vue.js

Vue Pre-rendering
•  One of the downsides to Javascript-based apps is
that the browser receives an essentially empty page
from the server. The DOM cannot be built until the
Javascript has been downloaded and run.
•  It have an impact on SEO (Search Engine
Optimization) if crawlers can’t see content of the
page quickly
78Vue.js

Vue Pre-rendering
•  Server-side rendering (SSR) overcomes this issue by
rendering the app on the server so that the client
receives the complete DOM content when the page
is loaded, before Javascript is even run.
•  Your app will need to be executable on the server,
•  Your app will run on each request to the server, adding
aditional load and slowing responses
•  You can only do SSR with Node.js
79Vue.js

Vue Pre-rendering
•  There’s another way to tackle the empty page
problem: pre-rendering.
•  With this approach you run your app before deploying it,
capture the page output and replace your HTML files with this
captured output
•  It’s pretty much the same concept as SSR except it’s done
pre-deployment in your development environment, not a live
server
80Vue.js
DEV PROD
pre-
rendering

Vue Pre-rendering
•  Pre-rendering pros
•  No additional server load,
•  A simpler production setup and simpler app code
•  Doesn’t require a Node.js production server
•  Pre-rendering cons
•  Doesn’t work for pages that display changing data e.g. tables
•  Doesn’t work for pages that have user-specific content e.g.
an account page with a user’s personal details
•  You’ll need to pre-render every route in the app indiviually.
81Vue.js

Vue Pre-rendering
•  Let’s take our vue-router project with 2 routers /foo
and /bar
82Vue.js

Vue Pre-rendering
•  Step 1: There are three additional modules we’ll
need to install
npm install http-server html-webpack-plugin
prerender-spa-plugin --save
83Vue.js

Vue Pre-rendering
•  Step 2: Include Webpack and PrerenderSpa plugins
•  Open the webpack.config.js file and include http-webpack-
plugin and prerender-spa-plugin
84Vue.js

Vue Pre-rendering
•  Step 3: Change the build.js location
•  Now we change our Webpack “publicPath” in same
webpack.config.js file since the index.html will now be in the
same folder as the other static assets
•  And we’ll also need to change location of the build.js file in
our index.html file due to the changed path
85Vue.js

Vue Pre-rendering
•  Step 4: Include index.html and add pre-render
•  The webpack-simple template doesn’t include the index.html
file in the Webpack build output. However when we pre-
render the app we’ll need to overwrite our index.html, so let’s
add it to the output so as not to destroy the original
•  Now we need to add prerender-spa-plugin to our webpack
config. Make sure it comes after html-webpack-plugin
•  New add the index.html and our routes
•  The first argument to PrerenderSpaPlugin is the location of our
index.html file, the second is a list of routes in the app.
•  For each route we add, we’ll get a different output file!
86Vue.js

Vue Pre-rendering
•  Step 4: Include index.html and add pre-render
87Vue.js

Vue Pre-rendering
•  Step 5: Building
•  Now make the build for production
•  npm run build
•  It will generated one folder for each route with the static html
code
88Vue.js

Vue Pre-rendering
•  Step 6: Running
•  You can run the application inside dist folder using the http-
server
./node_modules/.bin/http-server ./dist/
•  It generated the static content of page, but not the dynamic
information.
•  The “Foo” word is not present
89Vue.js

Awesome Vue
https://github.com/vuejs/awesome-vue
90Vue.js

• Source Code
•  https://github.com/jadsonjs/vuejs
91Vue.js

• References
•  https://vuejs.org/v2/guide/
•  https://www.devmedia.com.br/vue-js-tutorial/
38042
•  https://www.shopify.com/partners/blog/vuejs-
tutorial
•  https://github.com/vuejs-templates/webpack
•  http://www.vuejs-brasil.com.br/crie-rapidamente-
um-projeto-vue-com-vue-cli-e-browserify/
•  https://medium.com/@thiagorossener/como-fazer-
um-hello-world-com-vue-js-2-62ea708c1399
92Vue.js

• References
•  http://vegibit.com/vue-js-directives/
•  https://alligator.io/vuejs/rest-api-axios/
•  https://www.thepolyglotdeveloper.com/2017/10/
consume-api-data-http-vuejs-web-application/
•  https://medium.com/codingthesmartway-com-
blog/vue-js-2-state-management-with-vuex-
introduction-db26cb495113
•  https://vuejsdevelopers.com/2017/04/01/vue-js-
prerendering-node-laravel/
93Vue.js

94Vue.js
source: https://blog.hellojs.org/differences-between-angularjs-vuejs-and-reactjs-5d80203dfd16
thank you

Vue.js

More Related Content

What's hot (20)

Similar to Vue.js (20)

More from Jadson Santos (19)

Recently uploaded (20)

Vue.js