VueJS First Steps

VueJS is a reactive javascript framework that will feel reasonably familiar to anyone that has used either knockoutjs or angular. Like those other frameworks, VueJS features reactive binding between data and view, self-contained components and templatised DOM fragments annotated inline with loops and conditionals.

A flavour of the template syntax from the vuejs docs:

<div id="app">
    <ul>
        <li class="user" v-for="user in users">
            <span>{{user.name}} - {{user.email}}</span>
            <button v-on:click="removeUser(user)">X</button>
        </li>
    </ul>
    <form id="form" v-on:submit="addUser">
        <input v-model="newUser.name">
        <input v-model="newUser.email">
        <input type="submit" value="Add User">
    </form>
    <ul class="errors">
        <li v-show="!validation.name">Name cannot be empty.</li>
        <li v-show="!validation.email">Please provide a valid email address.</li>
    </ul>
</div>

In comparison to angular, VueJS is a lighter, less opinionated framework, providing just the view or presentation part of an application without enforcing any idea of a controller. So, in angular terms: Templates, Directives and Components but not Controllers, Services or Providers. For the controller or business logic aspect of an application you are expected to make your own decisions. Similarly, there are no kitchen-sink utilities such as angular's $http or $cookies , but there are plugins that you can use or create to provide equivalent functionality.

Vue can be dropped into a page as a single script tag which is useful for small apps or for quick prototyping. But it also supports modularisation within a larger application.

VueJS 1.0 was released last year and an upcoming backwards-compatible version 2 was recently announced.

Example

The following is a first attempt at a Vue component. The model is a simple "stat" object with a numeric "value" property. This value is bound to both a range input element and a coloured SVG "pill" (an elongated rectangle with rounded corners). So moving the input slider changes the model data which in turn changes the width of the coloured pill. The component itself is simply a vertical sequence of these input+pill pairs at hard-coded intervals.

(Note: html range inputs are not available in IE9 or earlier).

Powered by Pelican and ZURB Foundation.