Функция рендеринга Vue.js с аргументами h()

На чтение 3 мин Просмотров 81 Опубликовано 26.04.2022

Функция рендеринга с аргументами h() позволяет разработчикам использовать все возможности для программного управления пользовательским интерфейсом веб-страницы. Как правило, мы используем шаблон для рендеринга вывода, но, как и в случае с ReactJ, мы можем использовать Javascript для рендеринга компонентов. Это делается с помощью Vnodes и аргумента h().

Создание Vnodes с аргументом h() : h() означает Hyperscript, что означает javascript, который создает HTML. Первый параметр — это тип элемента, а в последующих параметрах мы отправляем class, id, innerHTML, string или другие vnodes и т. д. Простая функция h() для отображения сообщения будет выглядеть следующим образом:

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

className, id : чтобы добавить эти параметры, используйте следующий синтаксис:

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

Стиль : чтобы применить стиль, используйте следующий синтаксис:

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

Функция onClick : используйте следующий синтаксис:

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

Пример: В следующем примере у нас есть простая веб-страница в vue с использованием аргументов h().

Шаг 1. Создайте новый проект Vue.js с помощью диспетчера пакетов npm node.js, используя следующую команду.

npm init vue@latest

Введите имя проекта и предустановите проект следующим образом:

Переименуйте файл App.vue в App.jsx в файле, и структура файла будет выглядеть следующим образом:

Шаг 2: Измените импорт в файле main.js следующим образом:

import { createApp } from "vue";

import App from "./App.jsx";

const app = createApp(App);

app.mount("#app");

Шаг 3: В файле App.jsx мы будем использовать следующий код для отображения заголовка и темы.

jsx

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>",

      })

    );

  },

};