The html that will be generated with a template can end up being injected into a mount point in the hard coded html of a web page by using the vue el option, or the mount vue instance method. When it comes to component design a template will end up being the html that composes an instance of the use of that component.
There are a few options when it comes to defining a template, but in this post I will just be writing about the string and X-Template options for templates in vuejs.
There are a few things to cover even when it comes to just starting out with just a very simple hello world style example of a vue template. For example when it comes to injecting text nodes there is using the mustache syntax, but then there is also using the v-text directive to do the same thing. There are a wide range of directives to work with when working out a template, but in this basic section I will just be touching base on a few of them.
Using a string template just simply involves setting a string form of the template to the template option when creating a new vue instance. This string form template will then be used to compile the contents that will be used in the mount point set with the vue el DOM option, or compose the html of a component that will be used in such a main vue instance. A very basic hello word example of a vue template might involve the use of the mustache syntax to display a string value in a vue data object as a text node for an element in the template.
The mustache syntax is just used for creating text nodes when working out a template, and even then it can be replaced with the v-text directive. When it comes to doing anything with attributes of elements directives must be used, and in some cases templates must be dropped all together in favor of render functions. However for now in this basic section lets just look at a few more basic examples of templates when it comes to directives, and other options that can be used for templates beyond just a simple string format covered in this basic hello world example.
A directive is a way to go about doing something to and element, such as injecting a text node with the v-text node, repeating an element for each element in a collection in the data object with the v-for directive, or attaching an event handler by way of the v-on directive. For now in this basic getting started with templates section though it might be a good starting point to work out a simple example using the v-bind, and v-text directives.
The v-bind directive is how to go about making a value in the data object a value for an element of component attribute in the template. For example if I have a string in the data object that I want to use as the value for an in line style attribute of a paragraph element they way to do so would be with v-bind. The v-text directive is another directive that just serves as another way to create a text node for an element.
Another option is to use an x-template this will require a script tag, but with the type attribute of the script tag set to ‘text/x-template’. This is a nice option because it allows for me to define the html of the template in just pure raw html form. In addition this can be used as a standard way to create external template files.
The draw back of render functions is that although they are more powerful, that in turn is also the reason why I want to avoid them, it makes working on a vue project far more time consuming, and hard to read if I just go all out with them over templates. So I think the best course of action here is to use render functions to help with some of these situations in which they just simply need to be used, while still using basic simple templates for simple tasks where they continue to work just fine.
So far I am not aware of any way to generate a node name for an element or component in a template using just directives. This is then one reason why I sometimes find myself using a render function over that of a simple template.
Hope this post helps with the basics of templates in vuejs which is a great starting point for working out what the html should be for a vue instance. Also more often then not it is not always necessary to switch to using a render function, there are a few situations in which doing so is called for, but render functions make a vue project harder to read, and maintain. Even when I do use a render function I try to compartmentalize what I am doing with a render function into a component and continue using templates as the default.