前端学习（八）页面编写——页面绑定数据和事件

接着前面的内容，前面只有一个样子，什么功能都没有，本文就是给他添加一下最基本的功能。
一下是实现的代码（<style>还是原来的，就不贴出来了）：

<template>
  <div>
    <p><span>账号：</span>
      <el-input v-model="form.username" placeholder="请输入手机号或邮箱" class="myInput"></el-input></p>
    <p><span>密码：</span>
      <el-input v-model="form.password" placeholder="请输入密码"  show-password class="myInput"></el-input></p>
    <p>
      <el-button @click="submitForm(form)">登录</el-button>
    </p>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    }
  },
  methods: {
    submitForm(form) {
      let flag = false;
      if (form.username === "admin") {
        flag = form.password === "admin";
      } else {
        flag = false;
      }
      if (flag){
        this.$message({
          message:'登陆成功',
          type:"success"
        });
      }else {
        this.$message({
          message:'账号或密码错误',
          type:"error"
        });
      }
    }
  }
}
</script>

根据网上查到的资料，我写了上面的代码，主要的变化有下面几个：

1. 在script里添加了“data”，添加了集合“form”，其中有两个属性“username”和“password”，意思很明了，就是要把页面上输入的账号和密码给绑定下来。这个应该不难理解。
2. 而绑定呢，是靠<el-input>的属性“v-model”
3. 其次再在script中添加了methods， 其中定义了一个方法“submitForm”，该方法传入一个参数“form”，其实就是要账号密码。然后里面做了最简单的逻辑判断。然后根据结果弹窗提示。
4. 最后将该方法绑定到登录button中，使用button自带的click事件“@click=“submitForm(form)””，这样每次点击登录都会调用该方法。

最基本的登录界面的效果就出来了。

路由跳转

上面登录成功后就弹个窗提示，然后什么也没了，不符合现在常见的现象，一般登陆成功后会跳转到首页或者是刚才访问的页面，所以我们这里也在登录成功后做跳转到首页。其实很简单：

      if (flag){
        this.$router.push("/"); // 跳转到首页
        this.$message({
          message:'登陆成功',
          type:"success"
        });
      }

就在上面的代码上加了一行，其他都不用动。这样就可以了。

enter提交表单功能

最近在测试这个登录功能时，按照老习惯，填完信息就回车提交，结果没有这个功能，老是要鼠标点一下登录按钮才能提交，很烦，所以做个识别回车键的功能。
我本来以为是个很简单的功能，element应该有封装这些常用的事件。事实上确实也有封装，只是不是理解的那样。

功能实现（简单版）

先直接将最终功能的实现吧：

    <p>
      <span>密码：</span>
      <el-input @keyup.enter.native="submitForm(form)"
                v-model="form.password"
                placeholder="请输入密码"
                show-password
                class="myInput"></el-input>
    </p>

在“密码”那个input里，添加属性@keyup.enter.native=“submitForm(form)”，其他没变，这样在填完密码的时候回车就会调用submitForm(form)方法。

遇到的坑

我最开始的理解是，回车是绑定给“登录”按钮的监听事件，所以把@keyup.enter.native="submitForm(form)"加在button上，但是死活不生效。
网上很多资料都在讲，不生效是因为没加“.native”的问题，我就一直在各种搜，但是都找不到答案，就看到几乎所有文章都说加了native是可以的，他们代码是用的<el-input>
所以我就把这个事件绑到input上，果然就行了，看来是button不支持这么做。

功能实现（复杂版）

查资料的时候，最开始看到的实现方法都是比较复杂的，要写监听事件，我尝试完确实也可以，只是稍微麻烦一点，这里也记录一下。

<script>
export default {
  name: "login",
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    }
  },
  methods: {
    submitForm(form) {
	// 此处节省篇幅，省去内容
    },
    // 按键后调用该方法
    keyDown(e){
      //如果是回车则执行登录方法
      if(e.keyCode === 13){
        this.submitForm(this.form)
      }
    },
  },
  mounted() {
    //绑定事件
    window.addEventListener('keydown',this.keyDown);
  },

  destroyed() {
    // 离开该页面后销毁监听事件，否则到别的页面还在监听
    window.removeEventListener('keydown',this.keyDown,false);
  }
}
</script>

只需要修改<script>，添加了keyDown(e)，mounted()和destroyed()，其实就是个按键监听事件，只要在这个页面上都在监听，效果就没有简单版的好。不过以后在别的场合用得着。只是注意一定要记得destroyed。