We have learnt in the earlier chapters, how to get an output in the form of text content on the screen.
In this chapter, we will learn how to get an output in the form of HTML template on the screen. To understand this, let us consider an example and see the output in the browser. Now, suppose we want to show the html content on the page.
If we happen to use it with interpolation, i.e. with double curly brackets, this is what we will get in the browser. If we see the html content is displayed the same way we have given in the variable htmlcontent, this is not what we want, we want it to be displayed in a proper HTML content on the browser.
For this, we will have to use v-html directive. The moment we assign v-html directive to the html element, VueJS knows that it has to output it as HTML content.
Let’s add v-html directive in the .html file and see the difference. Now, we don’t need the double curly brackets to show the HTML content, instead we have used v-html = ”htmlcontent” where htmlcontent is defined inside the js file as follows −.
The output in the browser is as follows −. If we inspect the browser, we will see the content is added in the same way as it is defined in the .js file to the variable htmlcontent : "
Vue Js Template
Let’s take a look at the inspect element in the browser. We have seen how to add HTML template to the DOM. Now, we will see how to add attributes to the exiting HTML elements.
Consider, we have an image tag in the HTML file and we want to assign src, which is a part of Vue. Look at the img tag above, the src is blank.
We need to add the src to it from vue js.
Let us take a look at how to do it.
We will store the img src in the data object in the .js file as follows −. If we assign the src as follows, the output in the browser will be as shown in the following screenshot. We get a broken image. To assign any attribute to HMTL tag, we need to use v-bind directive. Let’s add the src to the image with v-bind directive.
This is how it is assigned in .html file. We need to prefix the src with v-bind:src = ”imgsrc” and the name of the variable with src. Following is the output in the browser.
Let us inspect and check how the src looks like with v-bind.
As seen in the above screenshot, the src is assigned without any vuejs properties to it.
isButtonDisabled has the value of
disabled attribute will not even be included in the rendered
Template expressions are sandboxed and only have access to a whitelist of globals such as
Date. You should not attempt to access user-defined globals in template expressions.
Directives are special attributes with the
v-for, which will be discussed later). A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes. Let’s review the example we saw in the introduction:
v-if directive would remove/insert the
element based on the truthiness of the value of the expression
Some directives can take an “argument”, denoted by a colon after the directive name. For example, the
v-bind directive is used to reactively update an HTML attribute:
href is the argument, which tells the
v-bind directive to bind the element’s
href attribute to the value of the expression
Another example is the
v-on directive, which listens to DOM events:
Here the argument is the event name to listen to. We will talk about event handling in more detail too.
New in 2.6.0+
attributeName, whose value is
"href", then this binding will be equivalent to
Similarly, you can use dynamic arguments to bind a handler to a dynamic event name:
In this example, when
eventName‘s value is
v-on:[eventName] will be equivalent to
Dynamic Argument Value Constraints
Dynamic arguments are expected to evaluate to a string, with the exception of
null. The special value
null can be used to explicitly remove the binding. Any other non-string value will trigger a warning.
Dynamic Argument Expression Constraints
Dynamic argument expressions have some syntax constraints because certain characters, such as spaces and quotes, are invalid inside HTML attribute names. For example, the following is invalid:
The workaround is to either use expressions without spaces or quotes, or replace the complex expression with a computed property.
When using in-DOM templates (i.e., templates written directly in an HTML file), you should also avoid naming keys with uppercase characters, as browsers will coerce attribute names into lowercase:
Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the
.prevent modifier tells the
v-on directive to call
event.preventDefault() on the triggered event:
You’ll see other examples of modifiers later, for
v-on and for
v-model, when we explore those features.
v- prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the
v- prefix becomes less important when you are building a SPA, where Vue manages every template. Therefore, Vue provides special shorthands for two of the most often used directives,
They may look a bit different from normal HTML, but
@ are valid characters for attribute names and all Vue-supported browsers can parse it correctly. In addition, they do not appear in the final rendered markup. The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later.