清美项目 vue总结

vue绑定表单验证

          <el-form ref="classform" :model="classform" :rules="classRules" label-width="80px">
            <el-form-item label="转入班级" prop="classId">
              <el-select v-model="classform.classId" placeholder="请选择转入的班级" clearable>
                  <el-option
                      v-for="item in educlassList"
                      :key=item.classId
                      :label=item.title
                      :value=item.classId
                     />
              </el-select>
            </el-form-item>
          </el-form>

ref 属性用于给当前组件设置一个引用标识，可以在父组件中通过 $refs 访问到这个组件实例。这通常用于触发某些方法，如表单验证、重置表单等。 

model 属性用于绑定表单的数据模型对象。这个对象包含了表单的所有字段及其值。

rules是绑定的校验时判断的条件

 提交表单验证时，通过refs访问到该实例，然后进行验证，他就会去演这rules 里面的规则

 监听事件

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。

比如 select选择器中的监听事件

 比如我在这里 点击select 框时才触发查询

focus 事件是指当一个输入框（如 <input> 或 <select>）获得焦点时触发的事件。获得焦点通常发生在用户通过点击鼠标或使用键盘的 Tab 键导航到该元素上时。当元素获得焦点时，它通常会被高亮显示（例如，边框颜色的变化或者出现输入光标），并且可以接收用户的输入。