Diferencia entre revisiones de «Usuario:ManuelRomero/Vue»

De WikiEducator
Saltar a: navegación, buscar
(→‎Lo básico)
(→‎Creando una tabla)
 
(20 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
−
;Cargar la librería en el fichero html y declarando variables reactivas
+
;Iconos con vue
−
{{MRM_Actividad|Title=Hola Mundo|
+
https://github.com/tailwindlabs/heroicons
−
;app.js
+
https://escuelavue.es/cursos/curso-vue-3-desde-cero/reactividad-vue-3/
 +
<div class=parrafo>
 +
===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.
 +
[[Archivo:vuejs.png]]
 +
 
 +
===Vue con Laravel===
 +
*Para instalarlo, una vez creado el proyecto de laravel, instalamos la última versión de vue (marzo 2023, Vue 3)
 +
<source lang=bash>
 +
npm install vue@next --save-dev
 +
</source>
 +
;Instalamos el plugin de vue para vite
 +
<source lang=bash>
 +
npm install @vitejs/plugin-vue
 +
</source>
 +
;Añadimos el plugin en vite
 +
<source lang= javascript>
 +
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>
 
<source lang=javascript>
−
//Declaro una clase que será una instancia de Vue
+
#import {createApp} from "vue";
−
const app={
+
import {createApp} from "vue/dist/vue.esm-bundler";
−
     data(){//Aquí declaramos las variables que quiero hacer reactivas en la vista
+
 
 +
 
 +
createApp({
 +
 
 +
  }).mount("#app");
 +
 
 +
</source>
 +
 
 +
*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
 +
 
 +
 
 +
<source lang=html5>
 +
<!--.....-->
 +
@vite([])
 +
<body>
 +
  <div id="app">
 +
 
 +
<!--.....-->
 +
 
 +
       
 +
    </script>
 +
  </div>
 +
</body>
 +
</html>
 +
</source>
 +
====Probando la instalación====
 +
*Vamos a declarar una variable en nuestra instancia de vue y la vamos a visualizar en la página
 +
*Agregamos
 +
<source lang=javascript>
 +
import {createApp} from "vue";
 +
 
 +
.createApp({
 +
 
 +
  }).mount("#app");
 +
 
 +
</source>
 +
 
 +
 
 +
===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
 +
<source lang=html5>
 +
<template>
 +
  <!-- Código HTML -->
 +
</template>
 +
 
 +
<script>
 +
  // Código Javascript
 +
</script>
 +
 
 +
<style>
 +
  /* Código CSS */
 +
</style>
 +
</source>
 +
*Una vez creado el fichero, lo podremos invocar en nuestra página html. Por ejemplo si el fichero anterior lo llamáramos '''''cronmetro.vue''''',
 +
<source lang=html5>
 +
<cronometro></cronometro>
 +
</source>
 +
*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
 +
<source lang=javascript>
 +
<template>
 +
<h1>Hola desde un componente vue</h1>
 +
</template>
 +
 
 +
<script>
 +
export default {
 +
    nombre: "saludo",
 +
}
 +
</script>
 +
 
 +
<style scoped>
 +
 
 +
</style>
 +
 
 +
</source>
 +
*2.- En el fichero app.js lo importamos y lo cargamos dentro del objeto createApp
 +
<source lang=javascript>
 +
import {createApp} from "vue/dist/vue.esm-bundler";
 +
import saludo from "./componentes/saludo.vue";
 +
 
 +
createApp({
 +
components:{
 +
    saludo,
 +
},
 +
}).mount("#app");
 +
</source>
 +
*
 +
*3.- No olvidemos que tenemos que tener lanzado '''vite'''
 +
<source lang=bash>
 +
npm run dev
 +
</source>
 +
===Estructura de un componente vue===
 +
*Un componente es un objeto de java con una serie de elementos:
 +
<source lang=javascript>
 +
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{
 
         return{
−
             mensaje :"Hola persona con mensaje 1",
+
             nombre:"manuel",  
−
            mensaje1 :"Otro Hola persona con mensaje 2",
+
 
         }
 
         }
 
     }
 
     }
 +
    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
 +
 
}
 
}
−
Vue.createApp(app).mount("#app1"); //Monto el objeto como una app de vue con el id app1
+
</script>
 
</source>
 
</source>
−
;html
+
====Ejemplos====
−
<source lang=html5>
+
{{plegable|hide|Ejemplo: un cronómetro|
−
<script src="https://unpkg.com/vue@next"></script>
+
<source lang=javascript>
 +
<template>
 +
    <div >
 +
        <h1>{{saludo}}</h1>
 +
        {{ minutos }} : {{ segundos }} : {{ decimas }}
 +
        <button @click="parar_arrancar"> {{stop}} </button>
 +
        valor de nombre {{nombre }}
 +
    </div>
 +
</template>
  
−
<!--En el id tengo que especificar el componente vue que he cargado-->
+
<script>
−
<div id=app1>
+
export default {
−
<!-- Aquí puedo referenciar las variables creadas en la funcińo data del objeto que instancia Vue -->
+
    name: "cronometro",
−
{{mensaje}}
+
    props:['nombre'],
−
{{mensaje1}}
+
    data() {
−
</div>
+
        return {
−
<script src='app.js'></script>
+
            minutos: 0,
−
<!-- cargo el script debo hacerlo aquí,
+
            segundos: 0,
−
ya que el id y las variables han de estar disponibles en el DOM-->
+
            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>
 
</source>
 
</source>
−
}}
 
−
<br />
 
−
;Notas
 
−
{{Nota|
 
−
*El objeto se declara constante <source lang=php>const app</source>: '''''No se puede reasignar, pero si modificar su contenido.'''''
 
−
{{MRM_Puntos clave|
 
−
;https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/const
 
−
La declaración de una constante crea una referencia de sólo lectura. No significa que el
 
−
valor que tiene sea inmutable, sino que el identificador de variable no puede ser
 
−
reasignado, por lo tanto, en el caso de que la asignación a la constante sea un objeto,
 
−
el objeto sí que puede ser alterado.
 
 
}}
 
}}
  
−
}}
+
</div>
 +
 
 +
<!--
 
===Lo básico===
 
===Lo básico===
 
*Entendemos dos partes: '''''La vista (html)''''', y '''''el controlador (Javascript, una instancia de un objeto Vue)'''''.
 
*Entendemos dos partes: '''''La vista (html)''''', y '''''el controlador (Javascript, una instancia de un objeto Vue)'''''.
Línea 64: Línea 259:
 
<br />
 
<br />
 
{{Plegable|hide|Acceder a valores de la vista en el controlador|
 
{{Plegable|hide|Acceder a valores de la vista en el controlador|
−
;Que genera la siguiente salida
 
 
[[archivo:salida_variables1.png|400px]]
 
[[archivo:salida_variables1.png|400px]]
 
}}
 
}}
Línea 71: Línea 265:
 
   
 
   
 
;Incluir métodos en la instancia de vue
 
;Incluir métodos en la instancia de vue
 +
-->
  
−
===Vue con Laravel===
+
<!--
−
;Para instalarlo, una vez creado el proyecto de laravel, instalamos la última versión de vue (mayo-2021, Vue 3)
+
;Cargar la librería en el fichero html y declarando variables reactivas
−
<source lang=bash>
+
{{MRM_Actividad|Title=Hola Mundo|
−
npm install vue@next
+
;app.js
−
</source>
+
−
*A continuación modificamos el fichero '''''webpack.mix.js''''' haciendo que '''''mix''''' cargue '''''vue'''''
+
−
<source lang=bash>
+
−
mix.js('resources/js/app.js', 'public/js').vue()
+
−
</source>
+
−
*Puede ser que queramos instalar la última versión de Laravel Mix
+
−
<source lang=bash>
+
−
npm install laravel-mix@next
+
−
</source>
+
−
 
+
−
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>
 
<source lang=javascript>
−
import {createApp} from "vue";
+
//Importamos la clase createApp
−
 
+
import {createApp} from 'vue'
−
.createApp({
+
//Declaro una clase que será una instancia de Vue
−
 
+
createApp({
−
   }).mount("#app");
+
    data(){//Aquí declaramos las variables que quiero hacer reactivas en la vista
−
 
+
        return{
 +
            mensaje :"Hola persona con mensaje 1",
 +
            mensaje1 :"Otro Hola persona con mensaje 2",
 +
        }
 +
    }
 +
    
 +
}).mount("#app");//Monto el objeto como una app de vue con el id app
 
</source>
 
</source>
−
 
+
;html
−
*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
+
−
 
+
−
 
+
 
<source lang=html5>
 
<source lang=html5>
−
<!--.....-->
+
<script src="https://unpkg.com/vue@next"></script>
−
<body>
+
-->
−
  <div id="app">
+
<!--En el id tengo que especificar el componente vue que he cargado-->
−
 
+
<!--
−
  <!--.....-->
+
<div id=app1>
−
 
+
-->
−
    <script src = {{asset('js/app.js')}}>
+
  <!-- Aquí puedo referenciar las variables creadas en la funcińo data del objeto que instancia Vue -->
−
       
+
<!--
−
    </script>
+
{{mensaje}}
−
  </div>
+
{{mensaje1}}
−
</body>
+
</div>
−
</html>
+
<script src='app.js'></script>
 +
-->
 +
<!-- cargo el script debo hacerlo aquí,
 +
-->
 +
<!--
 +
ya que el id y las variables han de estar disponibles en el DOM-->
 +
<!--
 
</source>
 
</source>
−
====Probando la instalación====
+
}}
−
*Vamos a declarar una variable en nuestra instancia de vue y la vamos a visualizar en la página
+
<br />
−
*Agregamos
+
;Notas
−
<source lang=javascript>
+
{{Nota|
−
import {createApp} from "vue";
+
*El objeto se declara constante <source lang=php>const app</source>: '''''No se puede reasignar, pero si modificar su contenido.'''''
−
 
+
{{MRM_Puntos clave|
−
.createApp({
+
;https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/const
−
 
+
La declaración de una constante crea una referencia de sólo lectura. No significa que el
−
  }).mount("#app");
+
valor que tiene sea inmutable, sino que el identificador de variable no puede ser
 +
reasignado, por lo tanto, en el caso de que la asignación a la constante sea un objeto,
 +
el objeto sí que puede ser alterado.
 +
}}
  
 +
}}
 +
-->
 +
===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:
 +
<source lang=php>
 +
@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
 
</source>
 
</source>
 +
*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

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

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

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.

Vuejs.png

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:
  1. Comportamiento (Código js)
  2. Datos o información (código html)
  3. 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


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
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/Vue&oldid=30467»