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

Vue 3 Изучение

Функция рендеринга с аргументами 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");
  },
};

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

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 следующим образом:

js

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

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

Читайте также:  Веб-скрапинг с помощью Beautiful Soup

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>",
      })
    );
  },
};

Шаг 4: Запустите проект с помощью следующей команды и посмотрите результат.

npm run dev

Вывод : после успешной сборки проекта откройте http://localhost:3000, и результат будет следующим.

ешной сборки проекта откро

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector