Header Ads Widget

Ticker

6/recent/ticker-posts

Componentes de un solo archivo en VueJS

 

Ahora que tenemos nuestro entorno de compilación vue cli configurado y funcionando bien, ¡intentemos construir algunos componentes! Pasaremos por el proceso de configuración de App.vue como el archivo principal que simplemente hará uso de componentes para mostrar cosas. Podemos comenzar simplemente renderizando un poco de html desde el archivo principal App.vue, luego exportaremos ese marcado a su propio componente. A partir de ahí, veremos cómo hacer uso de ese componente. Una vez que tengamos funcionando el componente más básico, agregaremos algo de comportamiento a ese componente. Por último, veremos cómo renderizar más de uno de los componentes de un solo archivo para demostrar su reutilización y el hecho de que cada instancia del componente tiene sus propios datos que pueden actualizarse independientemente de cualquier otro componente renderizado.


El archivo index.html

El archivo index.html que carga la aplicación completa utilizará este marcado a continuación. Es muy simple, solo importamos Bootstrap para que las cosas se vean bonitas, configuramos un div con el ID #app y cargamos el archivo build.js que se crea al ejecutar un npm run buildcomando.


El archivo main.js


Renderizar HTML a partir de la plantilla

Podemos comenzar agregando un marcado html muy simple al archivo App.vue para demostrar cómo Vue procesará el marcado. En este punto, no tendremos datos o comportamiento dinámicos, solo html estático.
App.vue

Ahora podemos visitar el símbolo del sistema y ejecutar npm run devpara compilar la fuente.

C: localdevvue-cli> npm ejecutar dev

> vue-cli@1.0.0 dev C: localdevvue-cli
> cross-env NODE_ENV = desarrollo webpack-dev-server --open --hot

El proyecto se está ejecutando en http: // localhost: 8080 /
la salida del paquete web se sirve desde / dist /
Los 404 recurrirán a /index.html
Hash: 48898b00668fb0a0bc94
Versión: webpack 3.11.0

¡Voila! Tenemos algunos html renderizados a través de Vue en nuestro navegador.
html representado por vue


Extraer HTML a un solo componente de archivo

Ahora, podemos extraer este marcado a su propio componente. Veamos cómo hacer eso. En primer lugar, creemos un nuevo archivo prestando atención a la convención de nomenclatura del archivo. Usaremos mayúsculas para cada palabra del nombre del archivo sin espacios ni guiones. También agregaremos una carpeta de componentes para contener el nuevo componente.
ejemplo de componente de archivo único


Los componentes deben tener un elemento raíz

Con el nuevo archivo BootstrapCard.vue creado, ahora podemos comenzar a llenar el archivo con algunas marcas. Lo primero que debemos tener en cuenta es que en la sección <template> del archivo .vue, solo puede haber un elemento raíz. Qué significa eso? En términos simples, significa que necesita un div envolvente alrededor de cualquier marcado que desee que Vue represente por usted. Tenga en cuenta el <div> resaltado aquí.
BootstrapCard.vue

Podemos tomar el marcado que estaba en App.vue entre las etiquetas <template> y mover ese marcado a la etiqueta <template> de este nuevo archivo BootstrapCard.vue.
BootstrapCard.vue

Esto es genial, pero nada funciona todavía. Continuemos.


Los componentes deben exportar un objeto

En la sección <script> del componente, debe exportar un objeto en JavaScript. Esto representa la instancia de Vue de este componente.
BootstrapCard.vue


Uso de su nuevo componente

Ahora podemos navegar de nuevo al archivo App.vue e intentar hacer uso del nuevo componente. ¿Cómo podemos hacer eso?


Importar un componente

Para utilizar el nuevo componente que creó en un archivo .vue diferente, primero debe importar ese componente así.
App.vue


Los componentes deben estar registrados

Ahora que el componente está importado, debe registrar el componente para su uso. El registro de un componente se puede hacer globalmente en el archivo main.js o localmente en el archivo .Vue donde le gustaría hacer uso del componente. Este es un ejemplo de cómo registrar el componente localmente.
App.vue


Utilice el nuevo componente

El último paso es incluir la nueva etiqueta html que representa el nuevo componente que creamos en la sección <template>. Pero, ¿cuál es la etiqueta que usamos? Bueno, aquí hay un poco de magia detrás de escena de Vue. Dado que seguimos la convención de mayúsculas de cada palabra en la denominación del componente, es decir, BootstrapCard, esto se traduce automáticamente en una etiqueta de <bootstrap-card>. De hecho, podemos ver que nuestro IDE ya reconoce el nuevo componente.
App.vue
componente vue en phpstorm
App.vue

¡Felicidades! ¡Su primer componente de archivo único ya está funcionando! No tiene datos o comportamiento dinámicos, pero de hecho está funcionando y es un gran paso para comprender cómo funcionan los componentes de un solo archivo desde cero en Vue.
html representado por vue


Adición de comportamiento a su componente de archivo único

