Vue.JS

VueJS

@kath_code

(pronounced /vjuː/, like view)

Pronunciación

Evan you - @youyuxi

Creador

Vue.js es un conjunto de utilidades para crear componentes reactivos re-utilizables para la Web.
Es realmente sencillo de utilizar y muy rápido a la hora de renderizar su resultado.
Permite asociar una fuente de datos a un componente y que ambas partes.

Que es ?

Renderizado condicional

Conditional: v-else

<p v-if="variable_seen">Se mostrará este contenido.</p>

var app3 = new Vue({
  el: '#app-3',
  data: {
    variable_seen: true
  }
})

<p v-else="variable_seen">No se mostrará</p>

Conditional: v-if

<li v-for="tutorial in tutorials">
    {{ tutorial.name }}
<li>

Renderizado de listas

Loop: v-for

var app4 = new Vue({
  el: '#app-4',
  data: {
    tutorial: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

<button v-on:click="reverseMessage">Reverse Message</button>

Eventos, métodos

Event listener: v-on

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

Data binding

Data binding: v-model

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

Componentes

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

// register
Vue.component('my-component', {
  template: '<div>Soy un componente!</div>'
})
// create a root instance
new Vue({
  el: '#example'
})

<div id="example">
  <div>A custom component!</div>
</div>

Renderizará:

Getting started

<div id="app">
  {{ message }}
</div>

HTML

Javascript

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello PionerasDev!'
  }
})

Resultado

Hello PionerasDev!

1.Instalación

2.Agregar vue

3. Conectar con la API

4. Lista de albunes

5. Filtros en la una lista de albunes