vue实现登陆功能
作者：缘飞梦
这篇文章主要为大家详细介绍了vue实现登陆功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现登陆功能的具体代码，供大家参考，具体内容如下
最近在学习vue，发现了vue的好多坑，比如怎么更好的获取input框输入的值而减少获取dom节点的消耗 ，以及怎么绑定一个函数，去执行业务逻辑。
1、首先说说怎么获取input框的值
vue中提供了一个ref属性，这里需要在html代码中用ref属性来绑定这个input框，再通过js代码来获取input的值：
HTML代码：
<input type="text" v-model="test1" placeholder="请输入账号" maxlength="11" ref="input1" >
js代码：
this.test1 = this.$refs.input1.value;//获取input1的值，减少获取dom节点的消耗
2、如何利用vue实现登陆功能：
这里用到@click来绑定一个点击事件
html代码：
<template>
<div>
<ul>
<li>
<div>
账号：
<input type="text" v-model="test1" placeholder="请输入账号" maxlength="11" onkeyup="value=value.replace(/[^0-9.]/g,'') " ref="input1" @blur="changeName(test1)"><br /> 密码：
<input type="password" v-model="test2" placeholder="请输入密码" ref="input2" @blur="changeName1(test2)"><br /> 验证码：
<input type="text" v-model="test3" placeholder="请填写验证码" ref="input3">
<button @click="getYzm">{{codeText}}</button><br />
</div>
</li>
</ul>
<div @click="loginBtn()">点击登录</div>
</div>
</template>js代码：data用来存放数据，methods中存放上面定义的事件，如click事件。需要注意的是vue定义事件的写法。
this.$message('请输入验证码');//这个是element提供的一个消息提示，类似于layer.msg();
<script type="text/javascript">
export default {
data() {
return {
test1: '',
test2: '',
test3: '',
codeText: '获取验证码',
}
},
methods: {
//获取验证码
getYzm() {
let reg = /^1[0345789][0-9]{9}$/;
if(this.test1 == '' || this.test2 == "") {//验证当用户输入的手机号为空或者不正确时不能进行获取验证码
this.$message({
message: '手机号密码不能为空！',
type: 'warning'
});
} else if(!reg.test(this.test1)) {
this.$message.error("请输入正确的手机号");
} else {
this.timer();
console.log(this.test1);
}
},
timer() {//验证码倒计时
let num = 60;
let that = this;
that.codeText = num + "秒后重新发送";
let time = setInterval(function() {
if(num == 0) {
clearInterval(time);
time = null;
that.codeText = "重发验证码";
} else {
num--;
that.codeText = num + "秒后重新发送";
}
}, 1000);
},
//用户名的失去光标判断
changeName(userName) {
let name = userName;
if(name == '' || name == undefined || name == null) {
// 用户名为空时，input框获得焦点
this.$refs.input1.focus();
} else {
console.log(name);
}
},
//密码框失去光标判断
changeName1(pass) {
if(pass == '' || pass == undefined || pass == null) {
// 密码为空时，input框获得焦点
this.$refs.input2.focus();
} else {
console.log(pass);
}
},
loginBtn() {
//一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了
this.test1 = this.$refs.input1.value;//获取input1的值，减少获取dom节点的消耗
this.test2 = this.$refs.input2.value;
this.test3 = this.$refs.input3.value;
if(this.test3 == '') {
this.$message.error('请输入验证码');
} else {
this.$message({
message: '恭喜你，登陆成功！',
type: 'success'
});
console.log(this.test1);//打印出input框输入的值
console.log(this.test2);
console.log(this.test3);
}
},
}
}
</script>vue安装element-ui
1.安装命令：cnpm install element-ui --save
2.在main.js中加入如下代码：
import ElementUi from 'element-ui' import '../node_modules/element-ui/lib/theme-chalk/index.css' Vue.use(ElementUi)
3. 输入命令：npm run dev 运行项目
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。