Ejemplos de uso del pattern

El uso del pattern ofrece un control primario de los campos input de un formulario, y puede ser complementado con el uso de seudo elementos css y funciones js.

Cadena obligatoria variada.

Puede contener letras mayúsculas, minúsculas, números y los caracteres !?-   ,  y un  tamaño  entre 8 y 12 caracteres.

pattern="[A-Za-z0-9!?-]{8,12}" required

cadena obligatoria  de letras minúsculas, con un número opcionalmente de hasta dos dígitos al final. La cadena completa tendrá entre 5 y 12 caracteres

pattern="^([a-z]+[0-9]{0,2}){5,12}$" required

 Cadena compleja para email

pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required/

Cadena  para admitir  nombres de cualquier nacionalidad:

Incluye nombres compuestos y la mayoría de normas de acentuación. El número de caracteres será como mínimo 3 y como máximo 32. 

[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,32}

El usuario solo podrá meter una palabra de 4 a 16 caracteres entre la con las letras de A-Z y a-z

pattern=»[A-Za-z]{4-16}

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

…subir montañas hermana hombres…

Trabajar en remoto con Git

Trabajar en remoto con Git,  es como todo el que se mueve en el mundo de la programación sabe, una necesidad imperativa.

Este gestor de versiones, posee entre una de sus características más potentes, que permite la participación de diferentes integrantes de un equipo en el desarrollo, a través del uso de branchs(ramas),  lo cual enriquece enormemente las potencialidades de la colaboración.

Este es aún más interesante y útil si trabajamos con  repositorios,   hospedados en la red de internet u otra cualquiera de acceso remoto. 

Los comandos que muestro hoy son para eso, o sea los que utiliza Git para conectar y trabajar con repositorios remotos.

Ya que podemos tener tantos repositorios remotos como deseemos,  podremos tener tantas versiones de nuestro código como consideremos necesario, para lo cual vamos a precisar de un flujo de información flúido, sobre todo si vamos a interactuar con varios compañeros.

Aquí algunos de los  comandos:

git remote 

Muestra los nombres de los remotos que posees vinculados, o qué tienes especificado en git.

$ git remote -v

Devuelve  las URLs que Git ha asociado al repositorio remoto. Son las que usará para interactuar con él.  

git clone

Clona un repositorio en la dirección que le des: la sintáxis es:

git clone https://github.com/tu repositorio destino

Si luego de clonar, llamas al comando  remote, debe mostrar como mínimo el repositorio del que ha clonado, y lo hará nombrará origin

git remote add [nombre] [url]:

Añade un repositorio remoto

  git fetch [remote-name] 

Devuelve los datos de tus proyectos remotos.

Este comando, trae al nuestro, los datos de los proyectos alojados en los repositorios remotos, por lo que a partir de ese momento dispondremos de  referencias a todas las ramas de ese remoto, con la posibilidad de poder inspeccionarlas o combinarlas

git fetch origin

En este caso por ejemplo, nos trae todo el trabajo nuevo que ha sido enviado a ese servidor desde que lo clonamos, o desde la última vez que trajimos datos de el.

Es importante destacar que el comando git fetch solo trae datos a nuestro, repositorio local, pero no lo combina automáticamente con el proyecto que estamos desarrollando, ni tampoco actualiza lo que tengamos ya creado.

La combinación debe hacerse de mod manual.

aj https://github.com/Antonio_J/test (fetch)
aj https://github.com/antonio_J/test (push)

Con este comando asignamos el alias aj a este repositorio, y ya podemos usar ese nombre para  enviar o traer datos en función de los permisos que tengamos.

Entonces para traer la información que tiene Antonio, podríamos hacer esto sencillamente:

$ git fetch aj

 Esto nos dara al final algo como esto

* [new branch]      master     -> aj/master
* [newbranch]      test    -> aj/test

Ahora podemos acceder localmente a la rama maestra de Antonio,   con el nombre aj/master, de igual modo, esta queda disponible para que podamos combinarla con alguna rama nuestra o    inspeccionarla.

