vue实现登录功能,vue实现用户登录
本文主要详细介绍vue的登录功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了vue登录功能的具体代码，供大家参考。具体内容如下
最近在学习vue的时候发现vue有很多漏洞，比如如何更好的获取输入框的值，减少dom节点的消耗，如何绑定一个函数来执行业务逻辑。
1、首先说说怎么获取input框的值
vue中提供了一个ref属性。这里需要用html代码将这个输入框与ref属性绑定，然后通过js代码获取input的值：
HTML代码：
type= text v-model= test1 placeholder=请输入账号 maxlength=11 ref=input1
Js代码：
this.test1=this。$ refs . input 1 . value；//获取input1的值以减少获取dom节点的消耗
2、如何利用vue实现登陆功能：
这里@click用来绑定一个点击事件。
Html代码：
模板
差异
保险商实验所
里
差异
账号：
type= text v-model= test1 placeholder=请输入帐号 maxlength= 11 onkeyup= value=value . replace(/[0-9。]/g， ) ref= input1 @ blur= changename(
type= password v-model= test 2 placeholder=请输入密码 ref= input 2 @ blur= change name 1(test 2) br/验证码：
type= text v-model= test3 placeholder=请填写验证码 ref=input3
button @ click= getYzm“{ codeText } }/button br/
/div
/李
/ul
Div @click=loginBtn () Click登录/div
/div
/模板
Js代码：data是用来存储数据的，上面定义的事件，比如click事件，都存储在方法中。注意vue定义事件的方式。
这个。$message(请输入验证码)；//这是element提供的消息提示，类似layer . msg()；
脚本类型=文本/javascript
导出默认值{
data() {
返回{
测试1: ，
测试2: ，
测试3: ，
文本：“获取验证码”，
}
},
方法：{
//获取验证码
getYzm() {
设reg=/^1[0345789][0-9]{9}$/；
if(this . test1== this . test2== ){/验证用户输入的手机号码为空或不正确时无法获取验证码。
这个。$message({
消息：“手机号码密码不能为空！”,
类型：“警告”
});
} else if(！reg.test(this.test1)) {
这个。$message.error(请输入正确的手机号码)；
}否则{
this . timer()；
console . log(this . test1)；
}
},
Timer() {//验证码倒计时
设num=60
让那个=这个；
That.codeText=num 以秒为单位重新发送；
设time=setInterval(function() {
if(num==0) {
clearInterval(时间)；
time=null
That.codeText=重新发送验证码；
}否则{
num-；
That.codeText=num 以秒为单位重新发送；
}
}, 1000);
},
//失去对用户名的光标判断
changeName(用户名){
let name=用户名；
if(name== name==undefined name==null){
//当用户名为空时，输入框获得焦点
这个。$ refs . input 1 . focus()；
}否则{
console.log(名称)；
}
},
//密码框失去光标判断。
changeName1(通过){
if(pass== pass==undefined pass==null){
//当密码为空时，输入框获得焦点
这个。$ refs . input 2 . focus()；
}否则{
console . log(pass)；
}
},
loginBtn() {
//一般来说，获取dom元素需要document . query selector( . input1 )获取这个DOM节点，然后获取input 1的值。但是和ref绑定后，我们不需要获取dom节点，只需要将input1绑定到上面的输入，在$refs中调用即可。然后用javascript调用这个：this。$refs.input1以减少获取dom节点的消耗。
this.test1=this。$ refs . input 1 . value；//获取input1的值以减少获取dom节点的消耗
this.test2=this .$参考文献。输入2。价值；
this.test3=this .$参考文献。输入3。价值；
if(this.test3==) {
这个message.error(请输入验证码);
}否则{
这个消息({
消息： 恭喜你，登陆成功!,
类型："成功"
});
控制台。日志(这个。test1)；//打印出投入框输入的值
控制台。日志(这个。测试2)；
控制台。日志(这个。测试3)；
}
},
}
}
/脚本
某视频剪辑软件安装元素-用户界面
1.安装命令：cnpm安装元素-ui -保存
2.在主页。射流研究…中加入如下代码：
从"元素-用户界面"导入ElementUi
导入./node _ modules/element-ui/lib/theme-白垩/index。 CSS
Vue.use(ElementUi)
3.输入命令：国家预防机制运行开发运行项目
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。