e0ne/single-page-vuejs-app.html

## single-page-vuejs-app.html
<html lang="en">
  <head>
    <title>Single Page VueJS Minimal Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" crossorigin="anonymous">
  </head>

  <body>
    <div id="application">
      <section class="section" v-if="loggedIn">
        <div class="container">
          <h1 class="title">Current Account</h1>
            <p>Email: {{ email }}</p>
            <p>Name: {{ password }}</p>
        </div>
      </section>

      <section class="section" v-else>
        <div class="container">
          <h1 class="title">Login Form</h1>
          <form>
            <div>
              <label for="email">Email address</label>
              <input type="email" id="email" aria-describedby="emailHelp" placeholder="Enter email" v-model="email">
            </div>
            <div>
              <label for="password">Password</label>
              <input type="password" id="password" placeholder="Password" v-model="password">
            </div>
            <button type="button" class="btn btn-primary" v-on:click="login">Login</button>
          </form>
        </div>
      </section>
    </div>
    <script type="application/javascript">
      const app = new Vue({
        el: '#application',
        data: {
          email: '',
          password: '',
          loggedIn: false
        },
        methods: {
          login() {
            this.loggedIn = true;
          }
      }});
    </script>
  </body>
</html>
	<html lang="en">
	<head>
	<title>Single Page VueJS Minimal Example</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" crossorigin="anonymous">
	</head>

	<body>
	<div id="application">
	<section class="section" v-if="loggedIn">
	<div class="container">
	<h1 class="title">Current Account</h1>
	<p>Email: {{ email }}</p>
	<p>Name: {{ password }}</p>
	</div>
	</section>

	<section class="section" v-else>
	<div class="container">
	<h1 class="title">Login Form</h1>
	<form>
	<div>
	<label for="email">Email address</label>
	<input type="email" id="email" aria-describedby="emailHelp" placeholder="Enter email" v-model="email">
	</div>
	<div>
	<label for="password">Password</label>
	<input type="password" id="password" placeholder="Password" v-model="password">
	</div>
	<button type="button" class="btn btn-primary" v-on:click="login">Login</button>
	</form>
	</div>
	</section>
	</div>
	<script type="application/javascript">
	const app = new Vue({
	el: '#application',
	data: {
	email: '',
	password: '',
	loggedIn: false
	},
	methods: {
	login() {
	this.loggedIn = true;
	}
	}});
	</script>
	</body>
	</html>