Today I Learned - Rocky Kev

TIL Vue's Render Function

POSTED ON:

TAGS: vue render advanced

In Vue, you can render HTML content in the <template> section.

But say you need to dynamically render HTML.

A good example is that you want to generate a lot of list items, and writing them in the <template> section makes it look like spaghetti.

export default {
	render (h) {
		return h('div', {}, [...]);
	}
}

Dynamic rendering of a component
h stands for hypertext (As in HTML)

Vue.component('example', {
	props; ['ok'],
	render(h) {
		return this.ok ? h(Foo) : h(Bar)
	}
})

For the react version:

const App = () => {
  return React.createElement(
    "div",
    {},
    React.createElement("h1", {}, "Adopt Me!")
  );
};

A better example is located in the Vue Docs, about switching between various header tags.

Render function

Related TILs

Tagged: vue

TIL How to implement two-way binding without a framework

One of the reasons we use React or Vue is because of that sweet sweet two-way binding. It's the automatic syncing of data between the model (data) and the view (UI) in both directions. Any changes made to the data will automatically update the view, and any changes made to the view will automatically update the data.

TIL Cherry-picking out of bootstrap-vue

If you are using a component library that uses ES modules like bootstrap-vue, you can cherry pick its components instead of just registering all of them globally.

TIL how Svelte is different fom Vue/React