Vue js Comenzando y aprendiendo progresivamente a crear interfases.
El framework progresivo y fácil de aprender
Una de las cosas por las cuales me ha encantado Vue.js aparte de facilidad para aprenderlo ha sido que el aprenderlo no te ata a ningún estilo de código. Eres libre de como usarlo en tus proyectos y a pesar de haber chorromil módulos no todo el tiempo tienes que buscar todo hecho como solía o suele suceder con los plugins de jQuery, es tan sencillo que puedes empezar una funcionalidad modular al instante. De hecho es tan sencillo de usar que puedes usarlo directamente desde el CDN para crear aplicaciones pequeñas, usarlo con Vue-cli para SPA(Single Page Application), nuxt, weex, etc. En fin las posibilidades son muchisimas.
A continuación veremos algunos ejemplos de como usarlo directamente con CDN o descargándolo e incluyendo el
link, en el cual tenemos de dos sabores, produccion y desarrollo. Trabajaremos con desarrollo ya que queremos que nos muestre algunos warnings
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Vue-cli lo dejaremos para mas tarde, y Vue-cli significa basicamente instalar todopaquete a través de node npm lo cual para nosotros que vamos empezando no es tan
necesario por el momento.
Una vez que ya hemos instalado vue procederemos a colocar las etiquetas donde queremos
cargar o desarrollar nuestra aplicación. Puede se en cualquier lugar, Vue se ejecutara
solamente en esta área y no afectara al resto de la aplicación.
<div id="app"></div>
A nuestra aplicación le hemos puesto el id app, pero bien podemos ponerle cualquier ID,ya que muchas veces podemos tener diferente aplicaciones o modulos dentro de nuestra pagina.
Es importante entender que vue es un framework progresivo, es decir solo usamos lo que
ocupamos o sabemos que vamos a ocupar.
Una vez puesto el lugar donde ejecutaremos nuestra pequeña aplicación procedemos a
crear nuestro codigo inicializador. Dentro de las etiquetas script donde ejecutamos
nuestro javascrip pondremos este pequeño codigo:
<script>
const app = new Vue({
el: '#app',
data: {
mensaje: 'Hola Vue'
}
});
</script>
Explicando un poquito lo que hemos hecho, hemos creado una constante llamada app, es
como una variable, pero que como su nombre lo indica es constante no variará. Eso
nos permite que no tengamos algún error en nuestra aplicación a futuro y vallamos a
reescribir nuestra aplicación. Luego una vez después de haber usado cost, le asignamos
un objeto creándolo con el operador "new" new Vue es una función que acepta como parámetro
un objeto de javascript. En javascript uno de los datos que maneja como pilares son
los objetos. De hecho se puede decir que todo en javascript es un objeto, sin embargo
hablaremos de ello en otra publicación. En este caso entendemos objeto como un simple
tipo de dato que contiene atributos pares, clave: valor. Dentro encontramos dos de los
principales propiedades de Vue, el y data. el: "#app" contiene el elemento donde se ejecutara nuestra
aplicación. Y data los datos que se manejaran en ella, podemos ir agregando datos
conforme crece nuestra aplicación, sin embargo es importante que se agreguen en este
espacio antes de iniciarse la aplicación.
Tenemos dentro de data una clave mensaje con el valor 'Hola Vue' pero no hemos puesto
el lugar donde se va a mostrar nuestro mensaje, para esto usaremos las doble llaves
de vue para renderizar nuestros dato
<div id="app"> {{ mensaje }} </div>
Listo una vez que cargemos nuestra pagina veremos reflejado nuestro Hola Vue. Sin embargo,
esto no termina aqui y solo hemos empezado. Ahora nuestra propiedad es reactiva, significa
que cada que cambiemos el dato mensaje automáticamente se actualizará.
Un momento mientras cargamos los comentarios
{{item.date}}
{{item.image}}
{{subitem.date}}
{{subitem.image}}