git push [nombre-remoto] [nombre-rama

Envía  un proyecto a un servidor. Si  por ejemplo lo que quieres  es enviar tu rama master a tu servidor origin, debes ejecutar:

$ git push origin master

Este comando funciona solo en servidores clonados sobre los que tenemos permisos de escritura.

Una cuestión importante, es que funciona solo si nadie con los mismos  permisos  ha enviado datos entretanto.

Si un compañero clona el mismo repositorio y envía información antes que nosotros, no podremos enviar porque será rechazado.

La solucion más fácil  a esto, es hacer un fetch al compañero para bajar su código, combinarlo con el que tenemos y entonces hacer el push al servidor.  

git remote show [nombre-remoto]

Nos devuelve información sobre un servidor remoto especifico.

git remote show:

Nos da información sobre todos los servidores remotos y sus proyectos

Entre la información que nos brinda, nos dirá a cuál rama estamos enviando la información cuando ejecutamos  git push, también nos dice cualés ramas remotas aún no tenemos,  las  que serán combinadas si ejecutamos ejecutes git pull, y las que  han sido eliminadas del servidor.

git remote rename.

Modifica  el nombre de la referencia de un remoto, con la sintaxis :

git remote rename aj antonio

Hemos renombrado el remoto aj como antonio

git remote rm aj

Elimina un remoto

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

…., si avanzo sígueme, si me detengo empújame, si retrocedo mátame…….

Ordenar por tipo de relaciones

laravel

Un modo de organizar los resultados es ordenar por relaciones, esto nos permite tomar por ejemplo el ultimo registro añadido.

Digamos que tenemos un modelo Pedido, relacionado con el modelo Cliente y queremos que nos muestre en la vista los pedidos colocando encima el último.   

Lo primero seria describir la relación entre ambos dentro de la clase Cola

public function lastestPedido()
{
    return $this->hasOne(\App\Pedido::class)->latest();
}

En el controlador  creamos una variable que en su interior tomará los  pedidos según clientes ordenados de forma descendente, según fecha de creación.

$clientes= Cola::with('latestPedido')->get()->sortByDesc('latestPedido.created_at');

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

Subir montañas hermana hombres……

Propiedad Background

La propiedad Background CSS Una propiedad usada a menudo en css. Una de las más comunes es  background-image, que se encarga de mostrar la imagen de fondo de un elemento.

background asimila solo un valor y es uno de estos tres, URL, none o inherit, su valor inicial es none, y no se hereda

 La imagen que muestra se coloca en el area  que ocupan el contenido  del elemento  hasta copar todo, hasta el borde.

En el caso de que se importe una imagen se usa el patrón URL, que asimila lo mismo  URIs que URLs, ya sean  externas , internas,   relativas o absolutas, según el caso.

Para recoger la URL que conduce a la imagen el formato es  url(direccion), además permite que la dirección como tal se encierre entre comillas, ya sean estas dobles o sencillas

Veamos un ejemplo:

  
 div {
   background-image: url(http://www.mipaginadeimagenes.net/banco/css/imagenes/logo.png);
 }
  
 h2, h3, h4, h5 {
   background-image: url("imagenes/retrato.png");
 }
  
 h2, h3, h4, h5{
   background-image: url('../imagenes/arte.gif');
 } 

Distribucion:

Cuando la imagen de fondo es más grande que el area donde queremos mostrarla, se vera solo la parte que va desde  esquina superior izquierda  a su opuesto y lo hara justo en la esquina superior izquierda del espacio que ocupa el elemento que recibe la imagen:

Si sucede al revés y la imagen es más pequeña que el espacio reservado para ella, el navegador la repetirá,  en todas las direcciones hasta cubrir completamente el espacio del elemento.

Para ayudar a resolver estos dentro de background existen diferentes opciones como   background-repeat,  que permitirá que la imagen se repita o no, background-attachment, permite que se mantenga fija en un su posición o se desplace cuando se mueve el cursor y   background-position, que brinda la posibilidad de modificar la posición por defecto e la imagen

La propiedad Background puede usarse simultáneamente en un area, por ejemplo un div junto a un color de fondo, por  eso es común ver background-image y background-color en un mismo espacio o elemento. En estos casos la imagen tiene prioridad, y el color de fondo solo será visible en aquellas areas de la imagen que sean transparentes por ejemplo al usar imágenes en formato png o en aquellas zonas que no estén cubiertas por la imagen

Usar ambas es una buena práctica, porque permite tener desde el primer momento algo que cubra el elemento. Considerando que puede haber demora en cargar la URL, o un fallo, que exista un color de fondo con una apariencia parecida a la imagen (si fuera posible),  mejorar la experiencia.

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

…., si avanzo sígueme, si me detengo empújame, si retrocedo mátame…….

Relaciones con condicionales y ordenadas

laravel

Hablemos de las relaciones con condicionales y ordenadas, no es la forma común en que definimos una relación en Laravel. Lo típico es algo así:

public function camiones() {
    return $this->hasMany('App\Camione');    
}

Sin embargo, esto podemos enriquecerlo si deseamos obtener esa relación ordenada según algún criterio.

Más de Laravel

En el código siguiente lo ordeno por capacidad de carga.

public function contratoCamiones() {
    return $this->hasMany('App\Camiones')->where('contrato', 1)->orderBy('capacidad');
}

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

Subir montañas hermana hombres……

Diferencias entre apply, map y applymap

logo python

Les invito a conocer en este post, las diferencias entre apply, map y applymap, y en consecuencia cuando aplicar cada una.

El uso de estas funciones, para multiples labores en Python, nos permiten obtener resultados de un modo que nos arreglan bastante la vida.

Muchas de estas veces nos apoyamos para ello en funciones lambda, por su simplicidad, veamos un poco, de que hablo.

Funciones lambda

Otro modo de aplicar redondeo es utilizar una función  lambda en un array de una dimensión, o sea para una columna o fila.

Las funciones lambdas, son una poderosa herramienta de Python, que nos permite escribir un tipo de función, que se ejecuta en un línea.

Hablo un poco sobre la funciones lambda en este articulo que escribi hace un tiempo.

Apoyándonos en ellas,  podemos redondear, utilizando diferentes funciones que trabajan a partir de elementos.

Recordemos que en Python todo son objetos, las funciones map  y applymap, se  basan ambas en este concepto.

La diferencia entre ellos es que applymap es un función basada en elementos que trabaja en el dataframe, mientras map lo hace en las series, o sea una columna o una fila.

En el ejemplo verán la aplicación de map() en una columna y applymap() en todo el dataframe, en ambos casos se combina su uso con la función format, y  una función lambda para determinar los términos del redondeo.

Existe una buena explicación de la diferencia entre estas funciones en este link


Map

Applymap

Como hemos ya modificado una columna volvemos a importar nuestro dataset y aplicamos applymap()

Diferencias entre Map, applymap, y apply

map() es una función basada en elementos que solo se aplica a series, acepta dict, series o callables.

Está diseñada para mapear valores de un dominio a otro, por lo que está optimizada para el rendimiento.

Su construcción, como vimos antes es del tipo :

df['A'].map({1:'a', 2:'b', 3:'c'}))

applymap(), es una función también basada en elementos, que  solo se aplica a Dataframes, y únicamente acepta callables.

applymap() es perfecto, para transformar de elementos en varias filas / columnas, sin que sea necesario utilizar apply()

df[['A', 'B', 'C']].applymap(str.strip))

