VUE.

JS
A SEMINAR REPORT

Submitted by

Mr. VAISHNAV MK
(19132319)

To The department of technical education Government of Kerala

in partial fulfillment of the requirements for the award of

Diploma in COMPUTER ENGINEERING

DEPARTMENT OF COMPUTER ENGINEERING

MA’DIN POLYTECHNIC COLLEGE MELMURI.P.O,
MALAPPURAM
JUNE 2021-2022
 DEPARTMENT OF COMPUTER ENGINEERING

MA’DIN POLYTECHNIC COLLEGE MELMURI.P.O,

MALAPPURAM

CERTIFICATE

This is to certify that the SEMINAR REPORT entitled VUE.JS

Submitted by VAISHNAV MK (19132319) to the Department of Technical Education
Government of Kerala towards partial fulfillment of the requirements for the award
of the Diploma in Computer Engineering is a confide record of the work carried out
by her under my supervision and guidance.

HEAD OF SECTION: LECTURE IN CHARGE:

Mrs.ANJALI.C Mrs.RINCY.P

(Department seal)
 VUE.JS

DECLARATION

I hereby declare that the Seminar Report entitled VUE.JS which is

being submitted to the MPTC Malappuram under Technical Educational
Department in Computer Engineering is a benefited report of the work carried
out by me. The material contains in this report as to been submitted to any
institute or university for the award of any degree.
.

Place: Malappuram

Date:

DEPT OF COMPUTER ENGINEERING 1 MPTC, MALAPPURAM

 VUE.JS

ACKNOWLEDGEMENT

I give all honor and praise to the GOD who gave me wisdom and enabled me to
complete my seminar on "FLASK WEB FRAMEWORK" successfully.Then I express
my sincere thanks to, Mr. ABDUL HAMEED C.P, Principal, MA’DIN polytechnic
college Malappuram, who permitted to make use of the college facilities such as the
Software Labs, Internet etc at maximum possible extent.

I take this opportunity to express my whole hearted thanks to Mrs.ANJALI.C, Head of

the Department, and Computer Engineering for her continuous support and the
inspiration given during the study and analysis of the seminar topic.

I am deeply indebted to Mrs. RINCY.P, Mrs. NAFSILA.M, seminar coordinators,for

their support in my seminar.They helped me to overcome several constraints during the
development of this seminar.
Last,I express my humble gratitude and thanks to all my teachers and other faculty
members of the Department of Computer Engineering,for their sincere and friendly
cooperation in completing this seminar.

DEPT OF COMPUTER ENGINEERING 2 MPTC, MALAPPURAM

 VUE.JS

ABSTRACT

Vue (pronounced /vjuː/, like view) is a progressive framework for building user
interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to
be incrementally adoptable. 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 SinglePage Applications when
used in combination with modern tooling and supporting libraries.

DEPT OF COMPUTER ENGINEERING 3 MPTC, MALAPPURAM

 VUE.JS

CONTENTS

CHAPTER TITLE PAGE NO

1 INTRODUCTION 06
2 VUEJS OVERVIEW 07
2.1 FEATURES 07
2.2 COMPARISON WITH OTHER 09
FRAMEWORK
2.3 VUEJS VS OTHERS 10

3 VUEJS-ENVIRONMENT SETUP 14
3.1 USING THE <SCRIPT> 14
3.2 USING CDN 14
4 VUEJS INTRODUCTION 16
4.1 EXAMPLE 17
4.2 OUTPUT 14
5 COMPUTED PROPERTIES 18
5.1 REMARKS 18
5.2 EXAMPLES 18
5.3 COMPUTED FEATURES VS WATCH 20
5.4 COMPUTED EXAMPLES 21
5.5 COMPUTED SETTERS 21
5.6 USING COMPUTED SETTERS 23
5.7 STYLING 24
6 CONDITIONAL RENDERING 28
6.1 REMARKS 28
6.2 V-SHOW 30
7 CUSTOM COMPONENTS WITH 32
V-MODEL
7.1 INTRODUCTION 32
8 CUSTOM DIRECTIVES 36

DEPT OF COMPUTER ENGINEERING 4 MPTC, MALAPPURAM

 VUE.JS

8.1 BASICS 36
8.2 DIRECTIVE INSTANCE PROPERTIES 37
9 CUSTOM FILTERS 41
9.1 TWO WAY FILTERS 41
9.2 BASICS 42
9.3 SYNTAX 43
10 DATA BINDING AND DYNAMIC 44
COMPONENTS
10.1 DATA BINDING 44
10.2 SIMPLE DYNAMIC COMPONENT 45
10.3 PAGES KEY WITH NAVIGATION ALIVE 47
11 CONCLUSIONS 50

DEPT OF COMPUTER ENGINEERING 5 MPTC, MALAPPURAM

 VUE.JS

CHAPTER 1

INTRODUCTION

Vue.js is a rapidly growing front-end framework for JavaScript, inspired by

