Vue From The TOP — Data Binding
Welcome Back!. I know, I know it has been a long time since my previous post for the “Vue From The TOP” series, what can I say, I’ve been busy. Hope you are doing good.
In this post, we will discuss more into the data-binding capabilities of Vue JS. Let's go.
Data Binding
Data-binding means an interaction between user interface and a model property.
Sounds good? no?. Alright, let us say we have an element in the DOM. Like the infamous h1 tag.
<h1>As Always.... Hello World!</h1>Now, this h1 tag has a value or text in between it's opening and closing tags. This text can be considered as “data” in this case. And this “data” is bound in between those two tags. So when the browser translates this HTML to visual pages, it takes in the text/data between the opening and closing tags and applies the necessary styling to it, in our case makes it big. Like this.
As Always…. Hello World!
But just like the real world, things aren’t always this simple. There are several different types of data bindings. “p” tags, “section” tags, “a” tags, etc. Now on top of this, we also need to make the data bound to these tags “dynamic”. Okay, I hope you know what I mean by dynamic data. We had a brief glimpse of data binding in the introductory post on Vue JS, remember? No? well no worries click below to have your memory refreshed.
Alrighty then, let’s go ahead and get into some code. Let's start off simple.
Let’s bind dynamic data to our h1 tag. Here is how your vue file should look like before we do any of the data binding magic.
<template>
<div>
<h1>Well A Simple H1 Tag. Nothing to see here</h1>
</div>
</template><script>
export default{
data(){
}
}</script>
Great!, now let's make the data inside the h1 tag dynamic. We do that by declaring a data property and assigning the string to it.
<template>
<div>
<h1>Well A Simple H1 Tag. Nothing to see here</h1>
</div>
</template><script>
export default{
data(){
message: 'Well A Simple H1 Tag. Nothing to see here'
}
}</script>
Alright!, let’s spice it up a little, now its no longer a simple h1 tag is it?
<template>
<div>
<h1>Well A Simple H1 Tag. Nothing to see here</h1>
</div>
</template><script>
export default{
data(){
message: 'Im an extrordinary h1 tag'
}
}</script>
Now, you in order to bind this message property to the h1 tag, you will use something called mustache braces ( boring name: Interpolating ). It's quite simple, you will just envelop the data property with double curly braces and place it between the opening and closing h1 tags. Like so.
<template>
<div>
<h1>{{message}}</h1>
</div>
</template><script>
export default{
data(){
message: 'Im an extrordinary h1 tag'
}
}</script>
Done. That’s it. You absolute champion. The result is the same, but now you have the flexibility to change the data property as you like, and since Vue’s data properties are reactive, the DOM updates in real-time to the changes to the data property.
Sorry, for re-using this gif, btw 😅.
Sweet, now that you are a master of interpolating data properties on to the DOM elements let’s do this a little differently.
Now, you can follow the same steps for interpolating dynamic data to a “p”, “h”, and any other tag.
Now let’s look at a practical example. How would you bind a dynamic website link to an “a” tag?
If you thought, you can do it like this…
<a href={{websiteLink}}></a>You, my friend, are wrong!.
The reason you are wrong in this regard is you are dealing with an attribute. So you need to take a slightly different approach.
Vue is super kind enough to make it extremely simple for us. It gives us a separate property called as v-bind. You can use this property to bind dynamic data properties to old and boring HTML attributes to make them more interesting.
Let's see how we can do that.
<template>
<div>
<a href="www.google.com">Go Google!</a>
</div>
</template><script>
export default{
data(){
}
}</script>
Now, let's add some spice to it. Firstly add a data property to hold the link:
<template>
<div>
<a href="www.google.com">Go Google!</a>
</div>
</template><script>
export default{
data(){
websiteLink: 'www.google.com'
}
}</script>
Now, with the power of v-bind, let's bind this data property to the href attribute.
<template>
<div>
<a v-bind:href="websiteLink">Go Google!</a>
</div>
</template><script>
export default{
data(){
websiteLink: 'www.google.com'
}
}</script>
Now, the rest is up to your imagination, the sky is not the limit, you can go beyond that, try practicing v-bind and interpolation on few more HTML tags and attributes and also check out the Vue documentation to understand more use cases.
In the next post, let's look into how to dynamically change and bind classes to our HTML.
Support
It would be great if you could support me via these methods:
Take a moment to check out my Course on Cynohub:
https://cynohub.com/courses/vue-js-fundamentals-course/
Clap this post and share it with your fellow Vue Learners.
Follow me here on Medium and Checkout my other Vue Posts:
See Ya Next time.