apply(), se basa también, en elementos, pero puede tener otras complejidades y su compartamiento y resultado, depende de la función.

Se aplica, tanto a series como dataframes , y solo acepta callables

Es importante saber que se usa cuando en cualquier función que no puede ser vectorizada

Otros elementos a tener en cuenta son:

map() cuando se le pasa un diccionario o serie mapeará elementos basados ​​en sus claves Los valores faltantes se registrarán como NaN en la salida.

applymap() puede funcionar un poco más rápido que apply en algunos casos.  

map() está optimizado para mapeos y transformaciones por elementos. Las operaciones que involucran diccionarios o series permitirán a  Pandas usar rutas de código más rápidas para un mejor rendimiento.

apply() devuelve un escalar para agregar operaciones, también tiene rutas rápidas cuando se llama con ciertas funciones NumPy como mean, sum, etc.

… también en el infierno llueve sobre mojado, lo se porque he pasado, más de una noche allí…

J.Sabina

Expresiones regulares. RegEx

Aprender sobre manejar expresiones regulares fue de las primeras cosas a las que tuve que enfrentarme, casi desde cero.

Les dejo una explicación de la esencia de este tema, que espero que a más de uno le sirva de ayuda.

Una expresión regular (RegEx) es una secuencia de caracteres que define un patrón de búsqueda.

