Diferencia entre revisiones de «Usuario:ManuelRomero/Vue»

Última revisión de 18:22 4 abr 2023

Iconos con vue

https://github.com/tailwindlabs/heroicons
https://escuelavue.es/cursos/curso-vue-3-desde-cero/reactividad-vue-3/

Contenido

1 Vue
2 Vue con Laravel
- 2.1 Probando la instalación
3 Componentes
4 Creamos un componente
5 Estructura de un componente vue
- 5.1 Ejemplos
6 Creando una tabla

Vue

La palabra Vue (pronunciado «viú») cuya traducción del francés es «view» (vista).
Vue es un framework frontend, concretamente de javascript
En un model MVC la vista es la parte del html, y este framework se centra en ese aspecto.
En esta línea tenemos otros conocidos frameworks como React, Angular y Svelte.
El mayor uso que se hace de este framework es usando componentes, que es como lo vamos a utilizar con laravel.

Vue con Laravel

Para instalarlo, una vez creado el proyecto de laravel, instalamos la última versión de vue (marzo 2023, Vue 3)

 npm install vue@next --save-dev

Instalamos el plugin de vue para vite

npm install @vitejs/plugin-vue

Añadimos el plugin en vite

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
 
export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});
Ahora debemos cargar una instancia de vue en un fichero js que carguemos en nuestra página html. Para ello primero cargamos una instacia de vue en '''''resources/js/app.js'''''
<source lang=javascript>
#import {createApp} from "vue";
import {createApp} from "vue/dist/vue.esm-bundler";
 
 
createApp({
 
  }).mount("#app");

Ahora debemos instalar nuestro elemen to con id app que hemos indicado en el método o evento mount en nuestra página html, y en ella incluir este script
En nuestra página layout que vamos a usar en todas las páginas de nuestro proyecto escribimos

<!--.....-->
 @vite([])
 <body>
  <div id="app">
 
 <!--.....-->
 
 
    </script>
  </div>
 </body>
</html>

Probando la instalación

Vamos a declarar una variable en nuestra instancia de vue y la vamos a visualizar en la página
Agregamos

import {createApp} from "vue";
 
.createApp({
 
  }).mount("#app");

Componentes

Un Componente html va a ser un fichero en el que vamos a especificar los tres aspectos fundamentales en un desarrollo html del cliente:

Comportamiento (Código js)
Datos o información (código html)
Estilo (Css)

La estructura del fichero va a tener esta forma

<template>
  <!-- Código HTML -->
</template>
 
<script>
  // Código Javascript
</script>
 
<style>
  /* Código CSS */
</style>

Una vez creado el fichero, lo podremos invocar en nuestra página html. Por ejemplo si el fichero anterior lo llamáramos cronmetro.vue,

<cronometro></cronometro>

Los ficheros han de tener extensión vue, y normalmente los ubicaremos en una carpeta (p.e. ./componentes)

Crearemos componentes para especificar diferentes elementos con comportamiento que vamos a poder intergrar en nuestra página html

Creamos un componente

Ahora creamos un componente:
1.- Creamos el fichero (desde el editor lo creamos como componente vue)

resources/js/componentes/saludo.vue

<template>
<h1>Hola desde un componente vue</h1>
</template>
 
<script>
export default {
    nombre: "saludo",
}
</script>
 
<style scoped>
 
</style>

2.- En el fichero app.js lo importamos y lo cargamos dentro del objeto createApp

import {createApp} from "vue/dist/vue.esm-bundler";
import saludo from "./componentes/saludo.vue";
 
createApp({
 components:{
     saludo,
 },
}).mount("#app");

3.- No olvidemos que tenemos que tener lanzado vite

 npm run dev

Estructura de un componente vue

Un componente es un objeto de java con una serie de elementos:

script>
export default {
    name: "saludo", //Nombre del componente
    data(){         //Esta función va a devolver las variables del componente, accesibles en todo el componente (también en la parte de la vista)
        return{
            nombre:"manuel", 
        }
    }
    methods:{ //Todas las funciones que se disponibles en el componente
    }
 
    computed 	//Funciones para generar valores calculados
 
    watch 	// Son funciones que se ejecutarán al detectar cambios en varialbes cuyo nombre coincida
    emits  / 	//Eventos que pueden ser emitidos desde el componente
 
}
</script>

Ejemplos

Ejemplo: un cronómetro

<template>
    <div >
        <h1>{{saludo}}</h1>
        {{ minutos }} : {{ segundos }} : {{ decimas }}
        <button @click="parar_arrancar"> {{stop}} </button>
        valor de nombre {{nombre }}
    </div>
</template>
 
<script>
export default {
    name: "cronometro",
    props:['nombre'],
    data() {
        return {
            minutos: 0,
            segundos: 0,
            decimas: 0,
            saludo:"",
            stop :"Parar",
            funcionando: true,
        }
    },
    created() {
        console.log("Se ha creado el componente");
    },
    mounted() {
        console.log("Estoy montado");
        this.saludo="hola";
        setInterval( ()=> {
            if (this.funcionando==true) {
                this.decimas++;
                if (this.decimas == 10) {
                    this.segundos++;
                    this.decimas = 0;
                    if (this.segundos == 60) {
                        this.segundos = 0;
                        this.minutos++;
                        if (this.minutos == 60)
                            this.minutos = 0;
                    }
                }
            }
        }, 100);
    },
    methods:{
        parar_arrancar:function (){
            if (this.funcionando==true) {
                this.funcionando = false;
                this.stop="Arrancar";
            }else{
                this.funcionando = true;
                this.stop="Parar";
            }
        }
    }
}
</script>
 
<style scoped>
</style>

Creando una tabla

Si la acción crud es totalmente habitual en una aplicación web, también lo es tener que visualizar tablas de datos
Es decir que estructuras de este tipo, se van a repetir de forma muy habitual:

@section("contenido")
    <table class="overflow-auto w-full h-65v p-6 border border-amber-700">
        <caption>Empresas</caption>
        <tr>
            <td>Id</td>
            <td>Nombre</td>
            <td>Direccion</td>
        </tr>
        @foreach($empresas as $empresa)
            <tr>
                <td>{{$empresa->id}}</td>
                <td>{{$empresa->nombre}}</td>
                <td>{{$empresa->direccion}}</td>
            </tr>
        @endforeach
    </table>
@endsection

La idea es construir un elemento vue llamado tabla_personalizada a la que le podamos parametrizar datos y luego asignar funciones o métodos en javascript que le dan mayor funcionalidad.

Creando una tabla que visulice filas
Que visualice nombre de campos y el nombre de la tabla
Que se puedan ordenar por campos
Que se pueda filtar valores de los campos
Llamadas por ajax (axios) al servidor
usando la paginación en vue

Diferencia entre revisiones de «Usuario:ManuelRomero/Vue»

Última revisión de 18:22 4 abr 2023

Contenido

Vue

Vue con Laravel

Probando la instalación

Componentes

Creamos un componente

Estructura de un componente vue

Ejemplos

Creando una tabla

Menú de navegación

Herramientas personales

Espacios de nombres

Variantes

Vistas

Acciones

Buscar

Navegación

Herramientas

Imprimir/exportar