Vuejs Data Binding Posted on November 15, 2015

Unsure where to start?

Perhaps you missed our first introduction, please check it out by visiting http://www.tutelagesystems.com/blog/view/lets-talk-vuejs

Data Binding (two way binding)

First off, let's talk about what data binding means. Data Binding in Vuejs allows us to bind certain variables to elements in our application. We can take a variable and have it update automatically with user input extremely easy.

Let's start off with a little jQuery example. We are going to continue expanding on our application.

First we have a jQuery example where we are listening for some key input and just going to place it on the screen: http://codepen.io/tutelagesystems/pen/XmoqRe

Next lets take a look at the same example. but done in Vuejs.

Once again we are listening for some key input and we are placing it on the screen: http://codepen.io/tutelagesystems/pen/YydLVd

So right now you might be thinking to yourself, ok so they are doing the exact same thing, what's different?

Well I in the Vuejs example you have a variable called yourName. This variable is automatically binded through the textbox because we used the attribute v-model="yourName" on the input element.

<input type="text" id="yourName" name="name" class="form-control" value="" placeholder="George Smith" v-model="yourName">

Any time that you use the attribute v-model in Vuejs, it will try to bind the data from that field to the parameter/variable of your choosing.

However, if you still don't believe me or want to see the magic by yourself. You can add the following code into the bottom of the codepen. Just make sure that you are posting it inside of the "vueApp" element. This small piece of code tell's Vuejs that you want to see the variables in a JSON format.

<div id="vueApp">
    ... rest of html code
    <pre>{{ $data | json }}</pre>
</div>

Once you have done this I hope that you are starting to see the benefits of using Vuejs. Anywhere inside our "app" instance we have access to this variable and any other variables we are assigning.

Binding data is not limited to only text fields, you can check out the documentation for the rest of them :) http://vuejs.org/guide/forms.html

Next time we are going to start looking at events (methods) in vue and how we can use them. We will continue working towards the basics of Vuejs and push forward to using it in Laravel :)

Share this post