Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Vue.js: primeros pasos

Vue.js: primeros pasos

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.

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal