test8.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VueJS2 Input输入框的数据绑定-vuejs实战教程[云海天教程]</title>
    <meta name="keywords" content="Vue.js 教程,vue教程,新手入门教程,vue实例教程,vue基础教程,vue教程案例实战项目,最全vue项目实战">
    <meta name="description" content="Vuejs Input输入框的数据绑定,vuejs实战教程">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >
	</head>
	<body>
<!-- 模仿后台加载 -->
    <div id="app">
        <!-- 第三步输出 -->
      <template>
<!-- 定义事件一定要在form 上，不要放button 上 -->
        <form action="#" @submit.prevent="login" style="width: 50%;padding-left: 50px;">
          <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email"  id="email" class="form-control" v-model="denglu.email"/>
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password"  id="password" class="form-control" v-model="denglu.password"/>
          </div>
          <div class="form-check">
            <input type="checkbox" id="remember" class="form-check-input" v-model="denglu.remember"/><label for="remember" class="form-check-label">记住我</label>
          </div>

          <button type="submit" class="btn btn-success">点我登录</button>
        </form>
      </template>
{{ denglu }}
    </div>

    <!-- 第一步引入 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <!-- 第二步定义 -->
    <script type="text/javascript">
      let app = new Vue({
        el:"#app",
        data:{
            denglu:{
              email : null,
              password : null,
              remember :false
            }
        },
        methods:{
          login(){
            alert(this.denglu.email + "++" +this.denglu.password + "++" +this.denglu.remember)
            //Ajax 提交
          }
        }
      })

    </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script>
	</body>
</html>