Introducción al

desarrollo web con

Vue.js 2
Ing. Paulo C. Galarza
Qué 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
Interpolación

 La forma más básica de enlazar datos en Vue.js es con el uso de interpolaciones de texto,
usando la sintaxis de llaves. Internamente Vue lee y compila las plantillas haciendo uso de
funciones render de algo llamado DOM virtual, esto permite a Vue enlazar de forma
declarativa el DOM con los datos en la instancia de Vue, realizando el menor número
posible de manipulaciones en el DOM cuando el estado de nuestra aplicación cambia.
 La sintaxis para las interpolaciones es dobles llaves {{ propiedad }}
Mi primera aplicación: Interpolación
sobre una propiedad
Mi primera aplicación: Interpolar
métodos
Podemos hacer una interpolación sobre un valor que nos
retorne un metodo
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