Why Vue.js?

Why Vue.js?

Introduction to Vue.js

3ee3ebfa05b13fbbf53bda0e66022ad6?s=128

Jonathan Goode

November 04, 2016
Tweet

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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>
  8. 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>
  9. 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>
  10. 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>
  11. 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>
  12. 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>
  13. 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>
  14. 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>
  15. 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)
  16. 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>
  17. 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>
  18. 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 */ }, });
  19. 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>
  20. 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