Guía de Vue.js Jairo H.

Gonzalez M

Qué es Vue.js

 Es un marco de trabajo que se utiliza para crear interfaces de usuario o FRONTEND que pueden ser adaptables de
forma incremental, es decir que sus componentes se pueden construir o mejorar de forma escalable.
 Cada framework de JavaScript tiene su enfoque de como actualizar el DOM, manejar los eventos del navegador, y
brindar una experiencia de desarrollo satisfactoria.
 Vue.js es un framework progresivo.

Características

Es un framework reactivo que implementa el enlace de datos entre la vista y el modelo en dos direcciones de una
manera muy eficiente y rápida.
Permite crear componentes reutilizables.

Prerrequisitos

Manejo solido de HTML, CSS y JavaScript ya que es un framework basado con este lenguaje.

Programas utilizados
Programa
Visual Studio Code
Extensiones

Vuejs trabaja por medio de componentes y dentro del HTML un componente es una etiqueta o tag.

Para trabajar con vuejs debemos crear una etiqueta que puede ser un div y asignarle un identificador id que puede ser
por ejemplo id=”app” , la cual será la que utilizaremos desde vuejs.
Luego, debemos crear una etiqueta <script></script> desde donde se trabajará con vuejs.

El código que se ubique dentro de esta etiqueta podrá se manejado

desde Vuejs.

Pueden existir varias etiquetas o componentes que pueden ser

manejados desde Vue, pero deben tener un id diferente.

En esta etiqueta de JS contiene el enlace a la librería de vue, que

puede ser a través de CDN o de forma local.

En esta etiqueta de JS es donde debemos colocar el código Vue ya que

vue esta basado en JavaScript.

Debemos crear dentro del script de JavaScript un objeto de la clase Vue y creamos una propiedad denominada el: en la
cual especificamos el id del componente que deseamos utilizar, en el ejemplo que estamos realizando el componente
tiene el id de ‘app’ como está identificado con id desde vue debemos hacer referencia con el símbolo de #.
 Guía de Vue.js Jairo H. Gonzalez M

<script>
const app = new Vue( { )
{
el: ‘#app’, : > Indica el nombre del componente a utilizar desde vue
})
</script>

Luego debemos especificar la propiedad data: la cual especifica un objeto cuyas propiedades determina los elementos
que se va a enviar al componente.

<script>
const app = new Vue( { )
el: ‘#app’,
data: { :> Especifica un objeto a través del cual enviaremos elementos al componente.
mensaje: “Hola mundo”
}
})
</script>

Si ejecutamos el código podemos mirar que dentro del componente de nombre ‘app’ no se muestra el mensaje, para
que esto ocurra debemos indicar dentro del componente que necesitamos hacer referencia a la propiedad mensaje esto
lo hacemos colocando dentro del componente el nombre de la propiedad encerrado entre llaves dobles {{ }}.

<div id = “app”>
{{ mensaje }}
</div>

Si mostramos en el navegador nuestra pagina podemos observar que el mensaje se muestra de forma correcta.

Codigo Resultado dentro del navegador

Guía de Vue.js Jairo H. Gonzalez M
Guía de Vue.js Jairo H. Gonzalez M