✏️ VueJS and Data Binding:

📄 As you know we can show data in page with {{}}, but what about binding data to an element attribute like href?

For example we have a websiteTag data like this:
websiteTag: 'http://sadin.ir'
and we want to bind this data to an anchor tag.

If you try to use like this, you will see in href attribute 'websiteTag', but we want to see value of websiteTag (http://sadin.ir).

We should use v-bind for binding data to attributes:
<a v-bind:href="websiteTag">My Site</a>
Also we can use shortcut :href :
<a :href="websiteTag">My Site</a>
If you run index.html you can see http://sadin.ir is binding to href attribute of link.

Same way you can bind data to any other attributes, for example I want to show value of name in textbox:

In app.js:
name: 'Kamran',
websiteTag: 'http://sadin.ir'

In index.html:
<input type="text" v-bind:value="name'/>
<a href="websiteTag">MySite<a/>

Codes are available here:
https://codepen.io/A-Programmer/pen/oqryVx
https://gist.github.com/A-Programmer/6ff00e510a46475b0e719686c49cd495

🗓 in the next tip i'm going to show you how to bind html element to page.

#Vue #Data_Binding #Vue_Data_Binding

http://t.me/WebDevelopmentReferences

How HTML element can be bind to page by vue?

In last tip, I wrote about data binding to attributes, what about binding a html element to page? For example I want to get my site link from data called websiteHtmlTag.

I have a data called websiteHtmlTag and I want to render its value on my page:

websiteHtmlTag: '<a href="http://sadin.ir">My Site</a>

So lets try the latest way:

{{websiteHtmlTag}}

This will show output exactly same as its value, but what I want is showing rendered result! A hyper link with My Site text that links to http://sadin.ir .

First we create a p tag and then we should bind websiteHtmlTag to this element:

<p v-html="websiteHtmlTag"></p>

Now vue know in this p tag we want that html.
So if we run the page, we will see the right result.

Codes are available on Codepen and Github gist:

🌐 CodePen: https://codepen.io/A-Programmer/pen/EEBGvo

🌐 Github gist: https://gist.github.com/A-Programmer/3d717eec54199a780c1620746b6a1f6a

#Vue #Data_Binding #Vue_Data_Binding #Vue_Html_Binding

http://t.me/WebDevelopmentReferences