@vue/runtime-dom

DOM Manipulation

This feature allows developers to manipulate the DOM by creating and mounting Vue components. The code sample demonstrates how to create a simple Vue application that renders 'Hello World' inside a div element.

import { createApp, h } from 'vue';
const App = { render() { return h('div', 'Hello World'); } };
createApp(App).mount('#app');

Event Handling

This feature enables handling of user events such as clicks. The code sample shows how to create a Vue component with a button that alerts the user when clicked.

import { createApp, h } from 'vue';
const App = {
  render() {
    return h('button', {
      onClick: this.handleClick
    }, 'Click me');
  },
  methods: {
    handleClick() {
      alert('Button clicked');
    }
  }
};
createApp(App).mount('#app');

Component Rendering

This feature deals with rendering components within other components. The code sample illustrates how to define and render nested components using Vue's composition API.

import { createApp, defineComponent, h } from 'vue';
const ChildComponent = defineComponent({
  render() {
    return h('p', 'I am a child component');
  }
});
const ParentComponent = defineComponent({
  render() {
    return h('div', [
      h('h1', 'This is a parent component'),
      h(ChildComponent)
    ]);
  }
});
createApp(ParentComponent).mount('#app');