Vuejs Primeros pasos

¿Que es vuejs?

Vue es un framewoek progresivo para la creación de interfaces de usuario. Vue se centra sólo en la capa de vista y es muy fácil de captar e integrar con otras bibliotecas o proyectos existentes.

¿Por qué Vue?

Por la facilidad de aprender, es muy ligero.

Instalación

Existen varias formas de instalar vuejs.

• Agregando el CDN.
• Atravez de NPM npm install vue.
• Atravez de Bower bash bower install vue.
• Atravez del CLI.

Jugando con Vue.js

Cabe mencionar que es reactivo (Two Way Data ), si cambias desde la vista la variable message en el modelo “data” tambien cambia.

Si abrimos la consola y tecleamos app.message = “Hola, vuejs” cambiará lo que ve en message por el nuevo texto

Estructura Base

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hola, sucodigo.com'
  }
})

El resultado es Hola, sucodigo.com

Condicional

<div id="app">
  <p v-if="seen">Ahora me puedes ver!</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

El resultado es ver o no el mensaje ‘Ahora me puedes ver!’, en este caso como esta declarado en true, si se ve el mensaje.

Iterar un array

<div id="app">
  <h3>Tareas:</h3>
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Aprender Vue.js' },
      { text: 'Ser programador' },
      { text: 'Visitar sucodigo.com' }
    ]
  }
})

El resultado es una lista de Tareas.

Tareas:
  Aprender Vue.js
  Ser programador
  Visitar sucodigo.com

Evento click

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Bienvenido a sucodigo.com!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

El resultado es que al hacer clic en el boton el mensaje Bienvenido a sucodigo.com cambia de orden.

La caracteristica más importante de Vuejs es que se pueden hacer componentes, en el proximo post hare un editor de markdown para ver como trabajar con componentes.

Si quieres aprender màs de Vuejs, busca en youtube, hay muchos videos y la documentación es muy buena.