Vue by Abbas Ghaith

Software Engineer at Microtech Solutions S.A.L.

Email: abbasghayth5@gmail.com
Phone: 76 775 365

• Vue.js is a progressive framework for building user interfaces. Unlike other monolithic
frameworks.
• Vue.js is designed from the ground up to be incrementally adoptable.

Introduction to Vue.js
• What is Vue.js?
o Vue.js is a framework used to help organize JavaScript functionality.
o Compartmentalizes pages to allow for easy web page maintenance.
o Based on Node.js and similar to React frameworks.
o Provides an approachable, versatile, and performant experience.

• Why Vue.js?
o Google, Apple are users of Vue.js.
o Vue.js is super easy to use.
o Very similar to React.
o Data updates in real time in all the appropriate places.
o Can build logic right into HTML elements.
o Highly Scalable.
Setting up of Vue.js environment
• Packages
o Vetur

o Live Server
• Extensions
o Vue.js devtools

• Libraries
o Vue.js

Understanding Vue.js fundamentals

Vue Directive
• v-if/v-else
o if true SHOW content
o if false, REMOVE content
o if else condition exists show alternative result
• v-show
o if true SHOW content
o if false, HIDE content
• v-for
o used for looping over data sets
• v-model
o Creates Binding
o Render "message" variable
• v-on
o Adds 1 via v-on:click
o Subtracts 1 via @click
o Render "counter" variable

Vue Methods
• They are functions associated with the Vue instance.
• The functions are defined inside the methods property.
• Useful for connecting functionality to directives for events.
• We can perform actions through methods and use the onclick directive in tandem to run
them.

Vue Computed
• Computed is similar to methods properties but are cached based on their dependencies.
• Highly performant but should be used cautiously.
• Runs only when a reactive dependency has changed.
• Does not always run the function when a re-render occurs (like methods).
• Methods can be very expensive if looping through a large array / complicated
computation.

GET Requests
• We can use Axios directly in our components to fetch data from a method, lifecycle
hook, or whenever.

POST Requests
• One can send POST, PUT, PATCH, and DELETE requests just as easily.
Note: It’s a terrible idea to send requests on every input event, at the very least do some
throttling or debouncing.

Watchers
• Generic way to observe and react to data changes on a Vue Instance.
• When we have some data that needs to change based on some other data.
• Should be used cautiously and in most cases want to use computed.
• Most useful when we want to perform asynchronous or expensive operations in response
to changing data.
Understanding of Vue.js library
Vue.js is a popular JavaScript library for building web application user interfaces and it’s
one of the upcoming JavaScript based framework. It’s an open source progressive
JavaScript framework used to develop interactive web interfaces. Vue.js focuses on the
view layer. It can be easily integrated into big projects for front-end development without
any issues. The installation for Vue.js is very easy to start with. Any developer can easily
understand and build interactive web interfaces without consuming much time. Vue.js is
created by “Evan You” and the first version of Vue.js was released in Feb 2014.
Understanding of Vue.js lifecycle
Below is a diagram for the instance lifecycle. We don’t need to fully understand everything
going on right now, but as we learn and build more, it will be a useful reference.
Vue.js templating & view model
Templating
• Templating allows to bind values from the model into the view. In Vue, this can be
achieved using simple HTML binding.
• Interpolation - Display a variable in our HTML in a fairly traditional way.
o Text
➢ The most basic version is using double curly braces, commonly known as the
mustache syntax.
➢ This would create a one-way data binding from the model to the template.
➢ Displaying the raw value in the template.
➢ One way binding refers to the binding method where data is sent from the model
to the view, but not the other way around.
o One time binding
➢ We can use the v-once directive to bind once and stop tracking the item.
➢ Using v-once means that a later change to the value in the model does not affect
the displayed value in the template.
o Raw HTML
➢ Binding a string containing HTML tags using the previously discussed methods
will print out the expression as a plain string.
➢ If we need to evaluate the tags in the HTML, and we trust the source of the
HTML, we can use the v-html to ask Vue to evaluate the string as HTML.
o Attributes
➢ In addition to values, we can add attributes to elements using Vue templating.
➢ Instead of the mustache syntax, we can use the v-bind directive to bind values
from the model into attributes.
o JS Expressions
➢ Vue supports evaluating simple expressions inside data bindings.
o Directives
➢ Vue provides a set of built-in directives prefixed with v- that allow DOM
manipulation inside the template in response to model changes.
o Filters
➢ Filters can be used with model values to modify the given value for displaying in
the view.

View Model
• Vue instance that binds the model and view together, enabling them to communicate with
each other.
• The idea behind these fancy words is that the model and the view will always stay in
sync.
• Changing the model will instantly update the view, and vice versa. This if we want to
update our state from props.

Vue.js event handling

• Vue.js allows us to handle events triggered by the user.
• Handling events helps add interactivity to web apps by responding to the user’s input.
• Vue.js offers us a directive called v:on which helps us to register and listen to the DOM
events so that whenever an event is triggered the method passed to that event is invoked.
• How to pass arguments to the Event handlers?
o Sometimes Event handler methods can also accept arguments.
• How to access the default event object?
o To access the default event object in methods vue.js provides a variable called $event.

Vue.js data passing

• In Vue.js, components can have custom attributes (Props).
• We can register props on a component and pass a value to them.

Vue.js routing
• Routing is the action of finding the way to multiple destinations. This applies to different
areas.
• In web development, we can see two main areas of routing:
o Back-end: the router calls the right controller, matching a URL pattern.
o Front-end: the router loads the corresponding component into the view, matching a
URL pattern.

Vue.js & Axios

• Axios is a library for http communication, making ajax requests, and so on.
• There is also a library called ‘vue-resource’ to do such things, but it’s said that it is not
used well due to its slow update cycle and larger community of Axios.
• Install Axios
o Enter the following command line to install Axios.
➢ npm install --save axios
o Then add method in main.js so that Axios can be used globally.
➢ import axios from 'axios'
➢ Vue.prototype.$http = axios
• Using Axios
o Using a service called JSONPlaceholder, test the Axios installed.
Internet Explorer
• Basically, IE doesn’t support promise, so we may need polyfill of es6-promise to enable
it.
• Install it with command below.
o npm install --save es6-promise
• Next, just add one line below in our webpack config file.
o require('es6-promise').polyfill();

MEVN Stack tutorial Technologies

• Node
• NPM
• MongoDB
• Vue JS
• Express

Vue CRUD by Abbas Ghaith