SE 1 (Web Development Course)

Section 7 (Vue.JS [1-3])

 What is VueJS?
● VueJS is: (pronounced /vjuː/, like view)

○ is a JavaScript framework for building user interfaces

■ This framework is progressive because it allows to : (1) make just

specific parts that you need of your application or (2) Or if it is
necessary you can make a full complex front-end application
○ is basically built for frontend development
■ So, we are going to deal with lot of HTML, JavaScript and CSS files

○ is focused on the view layer only, and is easy to pick up and integrate with
other libraries or existing projects
 VueJS – Key Features
● VueJS has the following features:

○ Simple(low barrier of entry)

○ Lightweight (~24kb min+gzip)

○ Fast

○ Reactive

○ Component based
 Installing with VueJS
● You can install the VueJS framework in different ways:
1. Using the <script> tag in you HTML file

2. CDN (Content Delivery Network)

3. CLI (Command Line Interface)
■ To develop a complete Single Page Application with Vue

4. npm (node.js package manager):

■ It is the recommended installation method when building large scale
applications with Vue
■ npm is the world's largest Software Library (Registry)
■ software Package Manager and Installer
 Installing VueJS - <script>
1. Using the <script> tag in you HTML file:
1. Download it from:

■ https://vuejs.org/v2/guide/installation.html

2. And Include the vue script in your HTML page as follow

 Installing VueJS - CDN
2. CDN (Content Delivery Network) library (online):
○ Just import and Include the vue in your HTML page using the CDN link

■ “https://unpkg.com/vue@next” which import the latest version of vue

 Installing VueJS – VUE-CLI
2. CLI (Command Line Interface)

○ Before working with Vue CLI, you must install Node.JS

Installing NodeJS

Open this to start working with

Vue CLI
 Installing VueJS – VUE-CLI
● Two ways to create a vuejs project with vue-cli:

1. Via commands on vue-cli

2. Vie UI
 Installing VueJS – VUE-CLI
● Two ways to create a vuejs project with vue-cli:

1. Via commands on vuecli

 Installing with VueJS
4. npm (node package manager):
 Installing VueJS - Vue Devtools
● It is recommended also installing the Vue Devtools in your
browser
● Devtools allowing you to inspect and debug the Vue
applications in a more user-friendly interface.
● To add them follow these steps:
And explore the magic of vue.js framework
Today, we will just work with CDN installation
{{}} called interpolation Vue.JS – Hello World

determines which HTML elemen create a vue instance/object to start working with vue

t u want vue to manipulate

Data is an object which contains

data thatwill be displayed on the br
owser and this object contains
variables declaration and
methods
 Vue.JS – directives
● Vue directives:

○ are the part of Vue.js

○ attach special meaning and behavior to plain HTML elements on the page

○ Control the JS DOM by updating it with any changes based on

○ Various directives are v-bind, v-model, …

 Vue.JS – directives
● v-model directive:
Two way binding: every change
in the input value will change
○ makes two way binding between the HTML element
the {{message}} and the data attribute
and vice versa
it refers to in the Vue JavaScript code

○ Example
 Vue.JS – directives
● Conditionals directives:
○ 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

○ Example
 Vue.JS – directives
● v-show directive:
○ v-show: used to conditionally display an element (CSS based)

○ But: v-if, v-else, v-else-if directives are used to conditionally render an

element
 Vue.JS – directives
“title” is an
“v-bind:title” attribute
is the sameofasbutton
elemnt
● v-bind
“:title”directive:
U can also use v-bind to
dynamically add classes
○ used to dynamically bind one or more attributes (of HTML
element), or a component prop, to an expression (in vue)

○ Example
 Vue.JS – directives
● v-text directive:

○ same as {{ interpolation }} and updates the element’s textContent

○ Examples
 Vue.JS – directives
Can be shorted to @click
v-on
●instead of directive:
v-on:click

○ Used for Event Handing

○ listen to DOM events (click, keyup, submit, etc..) and run some
JavaScript when they’re triggered

○ Example
 Vue.JS – directives
● loop (v-for) directives:

○ v-for: iterate over a range, an array, an object, or an array of objects

○ Example
 Vue.JS – directives
● Other directives:

○ v-html

○ v-once

○ …
 Vue.JS – methods
● To create a method in vue.js:

○ Add the methods object to the vue instance

Method: changes the actual Filter: changes the value of
value of the newCar variable newCar variable only in the
Vue.JS – filters DOM

● Filters:

○ are similar to methods, they are an object of functions

○ Are used to update any thing in the DOM and not the actual value
of the HTML elements

○ Example
Thanks