mlankenau/vue_sample.html

## vue_sample.html
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.js" charset="utf-8">
    </script>
  </head>
  <body>
    <template id="login-template">
      <h1>Login</h1>
      <div id="msg">{{ msg }}</div>
      <div>
        <label for="name">Name</label>
        <input name="name" v-model="name" type="text">
      </div>
      <div>
        <label for="password">Password</label>
        <input name="password" v-model="password" type="password">
      </div>

      <button v-on:click="login">Login</button>
      {{ counter }}
    </template>

    <template id="lobby-template">
      <h1>Lobby</h1>
      <ul>
        <li v-for="player in players">{{player}}</li>
      </ul>
      <button v-on:click="logout">logout</button>
    </template>

    <div id="main">
      <login v-if="mode =='login'"></login>
      <lobby v-if="mode =='lobby'"></lobby>
    </div>

    <script type="text/javascript" charset="utf-8">
      Vue.component('login', {
        template: "#login-template",
        data: function() { return {counter: 0} },
        methods: {
          login: function() {
            if (this.name == "marcus" && this.password == "bla") {
              console.log("success")
              this.$dispatch('login-success', this.name);
            } else {
              this.msg = "Invalid password"
            }
          },
          timer: function() {
            this.counter = this.counter + 1;
            setTimeout(this.timer.bind(this), 1000);
          }
        },
        created: function() {
          console.log("created event", this);
          setTimeout(this.timer.bind(this), 1000);
        }
      });

      Vue.component('lobby', {
        template: "#lobby-template",
        data: function() {
          console.log("entered lobby")
          setTimeout
          return {
            players: ["Hans", "Wurst", "Paul"]
          }
        },
        methods: {
          logout: function() {
            this.$dispatch('logout', this.name);
          }
        }
      });

      new Vue({
        el: "#main",
        data: {
          mode: 'login'
        },
        events: {
          'login-success': function() {
            this.mode = 'lobby';
          },
          'logout': function() {
            this.mode = 'login';
          }
        }
      });
    </script>
  </body>
</html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<title></title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.js" charset="utf-8">
	</script>
	</head>
	<body>
	<template id="login-template">
	<h1>Login</h1>
	<div id="msg">{{ msg }}</div>
	<div>
	<label for="name">Name</label>
	<input name="name" v-model="name" type="text">
	</div>
	<div>
	<label for="password">Password</label>
	<input name="password" v-model="password" type="password">
	</div>

	<button v-on:click="login">Login</button>
	{{ counter }}
	</template>

	<template id="lobby-template">
	<h1>Lobby</h1>
	<ul>
	<li v-for="player in players">{{player}}</li>
	</ul>
	<button v-on:click="logout">logout</button>
	</template>

	<div id="main">
	<login v-if="mode =='login'"></login>
	<lobby v-if="mode =='lobby'"></lobby>
	</div>

	<script type="text/javascript" charset="utf-8">
	Vue.component('login', {
	template: "#login-template",
	data: function() { return {counter: 0} },
	methods: {
	login: function() {
	if (this.name == "marcus" && this.password == "bla") {
	console.log("success")
	this.$dispatch('login-success', this.name);
	} else {
	this.msg = "Invalid password"
	}
	},
	timer: function() {
	this.counter = this.counter + 1;
	setTimeout(this.timer.bind(this), 1000);
	}
	},
	created: function() {
	console.log("created event", this);
	setTimeout(this.timer.bind(this), 1000);
	}
	});

	Vue.component('lobby', {
	template: "#lobby-template",
	data: function() {
	console.log("entered lobby")
	setTimeout
	return {
	players: ["Hans", "Wurst", "Paul"]
	}
	},
	methods: {
	logout: function() {
	this.$dispatch('logout', this.name);
	}
	}
	});

	new Vue({
	el: "#main",
	data: {
	mode: 'login'
	},
	events: {
	'login-success': function() {
	this.mode = 'lobby';
	},
	'logout': function() {
	this.mode = 'login';
	}
	}
	});
	</script>
	</body>
	</html>