en Programación, VueJS

Curso VueJS – Hola Mundo (Clase 1)

Hola a todos, en esta entrada quiero escribirles sobre está librería (progressive framework, como ellos lo denominan) que he estado probando y utilizando últimamente, y que la verdad me ha parecido increíble, se trata de VueJS [Sitio Oficial].

VueJS Logo

Si no conocías a VueJS, aquí te dejo la descripción de su sitio oficial.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Básicamente VueJS, nos brinda otra opción más para tener en cuenta en nuestro patrón MVC, pudiendo ocupar el lugar de la V (View).

Pero, ¿por qué utilizar VueJS?

 

VueJS está diseñado desde cero para ser incrementalmente adaptable, cuenta con una característica llamada Declarative Rendering, que no es más que un sistema de plantillas para representar de forma declarativa datos en el DOM utilizando una sintaxis sencilla.

VueJS también nos proporciona Reactividad, y bueno, en su sitio oficial tienen una excelente comparativa con otras librerías y frameworks, como lo son ReactJS, EmberJS y AngularJS.

Y bien, a lo que estamos aquí, veamos un sencillo ejemplo de lo que nos aporta VueJS, realizando el mundialmente conocido “Hello World”:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>Hello World with VueJS!</title>
</head>
<body>
  <div class="container">
    <div class="jumbotron" id="app">
      <h1 class="text-center">Vue JS - Hello World</h1>
      <p class="text-center"></p>
    </div>
  </div>

  <script src="https://unpkg.com/vue@2.0.8/dist/vue.js" charset="utf-8"></script>
</body>
</html>

Como podemos notar, sólo tengo la estructura básica de una página HTML, en la cual hago referencia a Bootstrap y a VueJS desde el CDN que recomiendan en su sitio oficial.

Ahora justo antes de la etiqueta de cierre de body abrimos una nueva etiqueta de script para meter nuestro código de Vue y escribimos lo siguiente.

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

Como podemos ver, simplemente estamos creando una nueva instancia de Vue,
y declarando unos valores que recibe el objeto constructor de Vue.
Primero tenemos “el”, que recibe el elemento donde VueJS trabajará, aquí podemos
pasar cualquier tipo de selector CSS valido.
Luego tenemos “data”, el cual es un objeto, donde pasamos los datos que queremos que
se muestren en nuestra vista, aquí únicamente estamos pasando la clave “message” con
el mensaje que queremos mostrar.

Y ahora, si notaron en el código HTML tenemos una etiqueta p vacía,
la modificamos para que quede de la siguiente manera:

<p class="text-center">{{message}}</p>

Quedando nuestro código así:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>Hello World with VueJS!</title>
</head>
<body>
  <div class="container">
    <div class="jumbotron" id="app">
      <h1 class="text-center">Vue JS - Hello World</h1>
      <p class="text-center">{{message}}</p>
    </div>
  </div>

  <script src="https://unpkg.com/vue@2.0.8/dist/vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        message: 'Hello, VueJS!'
      }
    });
  </script>
</body>
</html>

Ahora, si todo está correcto, podemos visualizar nuestro archivo en el navegador
y veremos algo como esto:
Clase 1 - VueJS
Bien, por ahora es todo, este es la introducción a esta serie de entradas que tendremos sobre este grandioso y potente framework.

Puedes encontrar el código en este repositorio de GitHub.

Si te gustó por favor, no dudes en compartirlo, y dejar tus comentarios.
Saludos.

Deja un comentario