Hola gente del futuro.
Vue.js es un framework progresivo para construir interfaces de usuario.
Puede ser integrado a cualquier proyecto ya existente, permite crear desde módulos pequeños hasta complejas aplicaciones de una sola página (SPA), pero eso no quiere decir que sólo funciona en SPA. ;)
Vamos a crear un hola mundo, para ello debemos incluir en nuestro HTML el script de Vue.js:
<script src="https://unpkg.com/vue@2.5.2/dist/vue.js">script</script>
Ahora, en cualquier lugar del body creamos un elemento padre sobre el cual actuará Vue.js, es decir, que Vue.js sólo podrá actuar dentro de ese elemento, sin afectar el resto de nuestra página.
<div id="app"></div>
Bien, creemos ahora nuestro componente de Vue.js:
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hola mundo'
}
});
</script>
En la propiedad el indicamos el selector sobre el cual actuará nuestro componente, en nuestro caso usamos el id del div que hemos creado.
La propiedad data contendrá los datos de nuestro componente, es decir, la información que usaremos para moldear las cosas que mostraremos en pantalla, en nuestro ejemplo será un mensaje (message), podemos colocar cualquier tipo de estructura y llamar como queramos las cosas que estén dentro de data.
El contenido de data estará automáticamente disponible dentro del elemento que hayamos indicado en la propiedad el, para mostrar el valor de message en pantalla usamos dobles llaves {{ }}:
<div id="app">
{{ message }}
</div>
Puedes ver el ejemplo funcionando en el siguiente Pen:
See the Pen Vue.js-intro by Daniel Romero (@danielromeroauk) on CodePen.
Eso es todo por ahora futuro desarrollador que usará Vue en sus proyectos, nos leemos en el siguiente artículo.