En su modo mas simple digamos que una expresión regular del tipo :

^t…o$

Corresponde a cualquier palabra de cinco letras que comience con t y termine en o, como «tanto», «tonto», «tengo», «trillo», o «talio» por ejemplo, entre muchas otras .

En cambio, palabras como «tampoco», «tantísimo», o «tranco», por ejemplo no cumplirían los requisitos para coincidir , con esa búsqueda.

Las expresiones regulares, conocidas como RegEx, es una herramienta medianamente compleja, que nos permite identificar caracteres específicos de texto dentro de cadenas, para operar con ellos.

Conocer todas las expresiones regulares, es algo que lleva tiempo y practica, pero intentaré explicarlo sucintamente.

Metacaracteres

La lista de abajo muestra los metacaractéres, estos tienen un significado especial dentro de las RegEx

[] . ^ $ * + ? {} () \ |

Veamos cada uno

Los corchetes []

Los caracteres individuales que queremos encontrar se encierran entre [] .
por ejemplo [abc], devolverá coincidencias, con cualquier cadena que contenga esas tres letras como “a”, “a veces”,“obcecado”

A esta búsqueda se puede añadir otros elementos para hacerla mas especifica por ejemplo :

[a-d] es lo mismo que  [abcd].

[1-4] es lo mismo [1234].

[0-39] es lo mismo [01239]

Aunque en los dos primeros casos muestra intervalo, en el último indica intervalo igualmente, pero no así para el ultimo dígito que se indica específicamente.

 Contrario a esto, el símbolo ^ , cuando se inserta entre los corchetes al inicio de la expresión, indica excepción por ejemplo [^abc], nos dice que cualquier carácter excepto 'a' o 'b‘ o 'c

Por tanto  si escribimos por ejemplo [^a-z], estamos hablando de cualquier carácter  que no se encuentre en el rango de la ‘a’ a la ‘z’ .

[^0-9] indica cualquier carácter menos los dígitos, …

y [^123], cualquier carácter excepto 1 ó 2 ó 3.

El punto .  

El punto equivale a cualquier carácter individual, menos un salto de línea '\n'.

Por ejemplo la expresión, encontrará coincidencias con cualquier cadena que contenga como mínimo tres caracteres. Una cadena de tres caracteres devolverá un coincidencia, al igual que una de 5, pero una de seis encontrará dos y una de 9, tres

Intercalado o caret (inglés) ^

Cuando se coloca solo, se utiliza para conocer si una cadena comienza con determinado carácter.

Por ejemplo ^b, hallara coincidencias en ‘brillo’ y ‘bandera’, pero no en ‘abanderado’  

Símbolo  dollar $

Se emplea para saber si una cadena termina en un determinado carácter.

$r, buscara coincidencias para cadenas que terminen en ‘r’

Símbolo asterisco *, símbolo suma + y símbolo de interrogación ?

Estos tres signos buscan coincidencias en cadenas, siguiendo una lógica de unión entre los caracteres.

