Aman Mishra from TO THE NEW walks through Vue.Js. It gives an introduction about Vue.js, popularity, size comparison, template syntax, the importance of Vue.js and much more.

1. www.tothenew.com
Introduction to Vue.js
Aman K Mishra
7 September, 2017

2. www.tothenew.com
This is me
A learner
A NEWER (Working at TO THE NEW) for almost 3 years now
Total experience : 5 Years ( AngularJs - 1, Groovy and Grails - 2, Java -2)
Other self learnt skills : Angular 2, React.js, Node.js, MondoDB
Associate Lead - Technology

3. www.tothenew.com
How does minimal code look like
<script src="https://unpkg.com/vue"></script>
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

4. www.tothenew.com
About Vue
Vue was created by Evan You after working for Meteor dev group and Google
Originally released in February 2014
Latest stable release : 2.4.2
Backed by Laravel and Alibaba
Evan you

5. www.tothenew.com
Who are using it in production
Here you can find some of people talking about their experience on using Vue.js
Here you can find detailed list of project using Vuejs

6. www.tothenew.com
Let’s compare : There will be blood

7. www.tothenew.com
Popularity in 2016
Vue.JS project got more than 25,000 stars on Github last year, it means 72 stars per
day, it's more than what any other framework got, including React and Angular.

8. www.tothenew.com
Size comparison
Approximation of gzipped versions

9. www.tothenew.com
Performance Comparison
Lower is better

10. www.tothenew.com
Vanilla Javascript?
?

11. www.tothenew.com
Comparison links
https://vuejs.org/v2/guide/comparison.html
https://about.gitlab.com/2016/10/20/why-we-chose-vue/
http://www.evontech.com/what-we-are-saying/entry/why-developers-now-compare-
vuejs-to-javascript-giants-angular-and-react.html
http://pixeljets.com/blog/why-we-chose-vuejs-over-react/
https://about.gitlab.com/2016/10/20/why-we-chose-vue/
https://hashnode.com/post/what-is-the-advantage-of-vuejs-over-angular-or-react-in-
terms-of-performance-ease-of-use-and-scalability-cit4sbaxi18xj8k53ejiuahiy

12. www.tothenew.com
Let’s see some code now

13. www.tothenew.com
Template Syntax
<span>Message: {{ msg }}</span> <span v-once>
This will never change: {{ msg }}
</span>
<div v-html="rawHtml"></div>
<div v-bind:id="dynamicId"></div>
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
var app = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on
' + new Date().toLocaleString()
}
})

14. www.tothenew.com
Template Syntax : Cont...
<p v-if="seen">Now you see me</p>
<a v-on:click="doSomething">
<form v-on:submit.prevent="onSubmit"></form>
<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a>
<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>
Values and methods
defined in Vue instance

15. www.tothenew.com
The Vue Instance
var data = { a: 1 }; // Our data object
// The object is added to a Vue instance
var vm = new Vue({
data: data
})
// These reference the same object!
vm.a === data.a // => true
// Setting the property on the instance also affects the original data
vm.a = 2
data.a // => 2
// ... and vice-versa
data.a = 3
vm.a // => 3

16. www.tothenew.com
The Vue Instance : Cont...
new Vue({
data: {
a: 1
},
created: function () {
// `this` points to the vue instance
console.log('a is: ' + this.a)
}
})
Are you sure about
scope of “this” here?
Other life cycle hooks :
● beforeCreate
● created
● beforeMount
● mounted
● beforeDestroy
● Destroyed
Life cycle event

17. www.tothenew.com
Class and Style binding
<div v-bind:class="{ active: isActive }"></div>
<div class="static"
v-bind:class="{ active: isActive, 'text-danger':
hasError }">
</div> data: {
isActive: true,
hasError: false
}
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}

18. www.tothenew.com
Filters
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase()
+ value.slice(1)
}
}
})
{{ message | filterA | filterB }}
Of course, Filter can be chained
Filters are JavaScript functions, therefore
they can take arguments:
{{ message | filterA('arg1', arg2) }}

19. www.tothenew.com
Directives
ENOUGH. What’s New?
Check this link for directives