La primera sección nos puso en funcionamiento con un componente de Vue estático. Por supuesto, queremos agregar algunos datos dinámicos y comportamiento a ese componente, de modo que eso es lo que haremos en esta segunda sección. Sin embargo, en primer lugar, centremos el componente en la página utilizando las nuevas funciones de flexbox de Bootstrap 4.
App.vue

¡Se ve bastante bien!
bootstrap flexbox centrado


Uso de la función de datos ()

Ahora queremos empezar a rellenar los datos del componente de forma dinámica. En otras palabras, queremos usar los datos reales contenidos en Vue para determinar el contenido del componente en lugar de codificar esos valores. Entonces, en la sección <script> de BootstrapCard.vue, ahora configuraremos los datos dinámicos como tal. .
BootstrapCard.vue

¡Importante! En componentes de un solo archivo, la función data () debe ser realmente una función que devuelva un objeto en lugar de un objeto en sí. ¿Por qué? Esto es para que cada vez que utilice el componente en otro lugar, tendrá acceso a sus propios datos, no a una instancia compartida de datos. En otras palabras, si tiene cuatro tarjetas de arranque en la página, cada una tendrá sus propios datos. Suena simple, pero este es un punto realmente importante.


Enlace de datos con v-text vs v-html

Ahora, queremos vincular esos datos al marcado en el área <template> del componente. Observe que la etiqueta <h5> y la etiqueta <p> ya no tienen texto entre las etiquetas. Lo que estamos haciendo es vincular dinámicamente los datos que acabamos de configurar en la función data (), y ahora * eso * será lo que llenará las etiquetas. En el título de la tarjeta podremos utilizar texto. En el párrafo de la tarjeta podemos usar texto o html.
BootstrapCard.vue

Ahora la tarjeta se renderiza con datos dinámicos.
bootstrap flexbox centrado


Modificar datos con métodos

Ahora queremos agregar algo de comportamiento al componente. ¿Qué tal cuando hacemos clic en el botón, cambiamos el título del componente? Para esto, configuraremos un nuevo método setTitle () en el objeto de métodos como vemos aquí. Lo que hará cuando se active es tomar la nueva cadena y asignarla a la thecardtitlepropiedad que a su vez actualizará la interfaz de usuario en tiempo real.
BootstrapCard.vue


Activación de un método con un evento de clic

Ahora mismo no hay forma de activar la función setTitle (). Para esto, necesitamos configurar un detector de eventos en nuestro botón. Cuando hacemos clic en ese botón, queremos que se ejecute la función setTitle (). Aquí está el marcado para agregar a la sección <template> para que funcione. Usamos el detector de eventos @click y establecemos su valor de atributo en "setTitle".
BootstrapCard.vue

¡Ah, ja! Con esa actualización, nuestro componente ahora tiene datos dinámicos y comportamiento dinámico. ¡Dulce!
archivo dot vue en acción


Usar v-for en un componente

¿Recuerda que dijimos que cada instancia de un componente tendrá sus propios datos? Demostremos eso. En el archivo App.vue, podemos usar la directiva v-for para realizar un bucle de 2 componentes de la tarjeta como tal. Esto ahora debería enviar dos componentes al navegador y ambos deberían funcionar de forma independiente entre sí. En otras palabras, hacer clic en un botón solo afectará ese título en particular a ese componente en particular.

Y sí, esto funciona según lo previsto.
comportamiento independiente de los componentes


El componente final

Eso lo resume bastante bien para obtener un componente de archivo único súper básico configurado en Vue. A continuación, simplemente agregaremos un método más y hacemos clic en el controlador para actualizar también el cuerpo de la tarjeta. Usaremos algo de html en el cuerpo ya que usamos la etiqueta v-html como vimos.

BootstrapCard.vue

App.vue


¡Pruébalo!

Aquí se incluyen los archivos construidos reales que representan el componente y proporcionan el comportamiento asociado.


Componentes de un solo archivo en VueJS Resumen

Los componentes de un solo archivo son superpoderosos en VueJs y probablemente la forma en que querrá hacer uso de Vue. El uso de este enfoque elimina varias limitaciones que puede ver cuando no utiliza componentes de archivo único. Por ejemplo, sin componentes de un solo archivo, puede encontrarse con estos desafíos.

  • Los registros de componentes globales fuerzan nombres únicos para cada componente
  • Las plantillas de cadenas no tienen resaltado de sintaxis y usan barras diagonales desagradables para HTML multilínea (YUCK)
  • La falta de compatibilidad con CSS significa que mientras HTML y JavaScript están modularizados en componentes, CSS se omite por completo
  • Ningún paso de compilación nos restringe a HTML y ES5 JavaScript, en lugar de ES6 y Babel

Para obtener estos beneficios, necesita un flujo de trabajo de desarrollo de compilación. ¡Por eso, el Vue Cli es tu mejor amigo! Obtenga más información sobre este tipo de enfoque directamente en el sitio web de Vue.



Publicar un comentario

0 Comentarios