Andrés Bedoya (A.K.A Angelfire)

(pronounce like view)


Progressive JavaScript Framework that focuses on building user interfaces

  • Works in the "view layer only"
  • Incrementally adoptable
  • Easily integrated into other projects/libraries
  • Capable of powering advanced SPAs


  • Reactive Interfaces
  • Declarative rendering
  • Data binding
  • Directives
  • Template logic
  • Components & nesting
  • Event handling
  • Computed properties
  • CSS Transitions & Animation
  • Custom filters

Sample code

<div id="app">

new Vue({
    el: '#app',
    data: {
        mensaje: 'MedellinJS'

Special attribute with the v- prefix that does something to the DOM. Reactively applies side effects to the DOM when the value of its expression changes

<p v-text="mensaje"></p>
<p v-html="mensaje"></p>
<p v-once>{{mensaje}}</p>

Dynamically bind one or more attributes, or a component prop to an expression.

<img v-bind:src="imageSrc" v-bind:alt="imageAlt">
// shorthand
<img :src="imageSrc" :alt="imageAlt">
// binding an object of attributes
<img v-bind="{ src: imageSrc, alt: imageAlt }">

<div :style="{ fontSize: size + 'px' }"></div>

<my-component :prop="something"></my-component>

Are simply functions that you can pass data into which gets processed and a filtered version of this data is returned. Vue conveniently has a number of built in filters. The pipe symbol (|) is used to denote a filter like so:

<p>{{'simple message' | uppercase}}</p>
<p>{{'simple message' | capitalize}}</p>
// Simple message
<p>{{12345 | currency}}</p>

Conditionals & loops

<p v-if="show">Esto se muestra</p>
<p v-else>Esto no</p>

<p v-show="show">Esto se muestra</p>

    <li v-for="user in users">{{}}</li>

<div v-bind:class="{active: isActive}"></div>

new Vue({
    data: {
        show: true,
        users: [
            { name: 'Sergio' },
            { name: 'Andres' }
        isActive: true


Events are things like Hover, Click, Change, etc, that happen when your application is running.

<button v-on:click="counter">Count me in</button>
// shorthand
<button @click="counter">Count me in</button>

new Vue({
    data: {
        count: 0
    methods: {
        counter: function() {
            this.count += 1


<div id="app">

Vue.component('my-component', {
    template: 'This is my component'

Let's code

$ npm install -g vue-cli
$ vue init webpack vuesetup
$ cd vuesetup
$ yarn // npm install
$ yarn run dev // npm run dev

Vue.js 2.0 (Introduction)

By Andrés BG

Vue.js 2.0 (Introduction)

  • 1,198