Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In this one, I will be covering how to display values in HTML when using VueJS. Also, I will cover how to control HTML attributes with it.
Initial application
For the starting application, I will use a simple application from the previous post.
<!-- index.html -->
<!doctype html>
<html>
<head></head>
<body>
<div id="app">
<div>Hello world!</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
// script.js
Vue.createApp({
data() {
return {
message: "Hello world"
}
}
}).mount("#app")
I won’t go into too much detail about explaining the code above as it is covered in the previous post. The only thing I do want to note is that it is using CDN to load the VueJS library. Also, in the application data, there is one variable called message, and a hardcoded string in the HTML containing the text “Hello world!”.
Displaying value in HTML
When displaying the value in HTML with VueJS, all you need to do is place an expression inside of the double curly brackets ({{ EXPRESSION }}) and between opening and closing the HTML tag. You may notice that I used the term expression. The reason why I said it that way is because you could place almost any valid JavaScript expression between curly brackets.
<!-- index.html -->
<!doctype html>
<html>
<head></head>
<body>
<div id="app">
<div>{{ "Hello world" }}</div>
<div>{{ 1 + 3 }}</div>
<div>{{ Math.round(3 + Math.random() * 5) }}</div>
<div>{{ (() => "Function result")() }}</div>
<div>{{ true ? "true expression" : "false expression" }}</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
In the code example above, there are different hardcoded values displayed. As you can see, there is a string, number, result of math function, and even self-invoking function. And this brings me back to the other term I used above. Almost any valid JavaScript expression. As long as the result is some value, you can place it inside of the curly brackets. You can’t place something like a variable assignment.
Usually, you don’t want to just display some hardcoded value in HTML. You would have some application variables that you might want to display. That is done in quite a similar way. All you need to do is use a variable name between the same curly brackets.
<!-- index.html -->
<!doctype html>
<html>
<head></head>
<body>
<div id="app">
<div>{{message}}</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Application variables can also be used in expressions inside of the HTML.
Displaying complex structures
Not all values are primitives. There are also arrays and objects. If you try to display those, Vue will try to stringify them and display them like that. If you choose to render an array containing numbers one to three, the result will be “[ 1, 2, 3 ]”.
Displaying method result
There might be some logic you want to run and display its result in HTML. That logic should not be in the HTML between curly brackets. That is why when initializing the application, inside of the initialization object you can add the methods property which contains all your methods. Then just by using their names and calling them between double curly brackets, you can display their result.
// script.js
Vue.createApp({
data() {
return {
exampleName: "John",
}
},
methods: {
getMessage: () => "Hello method",
getNameGreeting: function(){ return `Hello ${this.exampleName}` }
}
}).mount("#app")
<!-- index.html -->
<!doctype html>
<html>
<head></head>
<body>
<div id="app">
<div>{{getMessage()}}</div>
<div>{{getNameGreeting()}}</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
You may notice in the example above that the getNameGreeting method used this keyword to access data value. During the application build, VueJS enables access to the application data by using it. The important thing to note is that if you want to access data, you can't define a method as an anonymous function.
Controlling HTML attributes
Quite often, you might want to use some application data to control HTML attributes. The simplest example would be setting the links href attribute. In this case, you can’t use double curly brackets. But what VueJS does give us is special attributes called directives that can be used for this. In this case, it is a v-bind attribute after which you add the HTML attribute name separated by colon. The value passed to it is an expression or a variable name placed inside of the quotes.
// script.js
Vue.createApp({
data() {
return {
linkValue: "https://www.google.com",
}
}).mount("#app")
<!-- index.html -->
<!doctype html>
<html>
<head></head>
<body>
<div id="app">
<a v-bind:href="linkValue">Google</a>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
The code used in this article can be found in my GitHub repository.
For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.