Vue.js Render Functions Componente Creación de VNodes

Vue.js es un marco javascript progresivo para desarrollar interfaces de usuario web. Es un marco eficaz, accesible y versátil. Podemos crear aplicaciones de una sola página, así como aplicaciones de pila completa. Está construido sobre HTML, CSS y Javascript, lo que facilita a los desarrolladores la integración de Vue.js en cualquier aplicación en cualquier etapa.

El componente de funciones de renderizado de Vue.js permite la creación de VNodes. Los VNodes contienen muchas propiedades internas. Los VNodes no se pueden duplicar, lo que significa que un árbol solo puede tener una instancia de un VNode.

Sintaxis : Declare las funciones Render con VNodes de la siguiente manera:

VNode : creación de un vnode simple que muestra un mensaje de bienvenida.

function render() {
    return h('h3', 'Welcome to GeeksforGeeks');
},

Duplicación de VNodes : los VNodes no se pueden duplicar simplemente. Pero a veces es posible que necesitemos duplicar el componente. Entonces necesitamos usar la función de fábrica de la siguiente manera:

function render() {
  return h(
    'div',
    Array.from({ length: 5 }).map(() => {
      return h('h3', 'welcome')
    })
  )
}

Ejemplo : en el siguiente ejemplo, tenemos una página web con un mensaje de bienvenida y un componente repetido que contiene algunos valores almacenados en los datos.

Paso 1 : Cree un nuevo proyecto Vue.js con el administrador de paquetes npm node.js usando el siguiente comando.

npm init vue@latest

Ingrese el nombre del proyecto y preestablezca el proyecto de la siguiente manera:

 

Cambie el nombre del archivo App.vue a App.jsx en el archivo y la estructura del archivo tendrá el siguiente aspecto:

 

Paso 2: cambie la importación en el archivo main.js de la siguiente manera:

import { createApp } from "vue";
import App from "./App.jsx";
  
const app = createApp(App);
  
app.mount("#app");

Paso 3: En el archivo App.jsx, usaremos el siguiente código para mostrar el contenido.

import { h } from "vue";
var gfgTitle = h("h1", {
    style: {
        color: "green",
        width: "fit-content",
        margin: "auto"
    },
    innerHTML: "Welcome to GeeksforGeeks",
});
var topic = h("p", {
    style: { width: "fit-content", margin: "auto" },
    innerHTML: "Vue.js Render Functions Component VNodes creation",
});
  
export default {
    data() {
        return {
            tutorials: ["Data Structures",
                "Algorithms",
                "Web Development"]
        };
    },
    render() {
        return [
            gfgTitle,
            topic,
            Array.from(this.tutorials).map((elem, index) => {
                return h("p", elem);
            }),
        ];
    },
};

Paso 4 : Ejecute el proyecto usando el siguiente comando y vea el resultado.

npm run dev

Salida : al compilar correctamente el proyecto, abra http://localhost:3000 y el resultado será el siguiente.

 

Referencia: https://vuejs.org/guide/extras/render-function.html