Vue.js

vuejs.org

Martin Janyš

Vue.js

pronounced /vju:/, like view

Simple UI FW
Data binding

Effective

Simple

  • Write some HTML,
  • grab some JSON,
  • create a Vue instance,
  • that's it.

Reactive

  • Expressions
  • computed properties
  • dependency tracking.

Components

  • Compose your application with decoupled,
  • reusable components.

Compact

  • ~24kb min+gzip,
  • no dependency.

Fast

  • Precise and efficient async batch DOM updates.

Examples

Two-way data binding

Rendering a list

Handle user input

All together

Transitions

Carousel

And more ...

vuejs.org/examples

Vue basics

{
  el: '#app',
  data: {},
  methods: {}
}

Components

  • Module abstration
  • to build large-scale applications composed of small, self-contained, and often reusable components
  • very similar to Custom Elements, which is part of the Web Components Spec
    • Web Components Spec is still very much a work in progress
    • Vue.js components provide more features
<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

Data binding syntax

Binding expression

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

Filters

{{ message | capitalize }}

{{ message | filterA | filterB }}

{{ message | filterA 'arg1' arg2 }}

Text


<span>Message: {{ msg }}</span>

<span>This will never change: {{* msg }}</span>

Raw HTML


<div>{{{ raw_html }}}</div>

Attributes


<div id="item-{{ id }}"></div>

Directives

attributes with the v- prefix

Arguments


<a v-bind:href="url"></a>

Arguments

<a v-bind:href="url"></a>

<a v-on:click="doSomething">

Modifiers


<a v-bind:href.literal="/a/b/c"></a>

v-bind shorthand

<!-- full syntax -->
<a v-bind:href="url"></a>

<!-- shorthand -->
<a :href="url"></a>

or

<!-- full syntax -->
<button v-bind:disabled="someDynamicCondition">
    Button
</button>

<!-- shorthand -->
<button :disabled="someDynamicCondition">
    Button
</button>

v-on shorthand

<!-- full syntax -->
<a v-on:click="doSomething"></a>

<!-- shorthand -->
<a @click="doSomething"></a>

All directives

  • v-bind
  • v-on
  • v-model
  • v-if
  • v-else
  • v-show
  • v-cloak
  • v-for
  • v-text
  • v-html
  • v-ref
  • v-el
  • v-pre

Computed properties

Computed set & get

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...
  • Computed properties
    • cached
    • transparency dependency tracking

Classes bindings

Array syntax

Object syntax

<div class="static" 
     :class="{'class-a':isA, 'class-b':isB}">
</div>

<div v-bind:class="[classA, classB]">
data: {
  isA: true,
  isB: false
}
data: {
  classA: 'class-a',
  classB: 'class-b'
}

you can directly bind to an object in data as well



data: {
  classes: ['class-a', 'class-b']
}
data: {
  classes: {
      'class-a': true,
      'class-b': false
  }
}

Object syntax

Array syntax


<div v-bind:style="styleObject"></div>

<div v-bind:style="[styleObjectA, styleObjectB]">

Styles binding


<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Events

  • Could be any event (click, keyup, focus, ...)

Events modifiers

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat">

<!-- just the modifier -->
<form v-on:submit.prevent></form>

<!-- only call vm.submit() when the keyCode is 13 -->
<input v-on:keyup.13="submit">

<!-- same as above -->
<input v-on:keyup.enter="submit">

Components

Dynamic components


<tr is="my-component"></tr>

Carousel component

Modal component

How to write components?

It is up to you!

.vue file

.html file

  • Pure html + css + script
    • good IDE support
  • No preprocesor nor compiler
  • Scoped CSS
  • Include by 
<link rel="import" href="">
<div>
    <template id="myTemplate">
        <!-- template -->
    </template>

    <style type="text/css" scoped>
        <!-- css -->
    </style>

    <script type="text/javascript">
        <!-- js -->
    </script>
</div>

3 files - DIY

  • Files for:
    • script
    • template
    • css
  • Use whatever you want
    • js, ES6, TypeScript
    • html, jade, ...
    • css, LESS, SASS
  • compile & bundle yourself
    • maven + grunt, ... 

Common mistakes

  • Invalid nested html element
  • If directive + manual setup or v-el
    • element is removed from dom
  • Not specified data
  • Component with transition not exits completely
  • Reading dom changes in code
    • dom is changed asynchronously

Plugins

vue-router

  • official plugin
  • to build SPA
var App = Vue.extend({})

var router = new VueRouter()

router.map({
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
})

router.start(App, '#app')

vue-resource

  • maintained by the PageKit team
  • AJAX
/* HTTP Client */
this.$http({url: '/someUrl', method: 'GET'}).then(function (response) {
  // success callback
}, function (response) {
  // error callback
});

/* ROSOURCE */
var resource = this.$resource('someItem/{id}');
  resource.get({id: 1}).then(function (response) {
      this.$set('item', response.item)
  });

  resource.save({id: 1}, {item: this.item}).then(function (response) {
      // success callback
  }, function (response) {
      // error callback
  });

  resource.delete({id: 1}).then(function (response) {
      // success callback
  }, function (response) {
      // error callback
  });
}

vuex

  • Flux/Redux inspired application architecture
  • State management

UI Components

Other

Comparison with Other Frameworks

engineering.paiza.io

AngularJS 1.x

  • Vue is simplier
    • API, design, to learn
  • Vue is a more flexible,
    less opinionated solution
  • Vue use one-way binding between 
    parent-child component
  • Vue has a clearer separation
    between directives and components
  • Vue has better performance
    and is much, much easier to optimize

React

  • both provide reactive &
    composable View components
  • React uses virtual DOM
  • React has higher learning barrier
  • React - everything in JavaScript
  • Vue.js actually outperforms React
    when it comes to hot updates

Ember.js

  • Ember's learning curve is high
  • Vue outperforms Ember
  • Templating and object model layer
    • Vue provides reactivity on plain JS objects,
      and fully automatic computed properties
    • Ember you need to wrap everything
      in Ember Objects

Polymer

  • In fact was a source of inspiration for Vue as well
  • Vue's components can be loosely
    compared to Polymer's custom elements
  • Polymer's Web Components features must be native or emulated with degraded performance
  • Vue works without any dependencies down to IE9
  • The only expressions supported in Polymer templates are the boolean negation and single method calls (performance restriction)
  • Polymer elements need to be bundled via Vulcanizer

References:

Other sources:

Events

Vyrob si svůj Arkanoid

Akka - Moderní způsob paralelizace (6. 4. 2016)

Bleeding edge ve vývoji Java web aplikací (20. 4. 2016)

WebSockets pro tvorbu real-time interaktivních aplikací (4. 5. 2016)

Made with Slides.com