vue登录界面用户名，密码未输入，点击登录自动获取焦点

1.首先要使得第一个文本框自动获取焦点。然后每一个后面加回车事件 。(iviewUI组件库为例) 

<Form ref="loginForm" :model="formItem" :label-width="80" :rules="rules">
	<FormItem prop="userName" label="账号:"><!--autofocus页面加载自动获取焦点-->
		<Input v-model="formItem.userName" autofocus ref="userName" size="large" placeholder="请输入账号" @keyup.enter.native = "handleSubmit()"></Input>
	</FormItem>
	<FormItem prop="password" label="密码:">
		<Input v-model.trim="formItem.password" ref="pass" type="password" size="large" placeholder="请输入密码" @keyup.enter.native = "handleSubmit()"></Input>
	</FormItem>
	<FormItem label="验证码:" prop="code" class='code'>
		<Col span="12">
		<Input v-model="formItem.code" size="large" ref="code" placeholder="请输入验证码" @keyup.enter.native = "handleSubmit()"></Input>
		</Col>
		<Col span="12">
		<img style="cursor: pointer;border-radius: 5px;height:36px;float:right" class="codebtn" v-bind:src="formItem.urlcodeimg" title="看不清，点击换一张" v-on:click="getcodeimgurl()" />
		</Col>
	</FormItem>					
	<FormItem>
		<Button type="primary" long @click = "handleSubmit">
           <span v-if="!loading2">登录</span>
            <span v-else>登录中...</span>
		</Button>
	</FormItem>			
</Form>

2.用this.$refs.******.focus()来使得用户名，密码未输入时候，回车或点击登录后获取焦点

   handleSubmit() {   
      if (!this.formItem.username) {
        this.$Message.error("请填写用户名称")//iview的写法
        this.$refs.userName.focus()
      } else if (!this.formItem.password) {
        this.$Message.error("请填写密码")
        this.$refs.pass.focus()
      } else if (!this.formItem.captcha) {
        this.$Message.error("请填写验证码")
        this.$refs.code.focus()
      }
   }