Attribute Bindings

Vue uses the double mustache syntax to render data to the DOM, but how would we make an element attribute like an href dynamic? Well, with the vbind directive, we can couple any HTML attribute to our data. For example, let's add a link to our template. Use vbind on the href, and then reference the data property that's bound to the text input on our page.

the data property is called New Item. We'll also label it Dynamic Link. Now, if we add a URL to our input, we'll be able to click our link and it will take us there. io, and it will automatically update.

This is an incredibly powerful feature of Vue. Now we can build templates or any attribute responds to our data. For our shopping list app let's toggle the disabled attribute on our save item button when there isn't any content in our input. That way we won't add blank data on accident to our shopping lists.

We'll start by clearing out our example link and then we can add a vbind to our button. Now our button won't work until we have some content in our input. Awesome! This technique is also a great way to enforce minimum character requirements on our fields, too.

Just like vOn has a shorthand syntax with the at symbol, vBind can also be shortened to just a colon. While we can use vBind with every attribute, there are some special cases, and we'll cover those in the next lesson. Vue uses the double mustache syntax to render data to the DOM, but how would we make an element attribute like an href dynamic? Well, with the vbind directive, we can couple any HTML attribute to our data.

For example, let's add a link to our template. Use vbind on the href, and then reference the data property that's bound to the text input on our page. the data property is called New Item. We'll also label it Dynamic Link.

Now, if we add a URL to our input, we'll be able to click our link and it will take us there. io, and it will automatically update. This is an incredibly powerful feature of Vue. Now we can build templates or any attribute responds to our data.

For our shopping list app let's toggle the disabled attribute on our save item button when there isn't any content in our input. That way we won't add blank data on accident to our shopping lists. We'll start by clearing out our example link and then we can add a vbind to our button. Now our button won't work until we have some content in our input.

Awesome! This technique is also a great way to enforce minimum character requirements on our fields, too. Just like vOn has a shorthand syntax with the at symbol, vBind can also be shortened to just a colon. While we can use vBind with every attribute, there are some special cases, and we'll cover those in the next lesson.