20. www.tothenew.com
Conditional Rendering
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<h1 v-if="user"> {{user.username}}</h1>
<h1 v-if="user"> {{user.firstName}}</h1>
<h1 v-if="user"> {{user.lastName}}</h1>
<div v-if=”user”>
<span> {{user.username}}</span>
<span> {{user.firstName}}</span>
<span> {{user.lastName}}</span>
</div>
Code duplicacy
You just increased DOM element
count. What if it’s in loop? And this
might break css styling also.
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
An invisible wrapper. The final
rendered result will not include the
<template> element.
Angular way to do this

21. www.tothenew.com
Conditional Reusable elements
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
Vue tries to render elements as efficiently as possible, often re-using them instead of
rendering from scratch. Beyond helping make Vue very fast, this can have some
useful advantages. For example, if you allow users to toggle between multiple login
types:
Then switching the loginType in the code above will not erase what the user has
already entered. Since both templates use the same elements, the <input> is not
replaced - just its placeholder
If you don’t
need this, just
use attribute
“key”
key="username"
key="email"

22. www.tothenew.com
Computed property
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{
reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: { message: 'Hello' },
computed: {
// a computed getter
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
I don’t need computed
property. I can do it like this.
<p>
Reversed message: "{{ reverseMessage()
}}"
</p>
// in vue instance
methods: {
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
}
Caching

23. www.tothenew.com
What else?
There are many more. Obviously, there are design level changes to overcome the
problem of AngularJs like watchers and digest cycle

24. www.tothenew.com
How do you feel so far..
So close to AngularJs and Angular2 .
Learning curve is very low

25. www.tothenew.com
Components - A smallest component
<div id="example">
<my-component></my-component>
</div>
// register
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// create a root instance
new Vue({
el: '#example'
})

26. www.tothenew.com
Passing data to Component
Vue.component('child', {
// declare the props
props: ['myMessage'],
// just like data, the prop can be used inside templates
// and is also made available in the vm as this.message
template: '<span>{{ myMessage }}</span>'
})
<child my-message="hello!"></child>

27. www.tothenew.com
One way data flow
Our learning from react, data should flow top to bottom. It makes
application less error prone
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
Inside a Vue component, we achieve it as :

28. www.tothenew.com
Hey, I could validate props in React

29. www.tothenew.com
Prop Validation
Vue.component('example', {
props: {
propA: Number, // basic type check (`null` means accept any type)
propB: [String, Number], // multiple possible types
propC: { // a required string
type: String, required: true
},
propD: { // a number with default value
type: Number, default: 100
},
propF: { // custom validator function
validator: function (value) {
return value > 10
}
}
}
})

30. www.tothenew.com
A component with event
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter
v-on:increment="incrementTotal">
</button-counter>
<button-counter
v-on:increment="incrementTotal">
</button-counter>
</div>
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter
}}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})

31. www.tothenew.com
Render function and JSX
If you are not satisfied with templates, you can use Render function and JSX also.
Check official documentation for more detail on this

32. www.tothenew.com
Ecosystem
Vue Router
Vuex : State management for Vue
Redux can also be integrated
Let’s explore more, visit official documentation
Vue-devtool
vue-cli
weex : For native app. Maintained by Alibaba

33. www.tothenew.com
!(Why should you go for Vue.js)
● Not yet used for large applications like React ?
● If you stick to your current framework, you can utilize learning of your past
projects the most
● You can also use a good %age of codebase from previous project

34. www.tothenew.com
Why should you go for Vue.js
Easy to kick start.
Learning curve is very low as most of concepts are reused from Angular and React
No need to learn ES6 and JSX as in case of React
Faster in comparison to other libraries
Also, smaller in size
It is expected to be more popular in 2017 and coming years
Easy integration with other popular libraries and axios, redux etc.
Ecosystem is also good. Community has got everything to get you going.
It brings best features of Angular and React together

35. www.tothenew.com
Useful links
https://www.getrevue.co/profile/vuenewsletter
https://twitter.com/vuejs
https://stackoverflow.com/tags/vue.js/info
https://gitter.im/vuejs/vue
https://github.com/vuejs/awesome-vue
https://curated.vuejs.org/
https://frontendmasters.com/workshops/vue-advanced-features/
https://scotch.io/courses/build-an-online-shop-with-vue/introduction