La diferencia de su comportamiento esta en que * busca 0 o mas coincidencias, mientras + busca una o más y   '?' busca 0 o una

Si tomamos como  expresión búsqueda , «te*n»,  esta nos dice que buscamos cualquier cadena donde no este completa, o este esta condición  que exista una»t» ,  y una «n», y si existe una «e», este obligatoriamente seguida de la «n”.

Hallaremos  coincidencias en «tn», «ten», «teen», y «manten», pero no en «tean», porque la «e» no va seguida inmediatamente de la «n»,

La expresión te+n, sigue la misma lógica pero espera encontrar una o más coincidencias, por tanto tn, no devolverá coincidencias, porque no hay una «e», ni tampoco «tean», porque la «e» no va seguida de la «n».

Si utilizamos con esta mismo texto de búsqueda, pero sustituyendo la RegEx por un signo de interrogación te?n, este busca 0 o una coincidencia, en tn hallará una, al igual que en «ten» y «manten».

No sucederá lo mismo  en «teen» o «tean», primero porque en «teen» no existe más de un carácter e y en «tean», la e no va seguida de la n.

Llaves {}

Las llaves {}, se emplean para indicar un rango, de ocurrencia, donde el primer elemento es el mínimos esperado y el segundo, el máximo.

O se n{x,y}, espera que exista como mínimo una ocurrencia x y cómo máximo una y del patrón n.

Si tomamos como patrón de búsqueda a {1,9}, estamos esperando hallar como mínimo una a y como máximo 9.

Un ejemplo común, es que un patrón como [0-9]{3, 6}, buscara al menos tres dígitos seguidos y como máximo 6.

Por tanto hallara coincidencias en las siguientes cadenas 1234, 234567, 333; sin embargo no hallará en 22, 3456878,  o 1

Barra vertical |

Esta es más conocida de otros lenguajes de progrmacion y se usa para alternar entre valores.

De este modo a|b, busca a o b y en una cadena como «babilonia», hallará cuatro coincidencias

Parentesis ()

Se emplean para agrupar varios patrones.

Un agrupamiento de (a|e|i)r, buscará coincidencias de cualquier subcadena , a, e i que vayan seguidas inmediatamente del carácter r.

De este modo hallara ocurrencias en ‘balar’, ‘correr’, ‘reir’, ‘harto’, verde, ‘irina’, ‘subir’ o ‘bajar’, pero no en ‘a’, ‘ r’, ‘eleonor’, u ‘orina’.

Backslah \

Se emplea como señal de escape de varios caracteres y esto incluye también a los meta caracteres.
Por ejemplo si lo usamos antes de un metacaracter alterará o anulará su significado.

Si escribimos \$n,  se encontraran coincidencias, en aquellos casos  donde después del símbolo de dólar aparezca una ‘n‘,  y dejará de verlo como una expresión regular que indica final de la cadena.

Backslah también se utiliza para indicar otras cuestiones, usándolo con otros caracteres. Veamos

\A encuentra coincidencias con caracteres específicos que se encuentran al comienzo de una cadena.\Aes, hallará ocurrencias en cadenas que comiencen con es.

\b encuentra coincidencias con caracteres específicos al comienzo o terminación de una palabra. \bfía, coincidirá con «ecografía» y «con fiabilidad», y no con «confiabilidad»

\B encuentra coincidencias donde no se cumple la condición o sea, que no aparezcan al inicio o comienzo de la palabra los caracteres dados. Es la oposición al \b anterior asi que ahora si coincidirá con confiabilidad

\d halla coincidencias con cualquier dígito decimal. Esta expresión es lo mismo que escribir [0-9].

\D, se opone al anterior y por tanto buscará concurrencias de cualquier elemento que no sea un dígito

\s coincide con cualquier cadena, que posea un espacio en blanco.

\S coincide con cualquier cadena, donde no exista un espacio en blanco.

\w hallará coincidencias con cualquier cadena, donde existan caractéres alfanuméricos (o sea números y letras, incluidos _). Sería lo mismo que escribir [a-zA-Z0-9_].

