h function for creating vnodes in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a vnode for a <div> element using the h function.

Vue

const vnode = h([1]);

Drag options to blanks, or click blank then click option'

A'div'

B'span'

C'p'

D'button'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a tag name that does not match the intended element.

Forgetting to put the tag name in quotes.

The h function creates a vnode for the specified HTML tag. Here, 'div' creates a

element vnode.

2fill in blank

medium

Complete the code to create a vnode for a <button> element with a click event handler using the h function.

Vue

const vnode = h('button', { [1]: () => alert('Clicked!') }, 'Click me');

Drag options to blanks, or click blank then click option'

AonClickHandler

BonClick

ConClickEvent

Donclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase like onclick instead of camelCase onClick.

Using incorrect property names like onClickEvent.

In Vue's h function, event listeners use camelCase with on prefix, so onClick is correct.

3fill in blank

hard

Fix the error in the code to create a vnode with children using the h function.

Vue

const vnode = h('ul', null, [[1]]);

Drag options to blanks, or click blank then click option'

Ah('li', { key: 1 }, 'Item 1')

Bh('li', 'Item 1')

Ch('li', { key: '1' }, 'Item 1')

Dh('li', { key: true }, 'Item 1')

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the key property.

Using a boolean as a key.

Keys should be unique and are typically strings. Using { key: '1' } is correct and helps Vue track list items.

4fill in blank

hard

Fill both blanks to create a vnode for a <p> element with a class and text content using the h function.

Vue

const vnode = h('p', { [1]: 'text-primary' }, [2]);

Drag options to blanks, or click blank then click option'

Aclass

Bstyle

C'Hello World!'

D'Welcome!'

Attempts:

3 left

💡 Hint

Common Mistakes

Using style instead of class for CSS classes.

Putting text inside the second argument instead of the third.

The class property sets the CSS class, and the third argument is the text content.

5fill in blank

hard

Fill all three blanks to create a vnode for a <section> with an id, inline style, and two child <p> elements using the h function.

Vue

const vnode = h('section', { [1]: 'main-section', [2]: { color: 'blue' } }, [h('p', null, [3]), h('p', null, 'Second paragraph')]);

Drag options to blanks, or click blank then click option'

Aid

Bstyle

C'First paragraph'

Dclass

Attempts:

3 left

💡 Hint

Common Mistakes

Using class instead of id for the id attribute.

Passing styles as a string instead of an object.

Forgetting to provide text content for the first

element.

The id sets the element's id, style sets inline styles as an object, and the third blank is the text for the first child paragraph.