Scribd
Upload
44 views

Resumer VueJS 3

Uploaded by

oussama king
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
44 views

Resumer VueJS 3

Uploaded by

oussama king
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 42

Introduction To VueJS

Prepared By:
Harikrusha V. Adiecha
Senior Software Engineer @ Improwised Technology
What is VueJS
● Progressive frontend framework
● Best for Single Page Application (SPA)
● Founder - Evan You (Independent Software Developer And Creator of Vuejs)
● Releases
○ Initial (v0.10) in 2014
○ v1.0 in 2015
○ v2.0 in 2016
○ v2.6 current
Why Vue?
● Easy to learn
● Light weight (94kb) - where angular - 178kb and react - 119 + 13 kb
● Reactivity (two way data binding)
● Reusable components
● Virtual DOM
Hello Word
Hello Word - Installation (inject CDN)
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Or

<!-- production version, optimized for size and speed -->


<script src="https://cdn.jsdelivr.net/npm/vue"></script>

That’s it.
Hello Word - Code
HTML Output:

<div id="app"> Hello Vue Rajkot!


{{ greetings }}
</div>

JavaScript

var app = new Vue({


el: '#app',
data: {
greetings: 'Hello Vue Rajkot!'
},
})
Hello Word - Explaination
var app = new Vue({ /* Options */ });

● Vue Instance
● Options
○ el (string) - to plugin code to HTML
○ data (json of data)- add all properties found in data to vue’s reactivity system.
○ methods (json of function)- methods object which can be called from html using event bindings.
○ computed (json of function) - derived data property will be specified here
○ mounted (function) - this will be a lifecycle hook, called when mounted.
○ created (function) - this will be a lifecycle hook, called when created.
○ Many more...
Hello Word - Explaination
<h1> {{ greeting }} </h1>

Display data content to HTML page.


And here are some more expression which will also work

{{ ‘Hello ‘ + name }}
{{ firstName + ‘ ‘ + lastName }}
{{ message.split(‘’).reverse().join(‘’) }}
{{ num + 1 }}
{{ isActive ? ‘Active’ : ‘Inactive’ }}
Rendering with Condition & Loop
Basic Rendering

● Regular message rendering


● Directive ( `v-once` )
● Directive ( `v-html` )

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

<span v-once>This will never change: {{ msg }}</span>

<div v-html="html"></div> <!-- html = "<ul><li>Hello</li><li>World</li></ul> " -->


Let’s Try out
Conditional Rendering - Directives
These are the directives which used for conditional rendering

- v-show
- v-if
- v-else-if
- v-else

( `v-show` ) Will keep element in the dom, and just change display style (none or block)
( `v-if` ) will remove entire element from the dom
Conditional Rendering (v-if, v-else)
HTML Output:

<div id="app"> Showing


<span v-if="visible">Showing</span>
<span v-else>Hiding</span>
</div>

JavaScript

var app = new Vue({


el: '#app',
data: {
visible: true
}
})
Let’s Try out
Conditional Rendering - Use case
● Show `No records` message when list is empty
● When you want to create TAB like functionality
● When there is some options which should show only when record has xyz flag (isActive for example)
● Create toggle button to show and hide side bar
● And many more...
List Rendering
HTML Output:

<div id="app"> ● apple


<ul> ● banana
<li v-for="i in fruits">{{i}}</li> ● orange
<ul>
</div>

JavaScript

var app = new Vue({


el: '#app',
data: {
fruits: ["apple", "banana", "orange"]
},
})
List Rendering (Use case)
● List out bullet points
● List backend collections
● And many more...
Let’s Try out
Vue Instance LifeCycle
Life Cycle
● Create instance `new Vue()`
● Event & LifeCycle (framework’s part)
● Injections & Reactivity (again framework’s
part)
● Check for option `el` or mount
○ If `el` is provided it will mount there
○ Other wise it will wait for function `vm.
$mount(el)` to get called
Life Cycle
● Check if `template` option provided
● Then compile that template
● Otherwise compile outer html of mounted
element
● Framework stuffs for mount them.
● Virtual Dom will be there now.
● Reactive updates of data
Life Cycle
● Destroy call
● Framework calls for destroy.
Vue Directives
Directive ( `v-bind` )
This directive is used to reactively update html attribute.