\W busca cualquier carácter que no sea alfanumérico. Tendriamos el mismo resultado que si escribimos [^a-zA-Z0-9_]

\Z, coincidirá con caracteres específicos al final de una cadena. \Zión hallará una ocurrencia en ‘sanción’.

De forma bastante resumida,  estas son las expresiones regulares. Existen múltiples herramientas en internet, para agilizar el trabajo con ellas de forma online, y que pueden ayudarte a construirlas de manera efectiva.

«En total oscuridad cualquier cosa, puede ser luz»

Otros comandos de git

Este articulo da continuación a otro que publique, e intentaré hablar de otros comandos de Git.

Continuaremos pues con otros comandos también muy importantes en Git

git log

Permite ver los operaciones que hemos realizado:

git log --oneline

Como resultado nos traerá los commit realizados:

El primer conjunto de letras y números que veremos, a la izquierda es el id del commit, que nos servirá para identificar el commit y si es necesario volcer a un estado anterior a el. Entre paréntesis nos mostrará la rama a la que pertenece el commit y a continuación el mensaje que le agregamos

git commit –amend

Nos permite rectitficar un commit, ya sea que nos hemos equivocado en un detalle importante, en el mensaje, u otra cosa; con este comando rectificaremos, mediante el uso del parametro --amend

git commit --amend -m "Estoy corrigiendo cosas entre ellas mensaje"

git checkout id_commit

Es el comando  que usa git para volver a un commit anterior, o estado anterior a ese commit:

Este potente comando, es el que necesitamos todos, cuando algo falla sin que podamos saber que es, y necesitamos volver a ese momento en que todo funcionaba.

Al regresar se revertirán todos los cambios; si hemos eliminado archivos del  proyecto en el que trabajamos estos se recuperaran o viceversa si se han añadido, desaparecerán al retornar a una posición anterior en el tiempo. 

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

….un sueño es casi todo  y más que  nada, más que todo al soñarlo, casi nada después……

Uso de issubclass()

logo python

En Python, issubclass(), es utilizado para conocer la herencia y relación que existe entre dos o más clases.

En el ejemplo creamos una clase llamada Planeta y una subclase que lleva el nombre de Continente.

Lo que haremos luego,  es verificar la relación que existe entre ellas

«…he olvidado ya el lugar de donde vengo y puede que no exista el sitio adonde voy…..»

J.Sabina

Entendiendo Vue(componentes)

Intentemos comprender Vue(componentes). La estructura de un componente se compone en esencia de tres partes

Template

Es la plantilla del componente que posee formato html y donde inyectaremos las variables por una de las  vías que Vue nos ofrece.

Clase

La clase es la zona javascript del componente, en ella creamos la variables y las propiedades que insertaremos en la zona html del componente

Estilos

Son los estilos css del componente, necesarios o no en dependencia de la estructura que demos al proyecto, ya que estos estilos también podrían ser asumidos por un archivo css externo.

El  funcionamiento de un componente no es demasiado complejo, y relativamente fácil de comprender.

Tomemos el  ejemplo que nos ofrece Vue por defecto: el componente HelloWorld.vue  allí veremos definidas las tres partes con sus etiquetas de apertura   y cierre, para template, script y style.

Si eliminemos ahora todo lo que está dentro de template,  y solo dejemos la clase hello, para luego revisar en el navegador, veremos que ahora no hay nada ahí.

Vayamos a la clase encerrada dentro de script, ahí veremos que nombre de esa clase coincide con el nombre el componente, y que posee una propiedad, llamada msg, del tipo string, la misma que aparece en  el template, entonces modifiquemosla, añadiendo una  funcion data que nos devuelve una variable llamada bienvenida,  con un texto adentro;

<script>
export default { 
name: 'HelloWorld',
   props: {
      msg: String
   },
  data()
     {
       return     {
         bienvenida:"Estoy aqui"
       }
     }
 }
 </script> 