Angular.js, Reactive.js, and Rivets.js that offers simplistic user-interface design,
manipulation, and deep reactivity. It is described as a MVVM patterned
framework, Model-View View-Model, which is based on the concept of two-way
binding data to components and views. It is incredibly fast, exceeding speeds of
other top-tier JS frameworks, and very user friendly for easy integration and
prototyping.

HELLO WORLD PROGRAM

To start using Vue.js, make sure you have the script file included in your HTML.
For example, add the following to your HTML.

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

HANDLING USER INPUT

VueJS can be used to easily handle user input as well, and the two way binding
using v-model makes it really easy to change data easily.

DEPT OF COMPUTER ENGINEERING 6 MPTC, MALAPPURAM

 VUE.JS

CHAPTER 2

VUEJS OVERVIEW

VueJS is an open source progressive JavaScript framework used to develop

interactive web interfaces. It is one of the famous frameworks used to simplify
web development. VueJS focusses on the view layer. It can be easily integrated
into big projects for front-end development without any issues. The installation for
VueJS is very easy to start with. Any developer can easily understand and build
interactive web interfaces in a matter of time. VueJS is created by Evan You, an ex
employee from Google. The first version of VueJS was released in Feb 2014. It
recently has clocked 64,828 stars on GitHub, making it very popular.

2.1 FEATURES
Following are the features available with VueJS.

2.1.1 Virtual DOM

VueJS makes the use of virtual DOM, which is also used by other frameworks
such as React, Ember, etc. The changes are not made to the DOM, instead a replica
of the DOM is created which is present in the form of JavaScript data structures.
Whenever any changes are to be made, they are made to the JavaScript data
structures and the latter is compared with the original data structure. The final
changes are then updated to the real DOM, which the user will see changing. This
is good in terms of optimization, it is less expensive and the changes can be made
at a faster rate.

2.1.2 Data Binding

The data binding feature helps manipulate or assign values to HTML attributes,
change the style, assign classes with the help of binding directive called v-bind

DEPT OF COMPUTER ENGINEERING 7 MPTC, MALAPPURAM

 VUE.JS

available with VueJS.

2.1.3 ComponentS

Components are one of the important features of VueJS that helps create custom
elements, which can be reused in HTML.

2.1.4 Event Handling

v-on is the attribute added to the DOM elements to listen to the events in VueJS.
2.1.5 Animation/Transition

VueJS provides various ways to apply transition to HTML elements when they are
added/updated or removed from the DOM. VueJS has a built-in transition
component that needs to be wrapped around the element for transition effect. We
can easily add third party animation libraries and also add more interactivity to the
interface.

2.1.6 Computed Properties

This is one of the important features of VueJS. It helps to listen to the changes
made to the UI elements and performs the necessary calculations. There is no need
of additional coding for this.

2.1.7 Templates

VueJS provides HTML-based templates that bind the DOM with the Vue instance
data. Vue compiles the templates into virtual DOM Render functions. We can
make use of the template of the render functions and to do so we have to replace
the template with the render function.

2.1.8 Directives

VueJS has built-in directives such as v-if, v-else, v-show, v-on, v-bind, and
v-model, which are used to perform various actions on the frontend.

2.1.9 Watchers

Watchers are applied to data that changes. For example, form input elements.
Here, we don’t have to add any additional events. Watcher takes care of handling

DEPT OF COMPUTER ENGINEERING 8 MPTC, MALAPPURAM

 VUE.JS

any data changes making the code simple and fast.

2.1.10 Routing

Navigation between pages is performed with the help of vue-router.

2.1.11 Lightweight

VueJS script is very lightweight and the performance is also very fast.

2.1.12 Vue-CLI

VueJS can be installed at the command line using the vue-cli command line
interface. It helps to build and compile the project easily using vue-cli.

2.2 COMPARISON WITH OTHER FRAMEWORKS

Now let us compare VueJS with other frameworks such as React, Angular, Ember,
Knockout, and Polymer.

2.2.1 VueJS v/s React

Virtual DOM

Virtual DOM is a virtual representation of the DOM tree. With virtual DOM, a
JavaScript object is created which is the same as the real DOM. Any time a change
needs to be made to the DOM, a new JavaScript object is created and the changes
are made. Later, both the JavaScript objects are compared and the final changes
are updated in the real DOM. VueJS and React both use virtual DOM, which
makes it faster.

Template v/s JSX

VueJS uses html, js and css separately. It is very easy for a beginner to understand
and adopt the VueJS style. The template based approach for VueJS is very easy.
React uses jsx approach. Everything is JavaScript for ReactJS. HTML and CSS are
all part of JavaScript.

DEPT OF COMPUTER ENGINEERING 9 MPTC, MALAPPURAM

 VUE.JS

Installation Tools

React uses create react app and VueJS uses vue-cli /CDN/npm. Both are very easy
to use and the project is set up with all the basic requirements. React needs
webpack for the build, whereas VueJS does not. We can start with VueJS coding
anywhere in jsfiddle or codepen using the cdn library.

Popularity

