SlideShare a Scribd company logo
Vue JS
A Progressive Framework
@iamcsk90
What is Vue JS ?
• A Progressive framework
• Build for User Interface
• Component Driven
• Many features that got inspired from popular
frameworks in industry, which helped to improve
framework’s performance and development.
Possibilities with Vue
Development
• Desktop application with the help of Electron
• Universal UI rendering with help of nuxtjs
• Complete web framework with help of
Vuex
Vue-Router
axious / Fetch
Element UI, Semantic , Boostrap
• Good support for mobile with below UI Kit
Mint UI
Onsen
Vonic
Best Features
• Computer Properties and Watcher
• Reactive
• Style and Classname bindings
• Conditional renderings and Listing helpers
• Mixins and Service
• Properties
• Unit Test
• Content Distribution with Slot
• Dynamic Components
• Async Components
Content Distribution
( transclusion , Template helper, Outlet )
Vue Slot
Vue’s slot feature provides the ability distribute boiler
content with specific scope variable.
Slot almost provides the ability to accomplish template
helper’s work such as
partial
outlet
transclusion
Example .
Computer property
and watch
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Kirubha',
lastName: 'Srini'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
Welcome {{ name }}
Welcome Kirubha Srini!
Demo
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Kriubha',
lastName: 'Srini',
fullName: 'Kirubha srini'
},
watch: {
firstName: function (val) {
console.log(' firstname changes ');
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
Welcome Kirubha Srini!
Demo
Kirubha Srini
<div id="demo">
Welcome {{ fullName }} !
<br/>
<input v-model="firstName">
<input v-model="lastName">
</div>
Reative
Classname and style
binding
<div class="static"
v-bind:class="{ active: isActive}">
</div>
data: {
isActive: true
}
<div class="static"
v-bind:style="{ color:color} ”>
</div>
data: {
color:’red’
}
Classname binding
Style binding
Reactivity with binding
DOM
User Model
Singlefile Component
<style scoped>
.user {
display:’inline’
}
</style>
<template>
<div id="user">
{{ name }}
</div>
</template>
<script>
export default {
name: "",
data: function() {
return {
name: ‘Good thoughts’
}
}
}
</script>
Template
Script
Style
Reusability with
Components
Profile page
CSK
Frontend
CSK
Frontend
Monkey
Frontend
Srini
Frontend
Users Listing
User Component
chandruaskutty@icloud.com
91 9789891669
at
Dynamic
Component
Dynamic component is a kind of helper which helps to
switch between different types of components.
Example
new Vue({
el: 'body',
data: {
currentView: 'manage-posts'
}
})
Vue.component('manage-posts', {
template: '#manage-template',
})
Vue.component('manage-posts', {
template: '#manage-template',
})
Manage-post View
Create-post View
( On value change )
Asynchronous
Component
const AsyncComponent = () => ({
component: new Promise((resolve, reject) => {
setTimeout(() => {
resolve(NumberBoxComponent)
}, 1000)
}),
loading: LoadingComponent,
error: ErrorComponent,
delay: 1
})
const NumberBoxComponent = {
name: 'number-box',
template: '#number-box',
}
Demo
Component
Resolving Component
Component
Communications
Parent component Child component
Passing Property
Emit event
Vuex Communications
Component
Mutations
Dispatch action
Getter
Global Store
State Actions
Mutations
Getter
State
Actions
Module to persist global
data
Portion to define global getter
actions
Block to define business and middleware
logic
Place to mutate global
state
Vue & React
• Component Driven
• Virtual Dom
• View Layer build especially for User Interface
• Reactivity
Similarity
• 19kb min
• Events
• Single File Component
(JS , Script, Style )
Difference
• 62.21 kb min
• Synthetic events
• JS Driven Component
Thank You
https://twitter.com/iamcsk90

More Related Content

PDF
Vue.js for beginners
PDF
Intro to vue.js
PDF
Why Vue.js?
PDF
Introduction to React JS
PDF
VueJS: The Simple Revolution
PDF
An introduction to Vue.js
PDF
Angular - Chapter 4 - Data and Event Handling
PDF
VueJS Introduction
Vue.js for beginners
Intro to vue.js
Why Vue.js?
Introduction to React JS
VueJS: The Simple Revolution
An introduction to Vue.js
Angular - Chapter 4 - Data and Event Handling
VueJS Introduction

What's hot (20)

PDF
introduction to Vue.js 3
ODP
An Introduction to Vuejs
PPT
Vue.js Getting Started
PPTX
Angular 9
PDF
React JS and why it's awesome
PPTX
PPTX
An introduction to Vue.js
PDF
The Point of Vue - Intro to Vue.js
PDF
React - Introdução
PDF
React js
PPTX
Introduction to react_js
PPT
Angular Introduction By Surekha Gadkari
PPTX
Introduction à React
PDF
Vue, vue router, vuex
PPTX
Javascript 101
PDF
ODP
Basics of VueJS
PPTX
Express js
PPTX
Spring Security 5
PPTX
React JS - A quick introduction tutorial
introduction to Vue.js 3
An Introduction to Vuejs
Vue.js Getting Started
Angular 9
React JS and why it's awesome
An introduction to Vue.js
The Point of Vue - Intro to Vue.js
React - Introdução
React js
Introduction to react_js
Angular Introduction By Surekha Gadkari
Introduction à React
Vue, vue router, vuex
Javascript 101
Basics of VueJS
Express js
Spring Security 5
React JS - A quick introduction tutorial
Ad

Similar to Vue js for beginner (20)

PDF
Vue.js
PPTX
Membangun Moderen UI dengan Vue.js
PDF
Meet VueJs
PDF
Why Vue JS
PDF
Advantages of Vue JS - Presented at the Rangle.io VueJS Meetup in January
PDF
Vue.js - An Introduction
PDF
Vue JS Intro
PPTX
An introduction to Vue.js
PDF
Vue - the Progressive Framework
PDF
Progressive Javascript: Why React when you can Vue?
PDF
Vue js 2.x
PDF
What is Vue.js in Software Development.docx.pdf
PDF
Vue+rails
PDF
Why Use Vue JS The Ultimate Guide for Frontend Every Aspect Covered.pdf
PPTX
Why Choose Vue.js For Web Development Projects.pptx
PPTX
Introduction to VueJS for begginers with examples | Namspace IT
PDF
Vue JS Interview Questions By Scholarhat
PDF
Drupal point of vue
PDF
Introduction to Vue.js
PDF
Vue JS @ MindDoc. The progressive road to online therapy
Vue.js
Membangun Moderen UI dengan Vue.js
Meet VueJs
Why Vue JS
Advantages of Vue JS - Presented at the Rangle.io VueJS Meetup in January
Vue.js - An Introduction
Vue JS Intro
An introduction to Vue.js
Vue - the Progressive Framework
Progressive Javascript: Why React when you can Vue?
Vue js 2.x
What is Vue.js in Software Development.docx.pdf
Vue+rails
Why Use Vue JS The Ultimate Guide for Frontend Every Aspect Covered.pdf
Why Choose Vue.js For Web Development Projects.pptx
Introduction to VueJS for begginers with examples | Namspace IT
Vue JS Interview Questions By Scholarhat
Drupal point of vue
Introduction to Vue.js
Vue JS @ MindDoc. The progressive road to online therapy
Ad

Recently uploaded (20)

PDF
July 2025 - Top 10 Read Articles in International Journal of Software Enginee...
PDF
Digital Logic Computer Design lecture notes
PDF
PRIZ Academy - 9 Windows Thinking Where to Invest Today to Win Tomorrow.pdf
PPTX
UNIT 4 Total Quality Management .pptx
PPTX
Lesson 3_Tessellation.pptx finite Mathematics
PPTX
Construction Project Organization Group 2.pptx
PPTX
OOP with Java - Java Introduction (Basics)
PDF
Well-logging-methods_new................
PPT
Mechanical Engineering MATERIALS Selection
PDF
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
PPTX
M Tech Sem 1 Civil Engineering Environmental Sciences.pptx
PPTX
CYBER-CRIMES AND SECURITY A guide to understanding
PPTX
Sustainable Sites - Green Building Construction
PPTX
Lecture Notes Electrical Wiring System Components
PDF
Structs to JSON How Go Powers REST APIs.pdf
PPTX
MET 305 2019 SCHEME MODULE 2 COMPLETE.pptx
PDF
Operating System & Kernel Study Guide-1 - converted.pdf
PPTX
Foundation to blockchain - A guide to Blockchain Tech
PPTX
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
PPTX
additive manufacturing of ss316l using mig welding
July 2025 - Top 10 Read Articles in International Journal of Software Enginee...
Digital Logic Computer Design lecture notes
PRIZ Academy - 9 Windows Thinking Where to Invest Today to Win Tomorrow.pdf
UNIT 4 Total Quality Management .pptx
Lesson 3_Tessellation.pptx finite Mathematics
Construction Project Organization Group 2.pptx
OOP with Java - Java Introduction (Basics)
Well-logging-methods_new................
Mechanical Engineering MATERIALS Selection
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
M Tech Sem 1 Civil Engineering Environmental Sciences.pptx
CYBER-CRIMES AND SECURITY A guide to understanding
Sustainable Sites - Green Building Construction
Lecture Notes Electrical Wiring System Components
Structs to JSON How Go Powers REST APIs.pdf
MET 305 2019 SCHEME MODULE 2 COMPLETE.pptx
Operating System & Kernel Study Guide-1 - converted.pdf
Foundation to blockchain - A guide to Blockchain Tech
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
additive manufacturing of ss316l using mig welding

Vue js for beginner