Vue.js is a progressive JavaScript framework for building user interfaces. It focuses only on the view layer and makes no assumptions about the rest of your code. Vue.js allows you to progressively adopt it into existing projects and features simple and flexible APIs. Performance benchmarks show Vue.js to be one of the fastest frameworks available.

1. 1
WHY VUE.JS?
“The Progressive JavaScript Framework”
Introduction to Vue.js
Jonathan Goode

2. 2 . 1
WHAT IS VUE.JS?
Vue (pronounced /vjuː/, like view) is a progressive framework for
building user interfaces
The core library is focused on the view layer only
The library was created by who released v1 on 26
October 2015
The project is permanently backed by pledgers on
$7,572 (~£6,145) per month
Evan You
Patreon.com

3. 2 . 2
WHO USES VUE?
Rank Site Detections
1st laravel.com 49,476
2nd laracasts.com 29,185
3rd gitlab.com 26,522
8th codeship.com 3,069
Detections by Wappalyzer in the last 7 days
INTERNATION ADOPTION
China: Alibaba and Baidu, Japan: Nintendo and UK:
Sainsbury's

4. 2 . 3
USING VUE
Getting started with Vue.js is extremely easy
Its source code is very readable, and the documentation is the
only tutorial you will need
You don't need external libraries
You can use it with or without jQuery
You won't even need to install any plugins, though many are
available

5. 2 . 4
USING VUE
Hooking Vue up to existing code is very straightforward
Vue makes no assumptions about your code
It really only assumes that your data will change
Real-life usage is as simple as the docs demonstrate it to
be

6. 3 . 1
PERFORMANCE
Vue.js 2.0 was released on Sep 30 - current release is v2.0.3 - 16kb min+gzip
Based on , lower is better3rd party benchmark

7. 3 . 2
VUE.JS 2.0
The rendering layer has been rewritten using a light-weight
Virtual DOM implementation forked from .
On top of that, Vue's template compiler is able to apply some
smart optimizations during compilation, such as analyzing and
hoisting static sub trees to avoid unnecessary diffing on re-
render.
The new rendering layer provides significant performance
improvements compared to v1, and makes Vue 2.0 one of the
fastest frameworks.
In addition, it requires minimal effort in terms of optimization
because Vue's reactivity system is able to precisely determine
components that need to be re-rendered in a large and complex
component tree.
snabbdom

8. 4 . 1
VUE AND CONDITIONAL LOGIC
V‐IF / V‐ELSE
// JavaScript
var example = new Vue({
el: '.example',
data: { cond: (1 > 0), }, // true
});
<div class="example">
<div v­if="cond">Yes</div>
<div v­else>No</div>
</div>

9. 4 . 2
V‐SHOW
// JavaScript
var example = new Vue({
el: '.example',
data: { cond: (1 > 0), }, // true
});
<!­­ HTML ­­>
<div class="example">
<div v­show="cond">Yes</div>
<div v­show="!cond">No</div>
</div>

10. 4 . 3
WITH A TEMPLATE
<!­­ HTML ­­>
<template v­if="cond">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
=
<!­­ HTML ­­>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

11. 4 . 4
V‐FOR
// JavaScript
var example = new Vue({
el: '.example',
data: { items: { message: 'Foo' }, { message: 'Bar' }, },
});
<!­­ HTML ­­>
<ul class="example">
<li v­for="item in items">{{ item.message }}</li>
</ul>

12. 4 . 5
V‐FOR USING AN OBJECT
// JavaScript
var example = new Vue({
el: '.example',
data: { object: FirstName: 'Jonathan', LastName: 'Goode', Age: 30, },
});
<!­­ HTML ­­>
<ul class="example">
<li v­for="value in object">{{ $key }}: {{ value }}</li>
</ul>

13. 4 . 6
V‐FOR USING A RANGE
// JavaScript
var example = new Vue({
el: '.example',
});
<!­­ HTML ­­>
<ul class="example">
<li v­for="n in 10">{{ n }}</li>
</ul>

