Laravel

v8
Introducción
 Es un framework progresivo adaptable
¿Qué es basado en JavaScript para construir
Laravel? interfaces de usuario.
 Es un conjunto de estándares, conceptos,
prácticas, puntos de vista, etc. que se unen
FRAMEWORK para enfrentar y resolver nuevos problemas
o desafíos.
 Crece de manera paulatina en base a las necesidades que van
apareciendo.

PROGRESIVO

Cuando encaramos un desarrollo con Vue.JS, podemos indicar qué partes del framework
queremos incluir. Vue.JS está modularizado en diferentes librerías separadas que permiten ir
añadiendo funcionalidad en el momento que las vayamos necesitando.
 Se puede implementar a proyectos desde su
ADAPTABLE comienzo y a proyectos ya existentes.
  La parte del modelo (Model), en la cual vamos a ver todo lo que
serían los datos, dónde vamos a tener toda la lógica de datos.
 La vista modelo (View Models) que va a ser la encargada de
interactuar tanto con el modelo como con la vista.

EL PATRON  La vista (Views) que va a ser la parte visual.

MVVM
(MODELO VISTA
VISTAMODELO)
 Al cambiar un dato en el modelo, este cambio se
refleja o propaga de inmediato a la vista o vistas
que dependan de él.

En Vue esto es bidireccional.

DATA-
BINDInG
 Son sistemas que reaccionan al cambio.
Permiten el cambio de estado interno por
reactivo medio de eventos (externos o internos) que
manejan acciones cuando son accionados.
 El termino renderizado (representación gráfica),
es un anglicismo que viene de rendering, se
aplica en informática en aquellos casos en los
que el ordenador dibuja, pinta o representa algo
en la pantalla.
renderizar
En desarrollo web, el renderizado es cuando
todos los datos ya procesados sean objetos,
arreglos, cadenas, etc., se incrustan en la página
de la vista y su contenido se pinta en la pantalla,
haciendo que el contenido sea dinámico.
 Son instancias Vue reutilizables. Permiten
agrupar y encapsular funcionalidad de
cualquier tipo. Desde un botón hasta una
tabla pasando por una sección entera de una
Web.
componente
Los componentes consisten en:
 Marca HTML: la plantilla del componente
 Estilos CSS: cómo se mostrará el marcado HTML
 Código JavaScript: los datos y el comportamiento.
Instalación
instalación https://vuejs.org/v2/guide/

Para referencia on-line, pegar el script en el

documento html.
instalación https://cdn.jsdelivr.net/npm/vue/dist/vue.js

Para referencia off-line:

• Copiar la url del src.
• Pegarlo en una nueva pestaña del navegador.
• Clic derecho sobre el código que aparece.
• Guardar como
• El archivo se guarda como vue.js
• Colocarlo dentro del proyecto, de preferencia en una carpeta
con nombre js.
• Referenciar en el documento html como script

<script src=“js/vue.js”></script>
 Esta extensión nos facilita la depuración de
nuestra aplicación Vue.
 Para descargar seguir el siguiente enlace:
https://github.com/vuejs/vue-devtools#vue-devtools
 Elegir el enlace correspondiente a nuestro navegador.

 Una vez instalada verifique que la extensión tenga habilitada el

acceso de URL de archivo y opcional modo incógnito:

Vue devtools Se vera de la siguiente manera:


instancia
Creación de instancia de vue

Para poder empezar a trabajar tenemos que crear una instancia de la aplicación Vue:

const nombre = new Vue({ });

La instancia se puede realizar:

 Dentro del archivo HTML en etiquetas <script></script>
 En un archivo independiente con extensión .js
 Se pueden tener tantas instancias se deseen en un documento HTML.
Creación de instancia de vue
const app = new Vue({
el: '#main’,
template:
` <input type="text" />
<button>Añadir</button> ` ,
data: {
Estructura mostrar: true,
General de una titulo: 'Rectángulo’,
largo: 100,
instancia VUE alto: 40
},
methods: {
toggleMostrar: function(){ this.mostrar = !this.mostrar }
},
computed: {
area : function(){ return this.largo * this.alto; }
}
});
Propiedades
generales
 Determina el tag html sobre el cual operará
