vue2.0中新增一个按钮的流程以及其中部分方法

<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="80px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('表单提交成功！');
        } else {
          alert('表单校验失败！');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
  },
};
</script>
其中<el-buttom @click="">定义了一个方法，当用户点击这个按钮时，执行submitForm方法，submitForm方法在methods中定义
      submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('表单提交成功！');
        } else {
          alert('表单校验失败！');
          return false;
        }
      });
    },
this.$refs.form.validate的作用为<el-form>表单中遍历所有绑定了prop属性的<el-form-item>表单项