React is more popular than VueJS. The job opportunity with React is more than
VueJS. There is a big name behind React i.e. Facebook which makes it more
popular. Since, React uses the core concept of JavaScript, it uses the best practice
of JavaScript. One who works with React will definitely be a very good with all
the JavaScript concepts. VueJS is a developing framework. Presently, the job
opportunities with VueJS are less in comparison to React. According to a survey,
many people are adapting to VueJS, which can make it more popular in
comparison to React and Angular. There is a good community working on the
different features of VueJS. The vue-router is maintained by this community with
regular updates. VueJS has taken the good parts from Angular and React and has
built a powerful library. VueJS is much faster in comparison to React/Angular
because of its lightweight library

2.3 VUEJS VS OTHERS

2.3.1 VUEJS VS ANGULAR

VueJS has a lot of similarities with Angular. Directives such as v-if, v-for are
almost similar to ngIf, ngFor of Angular. They both have a command line interface
for project installation and to build it. VueJS uses Vue-cli and Angular uses
angular-cli. Both offer two-way data binding, server side rendering, etc.

Complexity

Vuejs is very easy to learn and start with. As discussed earlier, a beginner can take
the CDN library of VueJS and get started in codepen and jsfiddle. For Angular, we

DEPT OF COMPUTER ENGINEERING 10 MPTC, MALAPPURAM

 VUE.JS

need to go through a series of steps for installation and it is little difficult for
beginners to get started with Angular. It uses TypeScript for coding which is
difficult for people coming from core JavaScript background. However, it is easier
to learn for users belonging to Java and C# background.

Performance

To decide the performance, it is up to the users. VueJS file size is much lighter
than Angular. A comparison of the framework performance is provided in the
following link
http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
Popularity

At present, Angular is more popular than VueJS. A lot of organizations use

Angular, making it very popular. Job opportunities are also more for candidates
experienced in Angular. However, VueJS is taking up the place in the market and
can be considered as a good competitor for Angular and React.

Dependencies

Angular provides a lot of built-in features. We have to import the required modules
and get started with it, for example, @angular/animations, @angular/form. VueJS
does not have all the built-in features as Angular and needs to depend on third
party libraries to work on it.

Flexibility

VueJS can be easily merged with any other big project without any issues. Angular
will not be that easy to start working with any other existing project.

Backward Compatibility

We had AngularJS, Angular2 and now Angular4. AngularJS and Angular2 have
vast difference. Project application developed in AngularJS cannot be converted to
Angular2 because of the core differences. The recent version of VueJS is 2.0 and it
is good with backward compatibility. It provides good documentation, which is
very easy to understand.

DEPT OF COMPUTER ENGINEERING 11 MPTC, MALAPPURAM

 VUE.JS

Typescript

Angular uses TypeScript for its coding. Users need to have knowledge of
Typescript to get started with Angular. However, we can start with VueJS coding
anywhere in jsfiddle or codepen using the cdn library. We can work with standard
JavaScript, which is very easy to start with.

VueJS v/s Ember

Similarities

Ember provides Ember command line tool, i.e. ember-cli for easy installation and
compiling for Ember projects. VueJS has also a command line tool vue-cli to start
and build projects. They both have features such as router, template, and
components which makes them very rich as the UI framework.

Performance

VueJS has better performance in comparison to Ember. Ember has added a

glimmer rendering engine with the aim of improving the re-render performance,
which is a similar concept as VueJS and React using virtual DOM. However,
VueJS has a better performance when compared to Ember.

VueJSv/s Knockout

Knockout provides a good browser support. It is supported on the lower version of

the IE whereas VueJS is not supported on IE8 and below. Knockout development
has slowed down over time. There is not much popularity for the same in recent
times. On the other hand, VueJS has started gaining popularity with the Vue team
providing regular updates.

VueJS v/s Polymer

Polymer library has been developed by Google. It is used in many Google projects
such as Google I/O, Google Earth, Google Play Music, etc. It offers data binding
and computed properties similar to VueJS. Polymer custom element definition
comprises plain JavaScript/CSS, element properties, lifecycle callbacks, and
JavaScript methods. In comparison, VueJS allows to easily use JavaScript/html

DEPT OF COMPUTER ENGINEERING 12 MPTC, MALAPPURAM

 VUE.JS

and CSS. Polymer uses web component features and requires polyfills for
browsers, which does not support these features. VueJS does not have such
dependencies and works fine in all browsers from IE9+.

DEPT OF COMPUTER ENGINEERING 13 MPTC, MALAPPURAM

 VUE.JS

CHAPTER 3

VUEJS-ENVIRONMENT SETUP

There are many ways to install VueJS. Some of the ways on how to carry out the
installation are discussed ahead.

3.1 USING THE <SCRIPT>

<html>

<head>

<script type="text/javascript" src="vue.min.js"></script>

</head>

<body>

</body>

</html>

Go to the home site https://vuejs.org/v2/guide/installation.html of VueJS and

download the vue.js as per need. There are two versions for use - production
version and development version. The development version is not minimized,
whereas the production version is minimized as shown in the following
screenshot. Development version will help with the warnings and debug mode
during the development of the project.

3.2 USING CDN

