1

WHY VUE.JS?“The Progressive JavaScript Framework”

Introduction to Vue.jsJonathan Goode

2 . 1

WHAT IS VUE.JS?Vue (pronounced /vjuː/, like view) is a progressive framework forbuilding user interfacesThe core library is focused on the view layer onlyThe library was created by who released v1 on 26October 2015The project is permanently backed by pledgers on

$7,572 (~£6,145) per month

Evan You

Patreon.com

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,069Detections by Wappalyzer in the last 7 days

INTERNATION ADOPTIONChina: Alibaba and Baidu, Japan: Nintendo and UK:Sainsbury's

2 . 3

USING VUEGetting started with Vue.js is extremely easyIts source code is very readable, and the documentation is theonly tutorial you will needYou don't need external libraries

You can use it with or without jQuery

You won't even need to install any plugins, though many areavailable

2 . 4

USING VUEHooking Vue up to existing code is very straightforwardVue 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 tobe

3 . 1

PERFORMANCEVue.js 2.0 was released on Sep 30 - current release is v2.0.3 - 16kb min+gzip

Based on , lower is better3rd party benchmark

3 . 2

VUE.JS 2.0The rendering layer has been rewritten using a light-weightVirtual DOM implementation forked from .On top of that, Vue's template compiler is able to apply somesmart optimizations during compilation, such as analyzing andhoisting static sub trees to avoid unnecessary diffing on re-render.The new rendering layer provides significant performanceimprovements compared to v1, and makes Vue 2.0 one of thefastest frameworks.In addition, it requires minimal effort in terms of optimizationbecause Vue's reactivity system is able to precisely determinecomponents that need to be re-rendered in a large and complexcomponent tree.

snabbdom

component tree.

4 . 1

VUE AND CONDITIONAL LOGICV‐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>

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>

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>

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>

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>

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>

4 . 7

V‐FOR USING A FILTERWhat will the outputbe?

// 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>

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>

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)

7

INSTALLING VUEpackage.json

"dependencies": "vue": "*"

Runnpm

$ npm install

8

VUE EXPLAINEDHELLO WORLD EXAMPLE

The data for the view goes in an object called dataThis can get there and look however you want

Functions are written as callbacks that go into a methodsobject

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>

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>

10 . 1

VUE DIRECTIVESCustom 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 */ , );

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>

11

VUE PLUGINS

Provides services for making web requests and handling responses using anXMLHttpRequest or JSONP

The HTTP client for Vue.js

Centralised State Management for Vue.jsSimilar to (Re)Flux for React

Bootstrap components built with Vue.jsNo jQuery, bootstrap.js, or any third party plugins required

VueResource

VueRouter

VueX

VueStrap

12

MORE RESOURCEShttps://vuejs.orghttps://github.com/vuejs/vueVue.js DevTools - ChromeExtension