Luego vamos a incluir esa nueva variable, dentro del template, siguiendo la estructura de las dos llaves que vimos antes.

<h3>{{ bienvenida }}</h3>

Revisemos ahora el navegador y veremos  que nuestra nueva variable aparece allí con su mensaje.

Un elemento a tener en cuenta es, que un componente, se asigna siguiendo la estructura de nodos del  DOM, y  solo puede imprimirse  en un nodo, por tanto no podríamos imprimir dos msg aunque los declaráramos en el script, a no ser que lo incluyéramos dentro de un div, o lo que es lo mismo no podemos escribirlo en  dos etiquetas html

Construyendo un componente

Un componente es un archivo con extensión vue

Lo crearemos dentro de la carpeta components, lo llamaremos ComponenteNuevo.vue, y le daremos luego esta estructura:

<template>
        <div id=”comp-nuevo”>
             <h1> Nuevo componente de calculo </h1>
             <h3> {{ subtitulo }} </h3>
       </div>
  </template>

 <script>
 export default{
       name: "ComponenteNuevo",
       data(){
             return{
                   subtitulo: "Extraer duplicados"
             }
       }
 }
 </script> 

Como puede verse, no definimos los estilos, solo el template y el código js:

Creamos un div con dos etiquetas dentro, donde el segundo de ellos contendrá el valor de la variable subtitulo creada dentro del script.

Dentro de la etiqueta script, además le asignamos  el nombre, que en nuestro caso será el mismo que el componente.

Y ya hecho esto, nos quedará solo inscribir el componente recién creado dentro del archivo App.vue, dándole la url con la ruta.

Y luego insertándolo dentro del listado de componentes con que trabajamos.

Nuestro código queda así:

<script>
 import HelloWorld from './components/HelloWorld.vue'
 import ComponenteNuevo from './components/ComponenteNuevo.vue'
  
 export default {
   name: 'App',
   components: {
     HelloWorld
     ComponenteNuevo
   }
 }
 </script>

Hecho esto, para que se vea en la página, solo falta añadirlo dentro del div app en la zona del template :

<template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
     <HelloWorld msg="Welcome to Your Vue.js App"/>
     <ComponenteNuevo> </ComponenteNuevo>
   </div>
 </template> 

</template>

Ahora ya el componente, que en este caso es solo texto será visible.

La condición para reutilizar este componente en otro lugar o dentro de otro componente, es traerlo mediante el import.

Supongamos que quisiéramos mosrarlo dentro del componente que trae Vue, por defecto: HelloWorld, podemos hacer esto:

 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
     <h3>{{ bienvenida }}</h3>
 //insertamos el componente con un estilo css
     <div style="background-color:#000;color:#fff">
 <ComponenteNuevo></ComponenteNuevo>
 </div>
   </div>
 </template>
  
 <script>
 //Importamos el componente para que pueda ser usado 
 import ComponenteNuevo from './ComponenteNuevo.vue'
 export default {
   name: 'HelloWorld',
 //utilizamos la misma propiedad components que usa app.vue
     components: {
        ComponenteNuevo
   },
   props: {
      msg: String
   },
  data()
     {
       return     {
         bienvenida:"Estoy aqui"
       }
     }
 }
 </script> 

Finalmente entonces, sabemos que:

  • Un componente consta de tres partes: template(html), script(js) y estilos(css)
  • Que un componente es un trozo de código con funcionalidades, y  que se alojará,  en el DOM o la pantalla, en un nodo.
  • Tiene un nombre, terminado con la extensión vue, y que este nombre será utilizado tanto para importarlo como para declararlo dentro del archivo central app.vue, y en aquel que se vaya  a utilizar.
  • Es reutilizable, y eso quiere decir que donde queramos usarlo debemos importarlo.

Espero que este pequeño articulo, le sirva de ayuda a alguien.

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

…. hay que levantarse cada mañana con una esperanza y dormirse cada noche con una meta….

Translate »