Advanced Vue.js - Directives, Plugins, and Render Functions Chapter 17components: {
myComp
}
})The syntax is slightly different from an HTML template. In particular, note how props are
passed and how we can use camelCase and self-closing tags.
Creating a functional component
A lighter version of a component is a functional component. The functional component
doesn't have instance variables (so no this) and has no state. In this recipe, we will write a
simple functional component that takes some instructions via HTML and turns them into a
drawing.
Getting ready
Before attempting this recipe, you should at least become familiar with the render function
in Vue. You can use the previous recipes to do that.
How to do it...
When you are writing an
elements inside it to actually draw shapes. For example, if you want to draw a triangle, you
have to write the following:
<svg>
<path d="M 100 30 L 200 30 L 150 120 z"/>
</svg>The text inside the d attribute is a series of instructions that make a virtual cursor move to
draw: M moves the cursor to the (100, 30) coordinate inside the
up until (200, 30) and then again to the (150, 120) coordinate. Finally, z closes the path we
are drawing, and the result is always a triangle.