Función de representación de Vue.js con argumentos h()

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.

La función Render con argumentos h() permite a los desarrolladores todo el poder para abordar mediante programación la interfaz de usuario de la página web. En general, usamos la plantilla para representar la salida, pero al igual que ReactJs, podemos usar Javascript para representar los componentes. Esto se hace usando los Vnodes y el argumento h().  

Creando los Vnodes con el argumento h() : h() significa Hyperscript que significa javascript que produce HTML. El primer parámetro es el tipo de elemento y en los siguientes parámetros enviamos class, id, innerHTML, string u otros vnodes, etc. Una simple función h() para mostrar un mensaje sería la siguiente:

import { h } from "vue";
export default {
  render() {
    return h("div", "Welcome to GeeksforGeeks");
  },
};

className , id : para agregar estos parámetros, use la siguiente sintaxis:

h(
  "div",
  {
    class: "container",
    id: "holder",
  },
  "Welcome to GeeksforGeeks"
);

Estilo : para aplicar un estilo, utilice la siguiente sintaxis:

h(
  "div",
  {
    style: { color: "green" },
  },
  "Welcome to GeeksforGeeks"
);

Función onClick : use la siguiente sintaxis:

h(
  "div",
  {
    onClick: () => {
          console.log("Hello");
    },
  },
  "Welcome to GeeksforGeeks"
);

Ejemplo: En el siguiente ejemplo, tenemos una página web simple en vue usando los argumentos h() .

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 título y el tema.

import { h } from "vue";
export default {
  render() {
    return h(
      "div",
      h("center", {
        innerHTML:
          "<h1>GeeksforGeeks</h1>
           <strong>
                   Vue.js Render Function with h() Arguments
           </strong>",
      })
    );
  },
};

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#render-functions-jsx