Como iniciar con Vuejs

VueJS tiene su guía oficial y nos explica que la pronunciación es la de view o en español seria algo como viu. si no conocen vuejs les recomiendo la entrada de #QueDiablosEs.

Iniciando con vuejs

Para entender los conceptos básicos hay que ver este video

En este video podemos ver cosas muy interesante, como la estructura básica de vuejs y algunas sentencias usadas.

Todo comienza con la librería de vuejs y un html básico

<script src="https://unpkg.com/vue"></script>

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

Tenemos que instanciar nuestra librería así que escribimos un nuevo <script></script> en este casi también podemos hacer la referencia del id con #app

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

v-for

V-for es como el ngFor de angular, aqui lo que hace es un for en el DOM para traer todos los datos de un array y desplegar la información

<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    productos: ["cafe", "leche", "pan", "milanesa"]
  }
})
</script>

<div id="app"  >
<ul>
<li v-for="producto in productos">
{{ producto }}
  
</li>
</ul>
  <p>{{ message}}</p>
</div>

Crear un método

Un ejemplo interesante es como consumir una api en vue js, y vemos que es muy sencillo usarlo, ya que usamos fetch de javascript a diferencia de angular para consumir api rest que tenemos que usar varias métodos pero nos da también otras ventajas.

Para crear una función / método simplemente agregamos a nuestro objeto el nombre y los paréntesis luego abrimos las llaves y escribimos que queremos que haga.

V-if

Tenemos esa sentencia que es un if convencional, pero en el DOM, aqui podemos “esconder” o “aparecer” lo que necesitemos en el ejemplo es un texto que dice que no hay stock

Pero también nos dice como hacer un método callback.

Callback

Aquí podemos ver que todo lo que queramos hacer tenemos que agregar un objeto y luego lo que queremos que se haga, en este ejemplo se agrega el objeto computed y luego el método a usar, para esto usa un callback.

Evento click

Con click podemos poner función a un botón (o cualquier elemento) y como podemos ver podemos agregar elementos directos.

también podemos usar la siguiente expresión, v-on:click=”product.quantity += 1″.

Model inputs

Podemos ver que para tener control de estos input tenemos que usar v-model y luego un identificador.

V-bind

este método me gusto mucho si hacemos lo siguiente:

<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    productos: ["cafe", "leche", "pan", "milanesa"],
     message: 'Se ha cargado la pagina  ' + new Date().toLocaleString()
  }
})
<script>

<div id="app"  >
<ul>
<li v-for="producto in productos">
{{ producto }}
  
</li>
</ul>
  <p>{{ message}}</p>
  <span v-bind:title="message">
    pon el mouse encima y espera unos segundos
  </span>
</div>

Con este método v-bind y son directivas en vue js, es una manera de agregar información una vez renderizado o  al vuelo, es decir esto puede cambiar y es lo que se conoce como binding o bindeo.

Con esto comenzamos con los cursos de vuejs así que próximamente entraremos mas a fondo.