Introducción al

desarrollo web con

Vue.js 2
Ing. Paulo C. Galarza
Que es Vue JS 2

 Es un framework de javascript que nos ayuda a crear aplicaciones de pagina simple

(SPA)
 Es un conjunto de métodos, funciones y estilos que nos facilitara crear pagina web.
Por que aprender Vue JS 2

 Es un framework muy ligero que tiene un promedio de peso de 18kb cuando esta
minimizado lo que hace que la aplicación se ejecute muy rápido.
 Tiene una curva de aprendizaje muy rápida ya que no se necesita aprender typescript
como en Angular 2, tampoco utiliza clases o extender clases o implementar interfaces, lo
único que debemos aprender es la sintaxis de Vue js que es muy simple
 La flexibilidad que ofrece es sencilla ya que para crear una aplicación pequeña solo
ejecutamos una línea de código y ya podemos importar vue js para empezar a crear la
aplicación, no se instala dependencias ni crear un package.json
 Nos da la flexibilidad de hacer una aplicación mas robusta utilizando Vue CLI
 Su rendimiento ya que no utiliza ningún transpilador como angular que utiliza para
traducir de typescrip a javascript ni polifijos
Estructura basica de index.html

Script para cargar vue dentro de la aplicación

Clase a ser controlada desde vue

Mensaje a ser modificado desde Vue

mediante el control de la clase vue

Nota: Se puede controlar una clase o un id.

Estructura basica de vue.js
Variable definida app

Instancia de la variable app llamada Vue

El elemento a controlar es la clase vue que tiene el

div del index.html mediante el argumento el

Objeto data del elemento el que

contendra toda la informacion que se
necesite utilizar en la aplicación de Vue

Propiedad mensaje que contiene la

informacion a interpolar en el index.html

Nota: Llamamos a la clase vue del div que tiene el index.html anteponiendo un punto Eje:
.vue
Estructura final

Clase que sera controlara mediante el elemento

el que tiene la instancia Vue de la variable app

Interpolacion de la variable mensaje en

el index.html que mostrara por pantalla
el valor de la variable mensaje.

Llamada a la clase vue del div del index.html

desde el elemento el anteponiendo el punto

Nota: El elemento a controlar es .vue, lleva el punto por que es una clase, la que tiene el div
del index.html
Resultado final

Nota: Los datos se envia desde el archivo vue.js mediante el elemento el a la clase vue del
div en el index.html. Se puede cambiar el valor de la propiedad mensaje desde la consola
del navegador para verificar la interpolacion.
Mi primera aplicación: Interpolar
métodos
Interpolacion de metodos
Directivas

Las directivas son atributos especiales

con el prefijo v-
Las directivas no son mas que pequeños
comando que podemos ejecutar dentro de  v-bind  v-else
nuestras etiquetas HTML para cambiar el
 v-cloak  v-on
comportamiento del DOM o como se va a
mostrar la información en el DOM.  v-text  v-else-if
Podemos crear nuestras propias directivas  v-html  v-pre
 v-model  v-for
 v-if  v-show
 v-once
Pasar valores a directivas

 A las directivas podemos pasar valores escribiéndola dentro de una etiqueta HTML

Ejemplo:
 <p>Mi texto<p>
 <p v-if>Mi texto<p>
 <p v-if=“mivar”>Mi texto<p>
 <p v-if=“mivar==5”>Mi texto<p>
 <p v-if=“x==y”>Mi texto<p>
Pasar argumentos

v-on nos ayuda a escuchar eventos del HTML

 <a href="miLink">Este es el link</a>
 <a v-on:cl¡ck="miMetodo">
 <a href="m¡L¡nk">Este es el l¡nk</a>
 <input v-on:keyup="enviar">
 <a v-bind:href="m¡L¡nk">Este es el link</a>
 <input v-on:keyup.enter="enviar">
Instalación de software necesario
Gestor de Base de Batos
Uso de plantilla
Reportes y gráficos estadísticos
Notificaciones en tiempo real
 Paquete de instalación
Instalación de (Software libre) que incluye:
Servidor Web Apache
XAMPP, servidor Gestor de base de datos MySQL

Apache PHP MariaDB Intérprete para lenguajes de

script: PHP y Perl

(MySQL)
Desde la versión 5.6.15 Xampp cambio la base de
datos MySQL a MariaDB
 Resaltar sintaxis de los lenguajes
de programación.
Instalar extensiones, temas.
Instalación de visual Incorpora la consola de
comandos Windows. Permite
Studio Code, Editor instalar métodos abreviados de
teclado utilizados en

de código sublimeText, Atom, Vim.

Editor de código para construir
y depurar aplicaciones web
modernas.
Disponible en Linux, Mac OS y Windows.
Es gratuito.
Framework Vue.Js  Vue.js es un framework JavaScript (open-source)
progresivo para construir interfaces de usuario.
 Vue te permite dividir una página web en
componentes reusables cada uno con su HTML,
CSS y JavaScript.
 Muy popular para desarrollar aplicaciones
modernas y escalables en el lado del cliente.
 Excelente documentación y el apoyo de Laravel.
Una gran ventaja de Vue.js es que es reactivo.
 Descargar los archivos de vue.js y referenciar
dentro del archivo index.html, al igual que
Bootstrap.
Bootstrap
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/boo
tstrap/4.1.3/css/bootstrap.min.css"
Estructura Html5, integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoA
Vue.js y Bootstrap pmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
Vue.js
<script src="js/vue.js"></script>
 Cuando realizamos una
instancia de Vue este recibe
como parámetro un json object,
el cual posee varias
propiedades, entre estas:
el
data

Propiedades de vue methods

computed
Watch
Entre otras
 Permite especificar que elemento del
DOM será controlado por nuestra
instancia de Vue

Propiedad el
 var app = new Vue({
el : '#app’
)}

el
 Permite almacenar las propiedades que
queremos exponer en nuestro témplate y
para acceder solo tenemos que usar {{}}.

Propiedad data
var app = new Vue({
el : '#app’,
data : {
mensaje: 'Hola vue.js!’
}
)}
 Crear una carpeta llamada “cursovue”
en el directorio de la unidad C:\, el cual
contendrá un subdirectorio con las
carpetas “js”

Ejercicio