vue component

login.html

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="login-example">
  <user-login></user-login>
</div>

<script type="text/x-template" id="login-template">
  <div id="login-template">
    <div>
      <input type="text" placeholder="ログインID" v-model="userid">
    </div>
    <div>
      <input type="password" placeholder="パスワード" v-model="password">
    </div>
    <button @click="login()">ログイン</button>
  </div>
</script>

<script>
  Vue.component('user-login', {
    template: '#login-template',
    data: function() {
      return {
        userid: '',
        password: ''
      }
    },
    methods: {
      login: function() {
        auth.login(this.userid, this.password)
      }
    }
  })

  var auth = {
    login: function(id, pass) {
      window.alert("userid:" + id + "\n" + "password:" + pass);
    }
  }

  new Vue({
    el: "#login-example"
  });
</script>