Vue js for beginner

1. Vue JS
A Progressive Framework
@iamcsk90

2. What is Vue JS ?

3. • 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.

4. Possibilities with Vue
Development

5. • 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

6. Best Features

7. • Computer Properties and Watcher
• Reactive
• Style and Classname bindings
• Conditional renderings and Listing helpers
• Mixins and Service
• Properties
• Unit Test

8. • Content Distribution with Slot
• Dynamic Components
• Async Components

9. Content Distribution
( transclusion , Template helper, Outlet )

10. 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 .

11. Computer property
and watch

12. 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

13. 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

14. Classname and style
binding

15. <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

16. Reactivity with binding

17. DOM
User Model

18. Singlefile Component

19. <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

20. Reusability with
Components

21. Profile page
CSK
Frontend
CSK
Frontend
Monkey
Frontend
Srini
Frontend
Users Listing
User Component
chandruaskutty@icloud.com
91 9789891669
at

22. Dynamic
Component

23. 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 )

24. Asynchronous
Component

25. 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

26. Component
Communications

27. Parent component Child component
Passing Property
Emit event

28. Vuex Communications

29. Component
Mutations
Dispatch action
Getter
Global Store
State Actions

30. 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

31. Vue & React

32. • Component Driven
• Virtual Dom
• View Layer build especially for User Interface
• Reactivity
Similarity

33. • 19kb min
• Events
• Single File Component
(JS , Script, Style )
Difference
• 62.21 kb min
• Synthetic events
• JS Driven Component

34. Thank You
https://twitter.com/iamcsk90