14. 4 . 7
V‐FOR USING A FILTER
What will the output
be?
// JavaScript
var example = new Vue({
el: '.example',
data: { array: [2, 4, 6, 8, 10,], },
});
<!­­ HTML ­­>
<ul class="example">
<li v­for="n in array | limitBy 3">{{ n }}</li>
</ul>

15. 5
VUE AND EVENT HANDLING
<!­­ HTML ­­>
<a v­on:click="doSomething">Link</a>
<a @click="doSomething">Link</a><!­­ shorthand syntax ­­>
// Modifiers
<!­­ with event.preventDefault() ­­>
<a @click.prevent="doSomething">Link</a>
<!­­ with event.stopPropagation() ­­>
<a @click.stop="doSomething">Link</a>
<!­­ with event.preventDefault() and event.stopPropagation() ­­>
<a @click.stop.prevent="doSomething">Link</a>

16. 6
VUE AND LARAVEL
// JavaScript ­ for Laravel (requires jQuery)
Vue.http.headers.common['X­CSRF­TOKEN'] =
$('meta[name="csrf­token"]').attr('content');
// PHP ­ escape Blade syntax
@{{ item.message }}
(Recommended Combination)

17. 7
INSTALLING VUE
package.json
"dependencies": {
"vue": "*"
}
Run
npm
$ npm install

18. 8
VUE EXPLAINED
HELLO WORLD EXAMPLE ⇲
The data for the view goes in an object called data
This can get there and look however you want
Functions are written as callbacks that go into a methods
object
They can do or return whatever you want
var journal = new Vue({
el: '.journal',
data: { message: 'Hello World' }, methods: { },
});
<div class="journal">
<input type="text" v­model="message"><pre>{{ message | json }}</pre>
</div>

19. 9
INPUT COUNTER EXAMPLE ⇲
// JavaScript
new Vue({
el: '.question­text',
data: { questions: [{ question_text: '', }], },
methods: { getLength: function(key){
return mb_strlen(this.questions[0][key]);
}, },
});
<!­­ HTML ­­>
<small v­bind:class="{ 'red': getLength('question_text') > 499 }"
v­cloak class="pull­right">Characters:
<span v­bind:class="{'text­embolden': getLength('question_text') > 500}"
@{{ getLength('question_text') }}
</span> / 500
</small>

20. 10 . 1
VUE DIRECTIVES
Custom directives provide a mechanism for mapping data changes to arbitrary DOM behaviour
"seiyria‐bootstrap‐slider": "7.0.3"
Vue.directive('slider', {
bind: function(){ /* do preparation work */
var vm = this.vm;
var key = this.expression;
var slider = $(this.el).slider()
.on('change', function(ev){ vm.$set(key, ev.value.newValue); })
.data('slider');
},
update: function(val){ /* do something based on initial/updated value */
val = parseFloat(val);
if(!isNaN(val)){ $(this.el).slider('setValue', val); }
},
unbind: function(){ /* do clean up work */ },
});

21. 10 . 2
SLIDER EXAMPLE ⇲
// JavaScript
new Vue({
el: '.form­alerts',
data: alerts: [{ id: '', alert_message: '', alert_time: '' }],
});
<!­­ HTML ­­>
<template v­for="alert in alerts">
<input
class="form­control station­alert­time"
name="station_alert_time"
type="text"
v­slider="alerts[$index].alert_time"
v­model="alerts[$index].alert_time"
data­slider­min="0.5"
data­slider­max="5"
data­slider­step="0.5"
data­slider­value="2.5">
</template>

22. 11
VUE PLUGINS
Provides services for making web requests and handling responses using an
XMLHttpRequest or JSONP
The HTTP client for Vue.js
Centralised State Management for Vue.js
Similar to (Re)Flux for React
Bootstrap components built with Vue.js
No jQuery, bootstrap.js, or any third party plugins required
VueResource
VueRouter
VueX
VueStrap

23. 12
MORE RESOURCES
https://vuejs.org
https://github.com/vuejs/vue
Vue.js DevTools - Chrome
Extension