VueJS Basic Attribute Binding Explained
Hey Guys! As you may know, I’ve been spending the past week or so learning how to use VueJS. Recently I just did a quick lesson on how to use Attribute Binding and now I will pass the information on to you guys! Let’s get started!
So let’s say you want to add a link to a page and the link needs to be variable. Maybe the link will change and it won’t be static.
Now if we pass in a variable called url into the link on the html.index page, we won’t get the url variable from the app.js file. it will just think that the url is literally “url”. So we need to attribute bind!
So let’s say this is our app.js file. We have a very basic vueJS file that exports a url variable that contains the address we wanna use for the link. Now instead of doing what did in the picture above this one, we want to attribute bind like so…
The key thing here that will distinguish assigning the href to “url” (literal) and the url variable will be these two…
v-bind:href//or:href (short hand)
By using this syntax we will be able to assign the variable and not the literal “url”! It’s easy as that!
I know this was a short one but I hope this one helped!
Happy Coding Y’all! :D
