<input type="text" v-model="test1" placeholder="請(qǐng)輸入賬號(hào)" maxlength="11" ?ref="input1" >

this.test1 = this.$refs.input1.value;//獲取input1的值，減少獲取dom節(jié)點(diǎn)的消耗?

<template>
?? ?<div>
?? ??? ?<ul>
?? ??? ??? ?<li>
?? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ?賬號(hào)：
?? ??? ??? ??? ??? ?<input type="text" v-model="test1" placeholder="請(qǐng)輸入賬號(hào)" maxlength="11" onkeyup="value=value.replace(/[^0-9.]/g,'') " ref="input1" @blur="changeName(test1)"><br /> 密碼：
?? ??? ??? ??? ??? ?<input type="password" v-model="test2" placeholder="請(qǐng)輸入密碼" ref="input2" @blur="changeName1(test2)"><br /> 驗(yàn)證碼：
?? ??? ??? ??? ??? ?<input type="text" v-model="test3" placeholder="請(qǐng)?zhí)顚戲?yàn)證碼" ref="input3">
?? ??? ??? ??? ??? ?<button @click="getYzm">{{codeText}}</button><br />
?? ??? ??? ??? ?</div>
?? ??? ??? ?</li>
?? ??? ?</ul>
?? ??? ?<div @click="loginBtn()">點(diǎn)擊登錄</div>
?? ?</div>
</template>

<script type="text/javascript">
?? ?export default {
?? ??? ?data() {
?? ??? ??? ??? ?return {
?? ??? ??? ??? ??? ?test1: '',
?? ??? ??? ??? ??? ?test2: '',
?? ??? ??? ??? ??? ?test3: '',
?? ??? ??? ??? ??? ?codeText: '獲取驗(yàn)證碼',
?? ??? ??? ??? ?}
?? ??? ??? ?},
?
?? ??? ??? ?methods: {
?? ??? ??? ??? ?//獲取驗(yàn)證碼
?? ??? ??? ??? ?getYzm() {
?? ??? ??? ??? ??? ?let reg = /^1[0345789][0-9]{9}$/;
?? ??? ??? ??? ??? ?if(this.test1 == '' || this.test2 == "") {//驗(yàn)證當(dāng)用戶輸入的手機(jī)號(hào)為空或者不正確時(shí)不能進(jìn)行獲取驗(yàn)證碼
?? ??? ??? ??? ??? ??? ?this.$message({
?? ??? ??? ??? ??? ??? ??? ?message: '手機(jī)號(hào)密碼不能為空！',
?? ??? ??? ??? ??? ??? ??? ?type: 'warning'
?? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ?} else if(!reg.test(this.test1)) {
?? ??? ??? ??? ??? ??? ?this.$message.error("請(qǐng)輸入正確的手機(jī)號(hào)");
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?this.timer();
?? ??? ??? ??? ??? ??? ?console.log(this.test1);
?? ??? ??? ??? ??? ?}
?
?? ??? ??? ??? ?},
?? ??? ??? ??? ?timer() {//驗(yàn)證碼倒計(jì)時(shí)
?? ??? ??? ??? ??? ?let num = 60;
?? ??? ??? ??? ??? ?let that = this;
?? ??? ??? ??? ??? ?that.codeText = num + "秒后重新發(fā)送";
?? ??? ??? ??? ??? ?let time = setInterval(function() {
?? ??? ??? ??? ??? ??? ?if(num == 0) {
?? ??? ??? ??? ??? ??? ??? ?clearInterval(time);
?? ??? ??? ??? ??? ??? ??? ?time = null;
?? ??? ??? ??? ??? ??? ??? ?that.codeText = "重發(fā)驗(yàn)證碼";
?? ??? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ??? ?num--;
?? ??? ??? ??? ??? ??? ??? ?that.codeText = num + "秒后重新發(fā)送";
?? ??? ??? ??? ??? ??? ?}
?
?? ??? ??? ??? ??? ?}, 1000);
?? ??? ??? ??? ?},
?? ??? ??? ??? ?//用戶名的失去光標(biāo)判斷
?? ??? ??? ??? ?changeName(userName) {
?? ??? ??? ??? ??? ?let name = userName;
?? ??? ??? ??? ??? ?if(name == '' || name == undefined || name == null) {
?? ??? ??? ??? ??? ??? ?// 用戶名為空時(shí)，input框獲得焦點(diǎn)
?? ??? ??? ??? ??? ??? ?this.$refs.input1.focus();
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?console.log(name);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?//密碼框失去光標(biāo)判斷
?? ??? ??? ??? ?changeName1(pass) {
?? ??? ??? ??? ??? ?if(pass == '' || pass == undefined || pass == null) {
?? ??? ??? ??? ??? ??? ?// 密碼為空時(shí)，input框獲得焦點(diǎn)
?? ??? ??? ??? ??? ??? ?this.$refs.input2.focus();
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?console.log(pass);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?loginBtn() {
?? ??? ??? ??? ??? ?//一般來講，獲取DOM元素，需document.querySelector（".input1"）獲取這個(gè)dom節(jié)點(diǎn)，然后在獲取input1的值。但是用ref綁定之后，我們就不需要在獲取dom節(jié)點(diǎn)了，直接在上面的input上綁定input1，然后$refs里面調(diào)用就行。然后在javascript里面這樣調(diào)用：this.$refs.input1 ?這樣就可以減少獲取dom節(jié)點(diǎn)的消耗了
?? ??? ??? ??? ??? ?this.test1 = this.$refs.input1.value;//獲取input1的值，減少獲取dom節(jié)點(diǎn)的消耗 ? ?
?? ??? ??? ??? ??? ?this.test2 = this.$refs.input2.value;
?? ??? ??? ??? ??? ?this.test3 = this.$refs.input3.value;
?? ??? ??? ??? ??? ?if(this.test3 == '') {
?? ??? ??? ??? ??? ??? ?this.$message.error('請(qǐng)輸入驗(yàn)證碼');
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?this.$message({
?? ??? ??? ??? ??? ??? ??? ?message: '恭喜你，登陸成功！',
?? ??? ??? ??? ??? ??? ??? ?type: 'success'
?? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ?console.log(this.test1);//打印出input框輸入的值
?? ??? ??? ??? ??? ??? ?console.log(this.test2);
?? ??? ??? ??? ??? ??? ?console.log(this.test3);
?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?
?? ??? ??? ?}
?? ?}
</script>

import ElementUi from 'element-ui'
import '../node_modules/element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUi)