Incluir JavaScript nativo en Vue

Como te he comentado en varias oportunidades aquí la aplicación de Academia:

https://academy.desarrollolibre.net/

Que es donde yo tengo mis cursos y libros está hecha completamente en Vue con laravel obviamente el esquema tradicional en la cual tenemos una rapi y tenemos la aplicación en View que consume la misma es así de simple y toda la pantalla es Vue netamente así que te quiero mostrar algo curioso este es el visor de los libros que ya implemente por acá en cierta forma al menos un mínimo aceptable luego lo puedo mejorar pero lo que hace aquí fíjate que tenemos los subtítulos los h2 sería en este caso este sería el h1 que es el que tenemos bueno no lo coloqué por acá y este sería el los h2 que tenemos para este capítulo en pocas palabras esto es un capítulo del libro y aquí tenemos los como quien dice sub capítulos o no sé como lo quieras llamar las divisiones internas al capítulo y el chiste de esto es que le podemos dar un click y nos lleva hacia la misma entonces aquí es donde yo te preguntaría cómo tu harías esto si estás implementando la aplicación en y me gustaría que lo dejaras ahí comentado en caso de que se te ocurra algo interesante o simplemente deí la idea que tienes y ya ahí la discutimos cualquier cosa entonces es básicamente esto aquí es donde yo quiero dar una pequeña pausa antes de mostrarte aquí la solución y darte mi opinión.

Vue para manipulación de la página

Vue es excelente para lo que es la manipulación de la página y con esto crear una web de tipo SPA es decir mediante los eventos del usuario que le da un click aquí se muestra una cajita la cuestión animada navega hacia otro lado todo lo demás es excelente para eso para para la manipulación del DOM se pudiera decir agregar y remover elementos en pantalla yo creo que eso sería un buen resumen de este tipo de tecnologías como Vue pero lo mismo puedes esperar de angular y lo que es React pero qué pasa con precisamente como que es la presentación de estos datos ahí la cosa cambia un poco porque precisamente para hacer esta navegación no digo que no se puede hacer en View Seguramente se puede Yo no lo encontré y también me dio mucho fastidio de buscar un plugin o una cuestión ahí
para que lo analice por mí ya que es una tontería en llves creen nativo yo preferí hacerlo mediante llv nativo que ahí es donde tenemos como quien dice esa pequeña vulnerabilidad o esa pequeña debilidad en estas tecnologías como Vue ya que hacer este tipo de operaciones puede que no sea tan sencillo empleando directamente en Vue JavaScript nativo sería muy sencillo y cómo lo hice.

Implementación

Fíjate lo que implement por acá esta es la que se encarga de hacer la operación simplemente hago un query selector es decir yo me estoy moviendo hacia un h2 ya que otro punto muy importante es que este contenido que yo estoy colocando por acá no lo estoy colocando letra a letra con Vue esto simplemente es un html que tengo en la base de datos y lo vuelco en una página mediante un DIV html es lo que yo tengo por acá:

getHxs() {
  this.hxs = []
  setTimeout(() => {
    this.hxs = document.querySelectorAll(".post h2")
  }, 500)

}

Por lo tanto Vue no tiene ninguna referencia directa sobre ese contenido a ver dónde lo veo control F para ver creo que está arriba control F html Aquí está Esto es lo que estoy haciendo es una html en la base de datos y simplemente lo vuelco en un di en un
section lo que sea en el cuerpo de la página por lo tanto otra vez Vue no tiene una referencia directa al menos de lo que tenemos en ese contenido que es lo que yo quiero trabajar en este punto Entonces eso viene siendo un poco como quien dice la dificultad que tuviéramos si trabajamos aquí directamente con Vue para hacer este tipo de funcionalidades entonces en este punto es donde volvemos un poco a JS nativo y es un poco lo que te quería mostrar que podemos ampliar Vue con javascript nativo sin ningún problema ya que que a la final son h2 ya tenemos la referencia del elemento que queremos agarrar por lo tanto podemos crear fácilmente un query o un Bueno un query selector de la siguiente forma que tenemos por acá simplemente la página que como elemento principal tengo el post que que es todo esto todo esto es mi post toda la página obtengo todos los h2 ya con eso tengo otra vez todos los h2 y es lo que estoy mostrando por aquí en pantalla eso otro puntazo como no tengo la referencia directa al todo el contenido que tengo por acá tampoco tuviera forma de hacer esto entonces eso es lo que estoy haciendo aquí en en Vue sin aparte de la navegación aquí estamos obteniendo todos los h2 y lo estoy guardando aquí en esta variable llamada hxs:

this.hxs = document.querySelectorAll(".post h2")

Que es la que yo utilizo más arriba con Vue para iterar la misma y colocar aquí como título el título del h2:

<p v-for="h in hxs" :key="h" class="cursor-pointer m-0 hover:text-white"
  @click="h.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">
  {{ h.innerText }}
</p>

Me pare eso empleamos aquí innertext fíjate que esto es javascript puro y duro pero estamos empleando Vue para iterar un array que fue construido mediante javascript puro y duro es decir mediante el selector que te mostraba antes

scrollIntoView para mover el scroll a una ubicación

Y para la parte del scroll ya aquí también lo tengo definido Simplemente estoy empleando una función bueno método no sé cómo se llama una función de de javascript llamada scroll into viw que lo que hace es moverse de una posición a otra en este caso la otra posición sería la definida por este elemento H es decir el H es esto que tenemos acá pero en este caso a nivel de la página ya que estos son solamente referencias es decir esta es la referencia Fíjate que esto es no es el título solamente es el selector que yo estoy guardando
ahí y por lo tanto podemos indicarle mediante la función mencionada que navegue hacia esa posición y el resto de los parámetros te lo dejo ahí para que lo investigues tú ya que no es el propósito de este video mostrarte cómo funciona esa función llamada scroll into viw pero lo que hace es que lo haga de manera animada y que lo coloque la navegación al inicio no al final por ejemplo si aquí lo coloco al final bueno está la esto está en en vivo en producción Entonces no no vas a ver los cambios pero eso es lo que hace y esto
era el pequeño experimento que te quería mostrar en caso de que tengas también un problema similar que lo puedes resolver fácilmente con llaves cis nativo y estás empleando tecnologías como las mencionadas Vue angular or read que sepas que también puedes incorporar esas pequeñas cápsulas por llamarlo de alguna manera tal cual estás viendo mediante jav nativo para implementar estas funcionalidades así que sin más que decir nos vemos en otro video.

14-12-2024 - Andrés Cruz

In english

• Categoría
• /
• JavaScript
• /
• Incluir JavaScript nativo en Vue