DEPT OF COMPUTER ENGINEERING 14 MPTC, MALAPPURAM

 VUE.JS

We can also start using VueJS file from the CDN library. The link
https://unpkg.com/vue will give the latest version of VueJS. VueJS is also
available on jsDelivr (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) and cdnjs
(https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js). We can host the files at
our end, if required and get started with VueJS development.

Using NPM

For large scale applications with VueJS, it is recommended to install using the
npm package. It comes with Browserify and Webpack along with other necessary
tools, which help with the development. Following is the command to install using
npm.

npm install vue

Using CLI Command Line

VueJS also provides CLI to install the vue and get started with the server
activation. To install using CLI, we need to have CLI installed which is done using
the following command.

npm install --global vue-

Once done, it shows the CLI version for VueJS. It takes a few minutes for the
installation. + [email protected] added 965 packages in 355.414s Following is the
command to create the project using Webpack. vue init webpack myproject

DEPT OF COMPUTER ENGINEERING 15 MPTC, MALAPPURAM

 VUE.JS

CHAPTER 4

VUEJS INTRODUCTION

Vue is a JavaScript framework for building user interfaces. Its core part is focused
mainly on the view layer and it is very easy to understand. The version of Vue that
we are going to use in this tutorial is 2.0. As Vue is basically built for frontend
development, we are going to deal with lot of HTML, JavaScript and CSS files in
the upcoming chapters. To understand the details, let us start with a simple
example. In this example, we are going to use the development verison of vuejs.

EXAMPLE

In the above code snippet, we are calling Vue instance, which takes the id of the

DEPT OF COMPUTER ENGINEERING 16 MPTC, MALAPPURAM

 VUE.JS

DOM element i.e. e1:’#intro’, it is the id of the div. There is data with the message
which is assigned the value ‘My first VueJS Task’. VueJS interacts with DOM and
changes the value in the DOM {{message}} with ’My first VueJS Task’..

4.1 OUTPUT

This is the first app we have created using VueJS. As seen in the above code, we
have included vue.js at the start of the .html file.

<script type="text/javascript" src="js/vue.js"></script>

There is a div which is added in the body that prints “My first VueJS Task” in the
browser.

<div id=”intro” style=”text-align:center;”>

<h1>{{message}}</h1>

</div>

We have also added a message in a interpolation, i.e. {{}}. This interacts with
VueJS and prints the data in the browser. To get the value of the message in the
DOM, we are creating an instance of vuejs as follows:

