Hace unos meses el comente a un amigo @oriolpuigbuil sobre Vuejs, pero no le di continuidad, ya que pensé que seria un framework que terminaría muriendo antes de que llegar el invierno, pero las cosas no han sido así con Vuejs.

Vuejs ha crecido en el mercado y se ha convertido en una competencia para React, no soy un experto en React, ni he podido trabajar en grandes proyectos con el, la última vez que hice algo hacé ya casi año y medio.

Porque Vuejs ?

Yo buscaba un framework fácil de usar que la curva de aprendizaje sea corta y me permita tener buenos resultados, React y Angular2 lo había probado pero muy por muy encima.

Angular2 requiere que mejore mis conocimientos en Typescript, React a pesar de haber realizado algunas pruebas, quería mirar otra opción.

Una de las cosas que mas me gusto de Vue es lo simple, crear una app solo basta con  crear un index.html importar la librería y ya podemos tener todo el potencial de Vuejs.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="col-xs-12">
        <div class="row">
        </div>
    </div>
</div>
</html>

Ahora agregamos una área de script donde tendremos el código de  Vue y creare una instancia de Vue object,  este tendrá la responsabilidad de controlar una área de nuestro html o el template de nuestra aplicación.

Para relacionar la instancia de Vue con nuestro template necesitamos pasar como parámetro un objeto json, en la propiedad “el” la cual permite especificarle a la instancia de Vue que área de nuestro html tendrá el control.

new Vue({
   el:'#app'
})

Para exponer propiedades a nuestro template usamos la propiedad data que recibe un json object también donde puedo definir la propiedad message.

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

Para mostrar nuestra propiedad expuesta por data utilizamos {{  }} y el nombre de la propiedad.

<div class="row">
            {{message}}
 </div>

Aqui puedes ver todo el código funcionando.

Vue contiene varias propiedades ademas el y data, para agregar funcionalidades a nuestro componente  como computed, methods, watch que podemos explicar en mas detalle en otro post.

Happy Vue!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *