III. Vue.js Data Binding Basics (One 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 by binding data from Vue to the DOM elements on your web page. It's really efficient because it only re-renders those elements that have been changed, making it fast and light weight. Using the code below I'll start you on how to do binding using Interpolations.

Take a Look

  • Don't forget the Vue.js library reference in the script tag on line 4....
  • ... and line 10 is pretty important too.
  • For this demo you need to have the "msg" attribute in the Vue data object (line 22).
Vue.js uses the "double moustache" {{braces character on your keyboard}} as a placeholder for Interpolation data, so all you have to do is make sure your DOM {{Value}} = Vue.js data object value (msg:'Hello from Vue'). Way easy!

Try It!

When the page loads up you should see "Your Message:" and then "Hello from Vue". Need proof that my code actually works and isn't hard-coded? Open the Javascript console in your browser, and type vm.msg='Your name here' then hit return. By typing in the console you're temporarily over-riding the coded value on the page and you should see your name instead of Hello from Vue.

This demo wasn't exactly exciting but now that you've been introduced to some of the Vue.js basics and how it all works we'll get into some better stuff in the next demo. Hang in there - it gets better!

By the way in case you were wondering this demo was an example of "one way binding" in Vue.js, and yes there is a "two way binding" that we'll cover in an upcoming post.

Your message: {{msg}}


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

<body>

<!-- we're telling Vue.js to act on this div, id="app"-->
<div id="app">
	<!--displaying Vue object like this is called "string interpolation"-->
	<h2>{{msg}}</h2> 
</div>

</body>

<!-- our Vue.js instance-->
<script>
	var vm = new Vue({
		el:'#app',
		data: {
			msg: 'Hello from Vue'
		}
	})
</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-one-way-binding/