var vue_det = new Vue({

el: '#intro',

data: {

message: 'My first VueJS Task'

})

DEPT OF COMPUTER ENGINEERING 17 MPTC, MALAPPURAM

 VUE.JS

CHAPTER 5

COMPUTED PROPERTIES

5.1 REMARKS

5.1.1 Data vs computed properties

The main use-case difference for the data and computed properties of a Vue
instance is dependent on the potential state or probability of changing of the data.
When deciding what category a certain object should be, these questions might
help:

• Is this a constant value? (data)

• Does this have the possibility to change? (computed or data)

• Is the value of it reliant on the value of other data? (computed)

• Does it need additional data or calculations to be complete before being used?

(computed)

• Will the value only change under certain circumstances? (data)

5.2 EXAMPLES

BASIC EXAMPLE:

5.2.1 Template

<div id = “example”>

a={{ a }}, b={{ b }}

</div>

DEPT OF COMPUTER ENGINEERING 18 MPTC, MALAPPURAM

 VUE.JS

5.2.3 Javascript

var vm = new Vue({

el: '#example',

data: {

a: 1

},

computed: {

// a computed getter

b: function () {

// `this` points to the vm instance

return this.a + 1

}}

Continue with the Hello World example.

5.2.3 result

a=1,b=2

Here we have declared a computed property b. The function we provided will be

used as the getter function for the property.

console.log(vm.b) // -> 2

vm.a = 2

DEPT OF COMPUTER ENGINEERING 19 MPTC, MALAPPURAM

 VUE.JS

console.log(vm.b) // -> 3

The value of vm.b is always dependent on the value of vm.a.

You can data-bind to computed properties in templates just like a normal property.
Vue is aware that vm.b depends on vm.a, so it will update any bindings that
depends on vm.b when vm.a changes.

5.3 COMPUTED PROPERTIES VS WATCH

5.3.1 Template

<div id = “demo”>

{{fullName}}

5.3.2 Watch example

var vm = new Vue({

el: '#demo',

data: {

firstName: 'Foo',

lastName: 'Bar',

fullName: 'Foo Bar'

})

vm.$watch('firstName', function (val) {

this.fullName = val + ' ' + this.lastName

})

DEPT OF COMPUTER ENGINEERING 20 MPTC, MALAPPURAM

 VUE.JS

vm.$watch('lastName', function (val) {

this.fullName = this.firstName + ' ' + val

})

5.4 COMPUTED EXAMPLE

var vm = new Vue({

el: '#demo',

data: {

firstName: 'Foo',

lastName: 'Bar'

},

computed: {

fullName: function () {

return this.firstName + ' ' + this.lastName

}).

5.5 COMPUTED SETTERS

Computed properties will automatically be recomputed whenever any data on

which the computation depends changes. However, if you need to manually
change a computed property, Vue allows you to create a setter method to do this:

5.5.1 Template (from the basic example above):

<div id = “exxample”>

DEPT OF COMPUTER ENGINEERING 21 MPTC, MALAPPURAM

 VUE.JS

a={{ a }}, b={{ b }}

</div>

5.5.2 Javascript

var vm = new Vue({

el: '#example',

data: {

a: 1

},

computed: {

b: {

// getter

get: function () {

return this.a + 1

},

// setter

set: function (newValue) {

this.a = newValue - 1

5.5.3 You can now invoke either the getter or the setter:

DEPT OF COMPUTER ENGINEERING 22 MPTC, MALAPPURAM

 VUE.JS

console.log(vm.b) // -> 2

vm.b = 4 // (setter)

console.log(vm.b) // -> 4

console.log(vm.a) // -> 3

vm.b = 4 will invoke the setter, and set this.a to 3; by extension, vm.b will evaluate
to 4.

5.6 USING COMPUTED SETTERS

You might need a v-model on a computed property. Normally, the v-model won't
update the computed property value.

The template:

<div id=”demo”>

<div class =”inline-block card” >

<div :class = '{onlineMarker: true, online: status, offline: !status}'></div>

<p class =='user-state'>User is {{ (status) ? 'online' : 'offline' }}></p>

</div>

<div class=’margin-5’>

<input type = “checkbox” v-model=”status”>Toggle status (This will show you as

offline to others)

</div>

DEPT OF COMPUTER ENGINEERING 23 MPTC, MALAPPURAM

 VUE.JS

</div>

5.7 STYLING

#demo{

font-family: Helvetica;

font-size: 12px;

.inline-block > * {

display: inline-block;

.card {

background: #ddd;

padding:2px 10px;

border-radius: 3px;

.onlineMarker {

width: 10px;

height: 10px;

border-radius: 50%;

transition: all 0.5s ease-out;

DEPT OF COMPUTER ENGINEERING 24 MPTC, MALAPPURAM

 VUE.JS

.online {

background-color: #3C3;

.offline {

background-color: #aaa;

.user-state {

text-transform: uppercase;

letter-spacing: 1px;

.margin-5 {

margin: 5px;

5.7.1 THE COMPONENT

var demo = new Vue({

el: '#demo',

data: {

statusProxy: null

},

computed: {

DEPT OF COMPUTER ENGINEERING 25 MPTC, MALAPPURAM

 VUE.JS

status: {

get () {

return (this.statusProxy=== null) ? true : this.statusProxy

})

fiddle Here you would see, clicking the radio button has no use at all, your
status is still online.

var demo = new Vue({

el: '#demo',

data: {

statusProxy: null

},

computed: {

status: {

get () {

return (this.statusProxy === null) ? true : this.statusProxy

},

set (val) {

DEPT OF COMPUTER ENGINEERING 26 MPTC, MALAPPURAM

 VUE.JS

this.statusProxy = val

})

DEPT OF COMPUTER ENGINEERING 27 MPTC, MALAPPURAM

 VUE.JS

CHAPTER 6

CONDITIONAL RENDERING

6.1 REMARKS

It is very important to remember the difference between v-if and v-show. While
their uses are almost identical, an element bound to v-if will only render into the
DOM when it's condition is true for the first time. When using the v-show
directive, all elements are rendered into the DOM but are hidden using the display
style if the condition is false!

EXAMPLES

In Vue.js, conditional rendering is achieved by using a set of directives on

elements in the template.

v-if

Element displays normally when condition is true. When the condition is false,
only partial compilation occurs and the element isn't rendered into the DOM until
the condition becomes true.

v-else

Does not accept a condition, but rather renders the element if the previous
element's v-if condition is false. Can only be used after an element with the v-if
directive.

v-show

Behaves similarly to v-if, however, the element will always be rendered into the
DOM, even when the condition is false. If the condition is false, this directive will
simply set the element's display style to none.

v-if / v-else

Assuming we have a Vue.js instance defined as:

DEPT OF COMPUTER ENGINEERING 28 MPTC, MALAPPURAM

 VUE.JS

var vm = new Vue({

el: '#example',

data:{

a: true,

b: false

});

You can conditionally render any html element by including the v-if directive; the
element that contains v-if will only render if the condition evaluates to true:

<! will render ‘the condition is true’ into the DOM - - >

<div id = “example”>

<h1 v- if=”a”>The condition is true </h1>

</div>

The <h1> element will render in this case, because the variable 'a' is true. v-if can
be used with any expression, computed property, or function that evaluates to a
boolean:

<div v-if=”0- - – – - - 1”> false;won’t render</div>

<div v-if = “typeof(5) = = =’number’”> true; will render</div>

You can use a template element to group multiple elements together for a single
condition:

< !-- In this case:nothing will be rendered expect for the containing ‘div’ - ->

<div id == “example”>

<template v-if =”b”>

<h1>heading</h1>

<p>paragraph 1</p>

<p>paragraph 2</p>

DEPT OF COMPUTER ENGINEERING 29 MPTC, MALAPPURAM

 VUE.JS

</template>

</div>

When using v-if, you also have the option of integrating a counter condition with
the v-else directive. The content contained inside the element will only be
displayed if the condition of the previous v-if was false. Note that this means that
an element with v-else must appear immediately after an element with v-if.

< !- - render only ‘ELSE’ - - >

<div id =”example”>

<h1 v-if =”b”>IF</h1>

<h2>v-if = “a”>ELSE</h1>

</div>

Just as with v-if, with v-else you can group multiple html elements together within
a <template>:

<div v-if =”’a” = = = ‘b’”>This will be never rendered. </div>

<template v-else>

<ul>

<li>you can also use template with v-else.</li>

<li>All of the content within the template</li>

<li>will be rendered</li>

</ul>

</template>

6.2 V-SHOW

The use of the v-show directive is almost identical to that of v-if.The only
difference are that v-show does not support the <template> syntax, and there is no
"alternative" condition.

var vm = new Vue({

DEPT OF COMPUTER ENGINEERING 30 MPTC, MALAPPURAM

 VUE.JS

el: '#example',

data: {

a: true

});

The basic use is as follows …

< ! - - - will render ‘condition met’ - - - >

<div id =”example”>

<h1 v-show =”a”>condition met </h1>

</div>

While v-show does not support the v-else directive to define "alternative"
conditions, this can be accomplished by negating the previous one...

< ! - - - will render ‘This is shown’ - - ->

<div id = “example”>

<h1 v-show =”a”>this is shown</h1>

<h1 v-show =”!a”>this is hidden</h1>

</div>

DEPT OF COMPUTER ENGINEERING 31 MPTC, MALAPPURAM

 VUE.JS

CHAPTER 7

CUSTOM COMPONENTS WITH V-MODEL

7.1 INTRODUCTION

Often times we have to create some components which perform some

actions/operations on data and we require that in the parent component. Most of
the times vuex would be a better solution, but in cases where the child
component's behavior has nothing to do with application state, for instance: A
range-slider, date/time picker, file reader

Having individual stores for each component each time they get used gets
complicated.

7.1.1 Remarks

To have v-model on a component you need to fulfil two conditions. 1. It should

have a prop named 'value' 2. It should emit an input event with the value expected
by the parent components.

<component V-model =’something’></component>

is just syntactic sugar for

<componenet

:value=”something”

@input=”something=$event.target.value”

>

</component>

7.1.2 V-MODEL ON A COUNTER COMPONENT

EXAMPLES

DEPT OF COMPUTER ENGINEERING 32 MPTC, MALAPPURAM

 VUE.JS

Here counter is a child component accessed by demo which is a parent component

using v-model.

// child component

Vue.component('counter', {

template:<div><button @click =’add’>+1 </button>

<button @click=’sub’>-1</button>

<div>this is inside the child component : {{result}}</div></div> ,

data () {

return {

result: 0

},

props: ['value'],

methods: {

emitResult () {

this.$emit('input', this.result)

},

add () {

this.result +=

1 this.emitResult()

},

sub () {

DEPT OF COMPUTER ENGINEERING 33 MPTC, MALAPPURAM

 VUE.JS

this.result -= 1

this.emitResult()

})

This child component will be emitting result each time sub() or add() methods are
called.

// parent component

new Vue ( {

el:’#demo’,

data () {

return {

resultFromChild:null

}
})

This child component will be emitting result each time sub() or add() methods are
called.

//parent template

<div id =’demo’>

<counter V-model=’ResultFromChild’></counter>

DEPT OF COMPUTER ENGINEERING 34 MPTC, MALAPPURAM

 VUE.JS

This is in parent component {{ResultFromChild}}

</div>

Since v-model is present on the child component, a prop with name value was sent
at the same time, there is an input event on the counter which will in turn provide
the value from the child component

DEPT OF COMPUTER ENGINEERING 35 MPTC, MALAPPURAM

 VUE.JS

CHAPTER 8

CUSTOM DIRECTIVES

8.1 BASICS

In addition to the default set of directives shipped in core, Vue.js also allows you
to register custom directives. Custom directives provide a mechanism for mapping
data changes to arbitrary DOM behavior. You can register a global custom
directive with the Vue.directive(id, definition) method, passing in a directive id
followed by a definition object. You can also register a local custom directive by
including it in a component’s directives option.

8.1.1 Hook functions

• bind: called only once, when the directive is first bound to the element.

• update: called for the first time immediately after bind with the initial value, then
again whenever the binding value changes. The new value and the previous value
are provided as the argument.

• unbind: called only once, when the directive is unbound from the element.

Vue.directive('my-directive', {

bind: function () {

// do preparation work

// e.g. add event listeners or expensive stuff

// that needs to be run only once

},

update: function (newValue, oldValue) {

// do something based on the updated value

// this will also be called for the initial value

DEPT OF COMPUTER ENGINEERING 36 MPTC, MALAPPURAM

 VUE.JS

unbind: function () {

// do clean up work

// e.g. remove event listeners added in bind()

})

Once registered, you can use it in Vue.js templates like this (remember to add
the v- prefix):

<div v-my-directive = “SomeValue”></div>

When you only need the update function, you can pass in a single function
instead of the definition object:

Vue.directive('my-directive', function (value) {

// this function will be used as update()

})

8.2 DIRECTIVE INSTANCE PROPERTIES

All the hook functions will be copied into the actual directive object, which you
can access inside these functions as their this context. The directive object exposes
some useful properties:

• el: the element the directive is bound to.

• vm: the context ViewModel that owns this directive.

• expression: the expression of the binding, excluding arguments and filters.

• arg: the argument, if present.

• name: the name of the directive, without the prefix.

• modifiers: an object containing modifiers, if any.

• descriptor: an object that contains the parsing result of the entire directive.

• params: an object containing param attributes. Explained below.

DEPT OF COMPUTER ENGINEERING 37 MPTC, MALAPPURAM

 VUE.JS

You should treat all these properties as read-only and never modify them. You can
attach custom properties to the directive object too, but be careful not to
accidentally overwrite existing internal ones.

An example of a custom directive using some of these properties:

HTML

<div id =”demo” v-demo =hello.a.b = ”msg”></div>

JAVASCRIPT

Vue.directive('demo', {

bind: function () {

console.log('demo bound!')

},

update: function (value) {

this.el.innerHTML =

'name - ' + this.name + ‘<br>’ +

'expression - ' + this.expression +’<br>’ +

'argument - ' + this.arg + ‘<br>’+

'modifiers - ' + JSON.stringify(this.modifiers) + ‘<br>’+

'value - ' + value

})

var demo = new Vue({

el: '#

data: {

msg: 'hello!'

DEPT OF COMPUTER ENGINEERING 38 MPTC, MALAPPURAM

 VUE.JS

})

RESULT

name - demo

expression - msg

argument - hello

modifiers - {"b":true,"a":true}

value - hello!

8.2.1 Object literal

If your directive needs multiple values, you can also pass in a JavaScript object
literal. Remember, directives can take any valid JavaScript expression:

HTML

<div v-demo = "{ color: 'white', text: 'hello!' }"></div>

JAVASCRIPT

Vue.directive('demo', function (value) {

console.log(value.color) // "white"

console.log(value.text) // "hello!"

})

8.2.2 Literal modifier

When a directive is used with the literal modifier, its attribute value will be
interpreted as a plain string and passed directly into the update method. The update
method will also be called only once, because a plain string cannot be reactive.

HTML

DEPT OF COMPUTER ENGINEERING 39 MPTC, MALAPPURAM

 VUE.JS

<div v-demo.literal="foo bar baz">

JAVASCRIPT

Vue.directive('demo', function (value) {

console.log(value) // "foo bar baz"

})

DEPT OF COMPUTER ENGINEERING 40 MPTC, MALAPPURAM

 VUE.JS

CHAPTER 9

CUSTOM FILTERS

9.1 TWO WAY FILTERS

With a two-way filter, we are able to assign a read and write operation for a single
filter that changes the value of the same data between the view and model.

//JS

Vue.filter('uppercase', {

//read : model -> view

read: function(value) {

return value.toUpperCase();

},

//write : view -> model

write: function(value) {

return value.toLowerCase();

});

/*

* Base value of data: 'example string'

* In the view : 'EXAMPLE STRING'

DEPT OF COMPUTER ENGINEERING 41 MPTC, MALAPPURAM

 VUE.JS

* In the model : 'example string'

*/

9.2 BASICS

Custom filters in Vue.js can be created easily in a single function call to

Vue.filter.

//JS

Vue.filter('reverse', function(value) {

return value.split('').reverse().join('');

});

//HTML

{{ msg | reverse }} //'This is fun!' => '!nuf si sihT'

It is good practice to store all custom filters in separate files e.g. under ./filters
as it is then easy to re-use your code in your next application. If you go this
way you have to replace JS part:

//JS

Vue.filter('reverse', require('./filters/reverse'));

You can also define your own begin and end wrappers as well.

//JS Vue.filter('wrap', function(value, begin, end) {

return begin + value + end;

});

//HTML

{{ msg | wrap 'The' 'fox' }} //'quick brown' => 'The quick brown fox'

DEPT OF COMPUTER ENGINEERING 42 MPTC, MALAPPURAM

 VUE.JS

9.3 SYNTAX

• Vue.filter(name, function(value){}); //Basic

• Vue.filter(name, function(value, begin, end){}); //Basic with wrapping values

• Vue.filter(name, function(value, input){}); //Dynamic

• Vue.filter(name, { read: function(value){}, write: function(value){} });

//Two-way

DEPT OF COMPUTER ENGINEERING 43 MPTC, MALAPPURAM

 VUE.JS

CHAPTER 10

DATA BINDING AND DYNAMIC COMPONENTS

10.1 DATA BINDING

10.1.1 Text

The most basic form of data binding is text interpolation using the “Mustache”
syntax (double curly braces):

<span>Message: {{ msg }}</span>

The mustache tag will be replaced with the value of the msg property on the
corresponding data object. It will also be updated whenever the data object’s msg
property changes.

You can also perform one-time interpolations that do not update on data change:
This will never change:

<span>This will never change: {{* msg }}</span>

10.1.2 Raw HTML

The double mustaches interpret’s the data as plain text, not HTML. In order to
output real HTML, you will need to use triple mustaches:

<div>{{{ raw_html }}}</div>

The contents are inserted as plain HTML - data bindings are ignored. If you need
to reuse template pieces, you should use partials.

10.1.3 Attributes

Mustaches can also be used inside HTML attributes:

<div id="item-{{ id }}"></div>

DEPT OF COMPUTER ENGINEERING 44 MPTC, MALAPPURAM

 VUE.JS

Note that attribute interpolations are disallowed in Vue.js directives and special
attributes. Don’t worry, Vue.js will raise warnings for you when mustaches are
used in wrong places.

10.1.4 Filters

Vue.js allows you to append optional “filters” to the end of an expression, denoted
by the “pipe” symbol:

{{ message | capitalize }}

Here we are “piping” the value of the message expression through the built-in
capitalize filter, which is in fact just a JavaScript function that returns the
capitalized value. Vue.js provides a number of built-in filters, and we will talk
about how to write your own filters later.

Note that the pipe syntax is not part of JavaScript syntax, therefore you cannot mix
filters inside expressions; you can only append them at the end of an expression.

Filters can be chained:

{{ message | filterA | filterB }}

Filters can also take arguments:

{{ message | filterA 'arg1' arg2 }}

The filter function always receives the expression’s value as the first argument.
Quoted arguments are interpreted as plain string, while un-quoted ones will be
evaluated as expressions. Here, the plain string 'arg1' will be passed into the filter
as the second argument, and the value of expression arg2 will be evaluated and
passed in as the third argument.

10.2 SIMPLE DYNAMIC COMPONENT

Dynamically switch between multiple components using element and pass data to
vbind:is attribute:

DEPT OF COMPUTER ENGINEERING 45 MPTC, MALAPPURAM

 VUE.JS

JAVASCRIPT

new Vue({

el: '#app',

data: {

currentPage: 'home'

},

components: {

home: {

template: “<p>Home</p>”

},

about: {

template : ”<p>About</p>”

},

contact: {

template : ”<p>Contact</p>”

})

HTML :

<div id=”app”>

<component v-bind:is = “CurrentPage”>

<!--- Component changes when Currentpage changes !--->

DEPT OF COMPUTER ENGINEERING 46 MPTC, MALAPPURAM

 VUE.JS

<!---output : Home !--->

</component>

</div>

10.3 PAGES NAVIGATION WITH KEY ALIVE

Sometimes you want to keep the switched-out components in memory, to make that
happen, you should use element:

JAVASCRIPT

new Vue({

el: '#app',

data: {

currentPage: 'home',

},

methods: {

switchTo: function(page) {

this.currentPage = page;

},

components: {

home: {

template : ‘<div>

<h2>Home</h2>

<p>{{ HomeData }}</p>

</div>’,

data: function() {

DEPT OF COMPUTER ENGINEERING 47 MPTC, MALAPPURAM

 VUE.JS

return {

homeData: 'My about data'

},

about: {

template : ‘<div>

<h2>about</h2>

<p>{{ AboutData }}</p>

</div>’,

data: function() {

return {

aboutData: 'My about data'

},

contact: {

template : ‘<div>

<h2>form</h2>

<form method = “POST” @submit.prevent>

<label> YourName : </label>

<input type = “text” v-model =”contactdata.name”>

<label>your message</label>

<textarea v-model = “contact data.message”></textarea>

DEPT OF COMPUTER ENGINEERING 48 MPTC, MALAPPURAM

 VUE.JS

<button type=”submit”>send</button>

</form>

</div>’,

data : function() {

return {

contactData: { name:'', message:'' }

})

DEPT OF COMPUTER ENGINEERING 49 MPTC, MALAPPURAM

 VUE.JS

CHAPTER 11

CONCLUSIONS

Vue.js is a Progressive JavaScript Framework for building web apps and it doesn’t
load itself in the browser. We need some kind of mechanism that loads the
index.html (single page) of Vue application with all the dependencies (CSS and js
files) in the browser.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user
interfaces. Unlike other monolithic frameworks, Vue is designed from the ground
up to be incrementally adoptable. The core library is focused on the view layer
only, and is easy to pick up and integrate with other libraries or existing projects.

DEPT OF COMPUTER ENGINEERING 50 MPTC, MALAPPURAM

 VUE.JS

REFERENCES

[1] https://vuejs.org

[2] https://vuejs.org/v2/guide

[3] https://riptutorial.com

[4] https://v3.vuejs.org/api/refs-api.html

DEPT OF COMPUTER ENGINEERING 51 MPTC, MALAPPURAM