logo

Creando nuestra primera aplicación Vue.js

Suscríbase a mi lista de correo electrónico ahora en http://jauyeung.net/subscribe/

Sígueme en Twitter en https://twitter.com/AuMayeung

Muchos más artículos en https://medium.com/@hohanga

Aún más artículos en http://thewebdev.info/

Vue.js es un marco de aplicación web fácil de usar que podemos usar para desarrollar aplicaciones front-end interactivas.

En este artículo, veremos cómo crear nuestra primera aplicación Vue.js. Veremos el enlace de datos, la representación condicional y los bucles.

Primeros pasos

Vue.js está diseñado para ser un marco progresivo que crea interfaces de usuario. Se puede agregar de forma incremental a una aplicación existente que usa otras bibliotecas.

Además, se puede utilizar para crear una nueva aplicación independiente. Al igual que otros marcos como Angular y React, se puede usar para crear una aplicación de una sola página con herramientas modernas con Vue CLI y su propio ecosistema de bibliotecas.

Para comenzar rápidamente, podemos usar un script etiqueta para incluir la versión de desarrollo del marco Vue.js, que incluye las advertencias que solo están disponibles cuando se usa esta compilación. Facilita el desarrollo.

Podemos incluir la compilación de desarrollo escribiendo:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

en nuestro index.html archivo o:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

para la compilación de producción.

Para crear nuestra primera aplicación, primero creamos index.html y añadir:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <script src="./src/index.js"></script>
  </body>
</html>

Luego en src/index.js , añadimos:

new Vue({  
  el: "#app",  
  data: {  
    message: "Hello"  
  }  
});

Entonces deberíamos ver Hello impreso en la pestaña del navegador.

Lo que hicimos en index.html es que agregamos el marco Vue.js con:

<script src="[https://cdn.jsdelivr.net/npm/vue/dist/vue.js](https://cdn.jsdelivr.net/npm/vue/dist/vue.js)"></script>

Luego agregamos la plantilla Vue.js de la siguiente manera:

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

A continuación, agregamos:

<script src="./src/index.js"></script>

para que podamos cargar nuestro propio código JavaScript que usa Vue.js para inicializar la aplicación.

Luego en src/index.js , añadimos:

new Vue({  
  el: "#app",  
  data: {  
    message: "Hello"  
  }  
});

para que podamos cargar nuestra aplicación con el message variable establecida en el 'Hello' cadena, que se representa en index.html cuando nosotros tenemos:

{{ message }}

Las llaves dobles indican que es una propiedad del data y completará el message marcador de posición con el valor de message propiedad de data en el objeto que pasamos al Vue constructor.

Otra forma de vincular los atributos de los elementos al valor de la propiedad en el data propiedad es usar v-bind:title .

En index.html , nosotros escribimos:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <span v-bind:title="message">
        Hello
      </span>
    </div>
    <script src="./src/index.js"></script>
  </body>
</html>

Luego, cuando mantenemos src/index.js lo mismo, veremos una información sobre herramientas que dice Hello cuando pasamos el mouse sobre él.

Lo que hicimos fue configurar el title atributo del span al valor de data.message en el objeto que pasamos al Vue constructor.

v-bind se llama directiva y se usa para establecer el valor de title atributo dinámicamente en el código anterior.

Condicionales

Podemos mostrar condicionalmente algo en la pantalla usando el v-if directiva.

Para usarlo, podemos escribir lo siguiente en index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <span v-if="visible">
        Hello
      </span>
    </div>
    <script src="./src/index.js"></script>
  </body>
</html>

Luego cuando escribimos lo siguiente en src/index.js como sigue:

new Vue({  
  el: "#app",  
  data: {  
    visible: false  
  }  
});

No vemos nada.

Esto se debe a que ocultamos el span con configurando visible a false y pasándolo a v-if . Cuando tenemos un v-if directiva añadida a un elemento. Solo se muestra si el valor que pasamos al v-if la directiva es true .

v-if=”visible” significa que el contenido de este elemento se mostrará cuando data.visible es true .

Entonces, si cambiamos src/index.js a:

new Vue({  
  el: "#app",  
  data: {  
    visible: true  
  }  
});

Deberíamos ver Hello en la pantalla del navegador.

Bucles

Podemos usar el v-for directiva para recorrer matrices que son valores de una propiedad de data .

Por ejemplo, podemos usarlo de la siguiente manera. En index.html , nosotros escribimos:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="person in persons">
          {{person.name}}
        </li>
      </ul>
    </div>
    <script src="./src/index.js"></script>
  </body>
</html>

Luego en src/index.js , nosotros escribimos:

new Vue({
  el: "#app",
  data: {
    persons: [{ name: "Mary" }, { name: "Jane" }, { name: "Joe" }]
  }
});

Entonces obtenemos:

Mary  
Jane  
Joe

en la pantalla de nuestro navegador.

Lo que hizo el código anterior fue establecer data.persons en index.js a una matriz, que luego puede ser recorrida por el v-for directiva en index.html .

Vue.js luego representó el valor de name propiedad de cada entrada en cada li elemento como especificamos en la plantilla:

<ul>  
  <li v-for="person in persons">  
    {{person.name}}  
  </li>  
</ul>

y así obtenemos las entradas enumeradas en una lista.

Conclusión

Podemos crear una aplicación Vue.js simple al incluir el marco Vue.js en nuestro HTML script etiqueta y luego podemos agregar el código para nuestra aplicación Vue.js en un archivo JavaScript.

Entonces podemos usar directivas para mostrar elementos del data propiedad del objeto que pasamos al Vue constructor en plantillas.

Podemos usar el v-bind Directiva para establecer valores de atributos de datos. v-if para mostrar cosas condicionalmente, y v-for para mostrar cosas de las entradas de la matriz recorriéndolas y representando el contenido.