vue实现登陆功能

快来打我* 2022-05-13 04:22 224阅读 0赞

最近在学习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 运行项目

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue实现验证码登陆

![647bd9800edf458a8b1de0cf8d61ec02.jpeg][] 我们在使用 vue进行前端开发时，都需要登录验证，而在登录的过程中，用户需要输入自己的用

ゝ一纸荒年。/ 2023年10月11日 22:13/ 0 赞/ 39 阅读

相关 springboot小实操（登陆功能实现）

springboot小实操（登陆功能实现）新建数据库和表新建springboot项目 application.yml 实体类admin

Bertha 。/ 2022年12月04日 01:28/ 0 赞/ 165 阅读

相关 Vue实现复制功能

Vue实现复制功能代码 -------------------- 代码 var app = new Vue({ el: 'do

蔚落/ 2022年10月11日 13:49/ 0 赞/ 227 阅读

相关网站实现QQ登陆功能

一、Introduction 一般网站具有使用qq登陆到本站的功能。二、实现步骤 1. 网站在外网且有外网域名也就是网站上线。首先，注册一个域名。

矫情吗；*/ 2022年06月02日 12:20/ 0 赞/ 263 阅读

相关 vue实现登陆功能

最近在学习vue，发现了vue的好多坑，比如怎么更好的获取input框输入的值而减少获取dom节点的消耗，以及怎么绑定一个函数，去执行业务逻辑。 1、首先说说怎么获取inp

快来打我*/ 2022年05月13日 04:22/ 0 赞/ 225 阅读

相关 java实现跨域登陆功能

目的：java实现跨域登陆功能工具： 1、前台 vue + axios 2、后台 springboot + mybatis + sping

- 日理万妓/ 2022年05月10日 08:48/ 0 赞/ 355 阅读

相关 Java实现网站的自动登陆功能

-------------------- 我在前些天刚开始接触JavaWeb的时候，感觉这写很高大上的东西自己怎么可能做出来，从我刚开始做出我第一个登陆的代码的时候可以说是历

╰+攻爆jí腚メ/ 2022年03月25日 08:51/ 0 赞/ 242 阅读

相关使用集合实现注册登陆功能 java

使用集合实现注册登陆功能 java / 需求：使用集合实现注册登陆功能 1: 提示用户选择功能， A(注册) B(登陆)

向右看齐/ 2022年03月19日 02:28/ 0 赞/ 328 阅读

相关 vue实现搜索功能

> 前言：最近小编也是刚跳槽新的公司一个月，前端技术栈是vue+element也是市面上比较常用的框架之一了，同时也花费一点时间总结一下最近的坑，react转vue的一个过程确

Love The Way You Lie/ 2022年01月22日 06:01/ 0 赞/ 379 阅读

相关 SSH2框架实现登陆功能

SSH2实现登陆功能一、框架的搭建二、数据库设计三、各配置文件更新

傷城~/ 2021年09月28日 03:40/ 0 赞/ 322 阅读