Vue.js

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

(pronounce like view)

Vue.js

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

Vue.js

  • 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">
    {{mensaje}}
</div>


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>{{mensaje}}</p>
<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>
// SIMPLE MESSAGE
<p>{{'simple message' | capitalize}}</p>
// Simple message
<p>{{12345 | currency}}</p>
$12,345.00

Conditionals & loops

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

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

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

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


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

Events

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
        }
    }
})

Components

<div id="app">
    <my-component></my-component>
</div>


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
Made with Slides.com