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…
