zrbecker/index.html

## index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta key="viewport" value="width=device-width,initial-scale=1">
    <title>Vue.js Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <h1>Getting Started with Vue.js</h1>
      <hr>

      <div id="app">
        {{ message }}
      </div>
      <hr>

      <div id="app-2">
        <span v-bind:title="message"> Hover your mouse over me for a few
        seconds to see my dynamically bound title!</span>
      </div>
      <hr>

      <div id="app-3">
        <p v-if="seen">Now you see me</p>
      </div>
      <hr>

      <div id="app-4">
        <ol>
          <li v-for="todo in todos">
            {{ todo.text }}
          </li>
      </div>
      <hr>

      <div id="app-5">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">Reverse Message</button>
      </div>
      <hr>

      <div id="app-6">
        <p>{{ message }}</p>
        <input v-model="message">
      </div>
      <hr>

      <div id="app-7">
        <ol>
          <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id">
          </todo-item>
        </ol>
      </div>
      <hr>
    </div>

    <!-- Bootstrap 4 -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

    <!-- Vue -->
    <script src="https://unpkg.com/vue"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })

      var app2 = new Vue({
        el: '#app-2',
        data: {
          message: 'You loaded this page on ' + new Date().toLocaleString()
        }
      })

      var app3 = new Vue({
        el: '#app-3',
        data: {
          seen: true
        }
      })

      var app4 = new Vue({
        el: '#app-4',
        data: {
          todos: [
            { text: 'Learn Javascript' },
            { text: 'Learn Vue' },
            { text: 'Build something awesome' }
          ]
        }
      })

      var app5 = new Vue({
        el: '#app-5',
        data: {
          message: 'Hello Vue.js!'
        },
        methods: {
          reverseMessage: function() {
            this.message = this.message.split('').reverse().join('')
          }
        }
      })

      var app6 = new Vue({
        el: '#app-6',
        data: {
          message: 'Hello Vue!'
        }
      })

      Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
      })

      var app7 = new Vue({
        el: '#app-7',
        data: {
          groceryList: [
            { id: 0, text: 'Vegetables' },
            { id: 1, text: 'Cheese' },
            { id: 2, text: 'Whatever else humans are suppose to eat' }
          ]
        }
      })
    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta key="viewport" value="width=device-width,initial-scale=1">
	<title>Vue.js Test</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
	</head>
	<body>
	<div class="container">
	<h1>Getting Started with Vue.js</h1>
	<hr>

	<div id="app">
	{{ message }}
	</div>
	<hr>

	<div id="app-2">
	<span v-bind:title="message"> Hover your mouse over me for a few
	seconds to see my dynamically bound title!</span>
	</div>
	<hr>

	<div id="app-3">
	<p v-if="seen">Now you see me</p>
	</div>
	<hr>

	<div id="app-4">
	<ol>
	<li v-for="todo in todos">
	{{ todo.text }}
	</li>
	</div>
	<hr>

	<div id="app-5">
	<p>{{ message }}</p>
	<button v-on:click="reverseMessage">Reverse Message</button>
	</div>
	<hr>

	<div id="app-6">
	<p>{{ message }}</p>
	<input v-model="message">
	</div>
	<hr>

	<div id="app-7">
	<ol>
	<todo-item
	v-for="item in groceryList"
	v-bind:todo="item"
	v-bind:key="item.id">
	</todo-item>
	</ol>
	</div>
	<hr>
	</div>

	<!-- Bootstrap 4 -->
	<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

	<!-- Vue -->
	<script src="https://unpkg.com/vue"></script>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	message: 'Hello Vue!'
	}
	})

	var app2 = new Vue({
	el: '#app-2',
	data: {
	message: 'You loaded this page on ' + new Date().toLocaleString()
	}
	})

	var app3 = new Vue({
	el: '#app-3',
	data: {
	seen: true
	}
	})

	var app4 = new Vue({
	el: '#app-4',
	data: {
	todos: [
	{ text: 'Learn Javascript' },
	{ text: 'Learn Vue' },
	{ text: 'Build something awesome' }
	]
	}
	})

	var app5 = new Vue({
	el: '#app-5',
	data: {
	message: 'Hello Vue.js!'
	},
	methods: {
	reverseMessage: function() {
	this.message = this.message.split('').reverse().join('')
	}
	}
	})

	var app6 = new Vue({
	el: '#app-6',
	data: {
	message: 'Hello Vue!'
	}
	})

	Vue.component('todo-item', {
	props: ['todo'],
	template: '<li>{{ todo.text }}</li>'
	})

	var app7 = new Vue({
	el: '#app-7',
	data: {
	groceryList: [
	{ id: 0, text: 'Vegetables' },
	{ id: 1, text: 'Cheese' },
	{ id: 2, text: 'Whatever else humans are suppose to eat' }
	]
	}
	})
	</script>
	</body>
	</html>