IV. Vue.js Data Binding Basics (Two Way Binding)

If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.

Vue.js works well with one way bindings using v-bind and the moustache brace method {{your data here}}. But where Vue.js gets strong is when it performs 2 way binding with a directive known as v-model. Your user interfaces will start to take on new life when you implement this functionality, and you'll see why in the code below.

Take a Look

  • Don't forget the Vue.js library reference in the script tag on line 4....
  • ... and line 9 is pretty important too.
Simply put, the v-model="newEmail"on line 20 replaces the value attribute in the form field, and will inject the Vue.js data object's value for newEmail.

Try It!

Notice that I intentionally left some of our other Vue.js code in the demo on purpose; just wanted you to see how multiple Vue.js functionality coexists.

Go ahead and change the email value in the Email field. See how it automatically updates the text in the field below it? (Thank you one way binding {{hugs and kisses}}.)

Now, refresh your browser, then open your browser's console. Both the form field and the text show "sol@cfsnap.com", right? In the browser console type vm.newEmail= "rich@web.com" and hit enter. See how it updated the form field and the text? [One way binding strikes again].

Go ahead and type in the email form field first@name.com, but don't hit enter - the form will think you're trying to submit it. Instead go down into the browser console and type vm.newEmail (then hit enter on your keyboard) and you should see it update to first@name.com. [Two way binding, you're now on my Christmas card list].

Sure, 2 way binding has existed forever in Javascript, but never as easily. Starting to envision a few use cases in your head for some of this functionality? I'm thinking a stand alone shopping cart, time card system.... anything where an approval process would need to be implemented....

In summary, understand that a Vue.js View is the part of the DOM where application data is synced.
Directives manage data and user input within the view.

Your message: {{msg}}


Email:

Email address entered: {{newEmail}}

<!doctype html>
<html>
<head><meta charset="UTF-8"><title>VueJS</title>
<script src="https://unpkg.com/vue@2.3.0"></script>
</head>

<body>

<div id="app">
	
	<!--displaying Vue object like this is called "string interpolation"-->
	<h2>{{msg}}</h2> 
	
	<!--data binding: Have to use v-bind or the colon shorthand notation. v-bind is used below.... -->
	<a v-bind:href="url +'?myParam=1'">Link to Google</a><br>
	
	<p>
		<form>
			<!-- if you don't want the input event responding every time you type a character in the form field then you'll need to add v-model.lazy so that it responds to the change event instead.-->
			Email: <input type="text" name="email" v-model="newEmail" id="newEmail"><br>

			<!-- example of 2 way data binding using the newEmail value from above. Changes are reflected immediately because field is responding to 
			input event. Add ".lazy" to have it respond to the change event-->
			<p>
				You entered {{newEmail}}.
			</p>
		</form>
	</p>
</div>

</body>

<!-- "el:#app" references the div above (just like a css selector) designating which screen object in the DOM to reference
"data: ..." is the object that lists out the variables to inject when called from the div above-->
<script>
	var vm = new Vue({
		el:'#app',
		data: {
			newEmail: 'rich@cfsnap.com',
			msg: 'v-bind can go 1 way, v-model can go 2.',
		}
	})
</script>
</html>

Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/vue-js/vue-js-data-binding-basics-two-way-binding/