Why Vue.js?

Introduction to Vue.js

Transcript

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 better 3rd 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