I. Vue.js Starter Page

I built this page as a starter template, with available comments to help start a new Vue.js page. You should probably already be familiar with the basics of HTML5, CSS and some Javascript, but to be honest I bet you could probably look up most of what you don't know and get by....

A few things to help you from blowing yourself up:

  • The script tag on line 4 is pointing to a specific file (version) from unpkg.com. Be careful if you set it to always use the latest version available because as Vue.js gets updated, that file (version) WILL change over time.
  • Line 9 is pretty important; the id="app" is what ties this div to the associated Vue.js functionality described at the bottom in the script tag (specifically line 26 - el:'#app'). If the id for the div in line 9 doesn't match the element (el) reference on line 26, the Vue instance won't have a DOM element to mount onto, and it'll crap out.
  • You'll want to reference the Vue.js docs often so here's a link: https://vuejs.org.
<!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> 
	
	</p>
</div>

</body>

<!-- Create a new var with a new Vue object
"el:#app" references the div above (just like a css selector) 
designating which screen object in the DOM to reference.
"data: ..." is the data object that lists out the variables to 
inject when called from the div above-->
<script>
	var vm = new Vue({
		el:'#app',
		data: {
			msg: 'Time to learn Vue.js!'
		}
	})
</script>
</html>

Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/vue-js/vue-js-starter-page/