<a v-bind:href="url"> ... caption ... </a>

Here href is the argument, which tells the v-bind directive to bind the element’s href attribute to the value of
the expression url.

<a :href="url"> ... caption ... </a>

Only colon ( `:` ) is used as sorthand for `v-bind` directive


Directive ( `v-on` )
This directive listens to the dom events.

<button v-on:click="action"> ... caption ... </button>

Here it will listen click event triggered from dom element button and call action method specified in the
methods option.

In simple words this code will call action method when some one click on the button.

<button @click="action"> ... caption ... </button>

at ( `@` ) is used as sorthand for `v-on` directive


Event Modifiers
Click KeyUp

● .stop ● .enter
● .prevent ● .tab
● .self ● .delete
● .up
● .f1
Reactive Form Inputs
Directive ( `v-model` )
This directive is used to create two-way data bindings on form inputs.

● Text
● Multiline Text
● Select
● Checkbox
● Radio
Text & Multiline text
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

<textarea v-model="message" placeholder="add multiple lines"></textarea><br/>


<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>

This will apply changes right a way to following p tag as made changes in text box
Checkbox
Single checkbox, boolean value.

<input type="checkbox" id="checkbox" v-model="checked">


<label for="checkbox">{{ checked }}</label>

This will show true or false right next to checkbox, as we select or deselect them.
Radio button
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
Select
<select v-model="selected"> new Vue({
<option disabled value=""> el: '#app',
Please select one data: {
</option> selected: ‘’
<option>A</option> }
<option>B</option>
})
<option>C</option>
</select>

<span>Selected: {{ selected }}</span>


Let’s Try out
Model modifiers
● .lasy
○ Sync after `change` event, where `input` event was default.
● .number
○ This modifier will automatic type cast to number.
● .trim
○ It will trim input
v-model with components
Vue components allow you to build reusable inputs with completely customized behavior. These inputs even
work with v-model!

We are not going in depth for this topic


Vue Component
Basic Syntax of Vue Component
Vue Component can be defined like this.

Vue.component(‘comp-name’, {
template: ‘#compo’, // template id or direct html
data: function() { return {}; } // return properties json object
props: [‘a’] // input from parent
// Other options
});
Vue Component
Basically, components are reusable vue instance with name.

● Template option can be HTML or template id like `#comp-template` this.


● Template must contain a single root element.
● Here data option will be function (where in vue instance [new Vue] has data as object)
● Data can be pass to child component using `props` option
● Vue components can be used multiple times with separate data for each instance
Counter button
Let’s see an example of vue component - Create a counter button.
<div id="app"> Vue.component('counter', {
<counter></counter> template: '#cbtn',
</div> data: function() {
return {count: 0};
<template id="cbtn"> }
});
<div>
<button
var app = new Vue({
v-on:click="count += 1">
el: '#app'
{{ count }} Clicks
});
</button>
</div>
</template>
`props` to pass data to child component
Let’s see an example of vue component - with multiple instance with their own data and props from parent.
<div id="app"> Vue.component('counter', {
<counter name="apple"></counter> template: '#cbtn',
<counter name="banana"></counter> props: ['name']
</div> data: function() {
return {count: 0};
}
<template id="cbtn">
});
<button
v-on:click="count += 1">
var app = new Vue({
{{ count }} {{ name }}
el: '#app'
</button> });
</template>
Concepts we left to cover up
● Slots in Component
● Event
○ Event in Vue Instance
○ Vue Component Event
○ Event Bus (Saperate Vue instance for events)
● Routing using vue-router (which is most useful for SPA)
● State management using vuex
● And many more...
Any Questions…

Thank you.

Wake a mole (Experiment of vue concepts)


(https://github.com/AdiechaHK/wake-a-mole)

You might also like