nuestra instancia Vue. Es un selector de tipo
id y se expresa igual que en css.

el Nota: La instancia trabajara solamente sobre el nodo que

identifique esta propiedad, incluyendo sus hijos.

const app = new

Vue({
el: '#main’,
});
 Contiene el código HTML de nuestra
instancia VUE o componentes.
Se utilizan las comillas invertidas ` ` si se
template desea escribir más de una línea HTML.

Nota: Se ocupa generalmente en componentes o en asignaciones

muy especificas.
 Es un objeto que contiene las propiedades que
podemos utilizar en nuestra instancia.
data: {
mostrar: true,
titulo: 'Rectángulo’,
largo: 100,
data alto: 50,
lista: [1,2,3,4,100,300],
datos: {
nombre: 'Alejandro',
aPaterno: 'Hernández',
aMaterno: 'Andrade'
}
 Es un objeto con funciones que podemos
invocar y cuyo contexto está enlazado con
el propio objeto.
Nota: Se utilizan cuando queramos modificar las propiedades de
nuestro objeto, o enviar eventos a otros componentes o instancias
de la página.
methods: {
toggleMostrar: function(){
methods Forma General
}
this.mostrar = !this.mostrar

methods: {
toggleMostrar(){
Forma Abreviada
this.mostrar = !this.mostrar
}
}
 Es un objeto que contiene una serie de
métodos que devuelven valores calculados
a partir de las propiedades del objeto.
Nota: El objetivo de las propiedades computadas es manipular el
modelo creando nuevas propiedades ANTES de renderizar.

computed: {
area : function(){
computed }
return this.largo * this.alto;
Forma General

computed: {
area(){
return this.largo * this.alto; Forma Abreviada
}
}
 Es un hecho que se puede llegar a los mismos
resultados usando un método y una propiedad
computada, pero su diferencia radica en que:

 Las propiedades computada ejecutara sus cálculos solo la

primera vez que se le invoque y mientras alguna de las
dependencias involucradas en los cálculos no cambie, el
valor calculado se almacenara en CACHE del navegador
y todas aquellas invocaciones posteriores que tenga en la
vista, referenciaran a este valor en cache sin volver a
métodos VS ejecutar los cálculos de la propiedad computada.

propiedades  Los métodos ejecutaran sus cálculos tantas veces se les

computadas invoque en la vista.
interpolación
 Es la posibilidad de cambiar partes de una
cadena de texto por variables,
permitiéndonos indicar dónde queremos un
comportamiento dinámico de una cadena de
texto dentro de VueJS.

Existen dos formas:

• mustaches (llaves doble)

• Directivas
tipos
interpolación
• Mustaches (llaves doble):
const app = new Vue({ <header id="encabezado">
el: '#encabezado', <h1>{{titulo}}</h1>
data:{ </header> html
titulo: 'Instancias en Vue.js'
}
}); js

• Interpretan los datos como texto plano.

• Permite expresiones JavaScript:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO’ }}
• No se pueden utilizar dentro de atributos HTML.
interpolación
• Directivas:

const app = new Vue({ <header id="encabezado">

el: '#encabezado', <p v-html="blog"></p>
data:{ </header> html
blog: '<h4>Hola mundo </h4>'
}
}); js

Es un atributo especial que le agregaremos a elementos que tenemos dentro de

nuestro documento html para alterarlos.
directivas
 Son atributos especiales que se colocan en
las etiquetas HTML y están prefijados por
v-, como por ejemplo: v-for, v-bind o v-on,
entre muchas otras.

Estas directivas permiten realizar acciones

dinámicas potentes (bucles, condicionales,
etc...) que no se pueden realizar en HTML
por si solo, pero que Vue permite utilizar en
Las directivas en sus etiquetas.
vue.js
Esquema general

• Directiva: El nombre de la directiva, que a veces, es posible abreviarlo con un carácter.

• Nombre: Evento que se desea escuchar de la etiqueta.
• Modificador: En ciertas directivas se puede modificar el comportamiento.
• Valor: En ciertas directivas, se requiere establecer un valor. Se escribe como el valor de un
atributo HTML. Este valor también puede ser la llamada a un método el cual puede contener
argumentos.
 Inserta html en nuestra vista. Es decir que
v-html actualizará la propiedad innerHTML del
elemento.
<div v-html=“contenido"></div>

Directivas básicas
 Inserta texto en nuestra vista. Es decir que
actualizará la propiedad textContent del
elemento.

v-text No interpreta las etiquetas HTML.

<span v-text="msg"></span>
Nota: Si deseamos solo modificar parte del contenido usaremos una
<!-- es equivalente a -->
expresión {{ propiedad }}.
<span>{{msg}}</span>
Si se introduce contenido directo de tipo string en la directiva, debe
ponerse entre comillas simples.

Directivas básicas
 Oculta o muestra un elemento HTML
v-show usando la propiedad display de CSS.
<h1 v-show=“true">Hola!</h1>

Directivas básicas
 Asegura que solo se evalué una sola vez el
contenido del área donde se aplica.
v-once
<span v-once> Nota: No vuelve a actualizar el contenido.
Esto nunca cambiara: {{ msg }}
</span>

Directivas básicas
 Agrega o elimina condicionalmente un
v-if elemento al DOM.
<div v-if="type === 'A'">

Directivas de control
 v-else-if Condición intermedia entre v-if y v-else.

<div v-else-if="type === 'B'">

Directivas de control
 Muestra un elemento cuando v-if se evalúe
v-else como falso.
<div v-else>

Directivas de control
 v-for Realiza un bucle.

<div v-for="item in items" :key="item">

Nota: El atributo especial key (clave única) es utilizado
principalmente como una pista para el algoritmo del DOM virtual
de Vue para identificar VNodes cuando se compara nuevas listas de
nodos contra listas antiguas.

Directivas de control

v-model
<input v-model="searchText">
Crea bindings de datos bidireccionales
(two-way binding) en elementos input,
textarea y select de un formulario.
La directiva busca automáticamente la manera correcta de
actualizar el atributo de un objeto según el tipo de entrada.
Directivas avanzadas
 Se utiliza para gestionar los eventos (click,
change, keyup, etc.) del DOM desde el
HTML vinculado con la entidad Vue.
v-on
syntaxis completa Es equivalente a utilizar
<a v-on:click="doSomething()"> . </a>
.addEventListener() en JavaScript.
abreviado
<a @click="doSomething()"> . </a>

Directivas avanzadas
 Permite enlazar (bindear) una propiedad de
la entidad Vue con un atributo específico de
una etiqueta HTML de tal manera que este
adquiera el valor de la propiedad.
v-bind
syntaxis completa  Cuando se utiliza para enlazar una propiedad, esta debe estar
<a v-bind:href="url"> ... </a> previamente declarada en el modelo.
 Cuando se utiliza para enlazar el atributo class o style, soporta
abreviado atributos adicionales tales como Arreglos u Objetos.
<a :href="url"> ... </a>

Directivas avanzadas
PROPIEDADES
ADICIONALES
 Es una función que se va a ejecutar ANTES
de pintar un dato en una vista. La
transformación solo se realiza al pintarlo,
sin alterar su valor original.

filters Por ejemplo: Muestra una cadena en

mayúsculas. Formatea datos monetarios,
Extrae información que cumpla con cierta
condición, etc.
 Existen tres formas generales de aplicarlos:
• Locales
filters: {
mayusculas: function (value) {
return value.toUpperCase();
}
}

• Globales
Vue.filter( ‘mayusculas’,
value => { value.toUpperCase(); } );

• Propiedades Computadas (array.filter() - JS)

computed: {
Formas mejoresJuegos: function(){
return
this.juegos.filter((juego)=>juego.puntos >= 5);
}