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>
<head><meta charset="UTF-8"><title>VueJS</title>
<script src="https://unpkg.com/vue@2.3.0"></script>


<div id="app">
	<!--displaying Vue object like this is called "string interpolation"-->


<!-- 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-->
	var vm = new Vue({
		data: {
			msg: 'Time to learn Vue.js!'

Link your website to this page! Copy and paste the URL below: