Vue Js 2 – Data Binding
Hi everyone. In this post I want to talk about data binding in Vue Js2.
In last post we’ve already seen how we can output data from our Vue instance. If you want to look at this tutorial please visit this link;
Now we will learn data binding in Vue Js 2. I’m going to create new property inside Vue instance.
All example codes here;
job: 'Computer Engineer',
htmlLink: '<input type="button" value="Click Me"/>'
<title>Vue Js 2 Tutorials for Learners</title>
<a v-bind:href="website">Nbaser Code</a>
<<input type="text" v-bind:value="name +' ' + age"/>
In here I’m creating new data object and add name, age, job and website properties inside the data object. Then set these properties with new values.
Now I want to pass this values to my view(index.html file). But I want to pass website property as a link. I can do this with this code;
<a v-bind:href=”website”>Nbaser Code</a>
I f we want to bind a data to our any kind of attribute like this href attribute, we need to do is use a directive called v-bind.
In above code, v-bind directive is telling the Vue Js to bind this attribute to some dynamic data that we have stored on our web Vue instance. That is how we bind our data to different properties.
We can bind to different attributes with v-bind not only href. For example, I want to bind name property to the value of input text field in view. It’s just simple like this;
<input type=”text” v-bind:value=”name”/>
You can bind more than one property to view like this;
<input type=”text” v-bind:value=”name + age”/>
If we want to pass html codes to index.html page, how can do this? It is pretty simple;
app.js code: htmlLink: ‘<input type=”button” value=”Click Me”/>’
index.html code: <p v-html=”htmlLink”></p>
We are going to use directive called v-html and then this is going to be equal to whatever html we want to render now our index.html file.