Introducción al
desarrollo web con
[Link] 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 [Link]
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 [Link]
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 [Link]
Variable definida app
Instancia de la variable app llamada Vue
El elemento a controlar es la clase vue que tiene el
div del [Link] 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 [Link]
Nota: Llamamos a la clase vue del div que tiene el [Link] 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 [Link] que mostrara por pantalla
el valor de la variable mensaje.
Llamada a la clase vue del div del [Link]
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 [Link]
Resultado final
Nota: Los datos se envia desde el archivo [Link] mediante el elemento el a la clase vue del
div en el [Link]. 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:[Link]="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 [Link] [Link] 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 [Link] es que es reactivo.
Descargar los archivos de [Link] y referenciar
dentro del archivo [Link], al igual que
Bootstrap.
Bootstrap
<link rel="stylesheet"
href="[Link]
tstrap/4.1.3/css/[Link]"
Estructura Html5, integrity="sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoA
[Link] y Bootstrap pmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
[Link]
<script src="js/[Link]"></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 [Link]!’
}
)}
Crear una carpeta llamada “cursovue”
en el directorio de la unidad C:\, el cual
contendrá un subdirectorio con las
carpetas “js”
Ejercicio