Front-End Frame Vue (7)--vue+elementui: Easy Login Login Frame refactoring

Goal: Vue to implement a simple login box with username (user) and password (password), with simple checksum.

UI Framework to use:elementui

The advantage of the Vue login box is that you need to set up a data model and render it automatically without having to manipulate the DOM. Bidirectional data binding.

Resolution point for the Login box: How data Binds login checksums

First code:

<template> <div class= "dialog" > <div class= "loginpage" >  
<style scoped>
    html,body{
        margin:0;
        padding:0;
        Position:relative
    }
    . dialog{
        width:100%;
        height:100%;
        Background:rgba (0,0,0,.8);
    loginpage{
        Position:absolute;
        top:50%;
        left:50%;
        Margin-top: -150px;
        Margin-left: -175px;
        width:350px;
        min-height:300px;
        padding:30px 20px 20px;
        border-radius:8px;
        Box-sizing:border-box;
        Background-color: #fff;
    LoginPage p{
        color:red;
        Text-align:left;
    }
</style>
 
that's not much to say about style. Script Section

<script> import Axios from ' Axios ' export default {name: ', data () {return { FormName: {//The parameter in the form User: ', Usererror: ', pass Word: ', Passworderror: ', bedisabled:true}, b
        eshow:false//Pass value to Parent component},/*props:[' Fromparent '],*/
                Methods: {resetform:function () {this.formName.user = ';
                This.formName.userError = ';
                This.formName.password = ';
            This.formName.passwordError = '; }, Submitform:function (formName) {//Communicates value with parent component//this. $emit (' showstate ', [this.b
                    Eshow,this.formname.user]//Submit user password var user = This.formName.user, Password = This.formName.password; Console.log (User,password) Axios.get ('.. /..
                        /src/php/login.php?user= ' +user+ ' &password= ' +password). Then (function (res) { Console.log (RES)}). catch (function () {})}
                    , Inputblur:function (erroritem,inputcontent) {if (Erroritem = = ' user ') {
                        if (inputcontent = = ') {this.formName.userError = ' user name cannot be empty '}else{
                    This.formName.userError = ';
                        }}else if (erroritem = = ' password ') {if (inputcontent = = = ") { This.formName.passwordError = ' Password cannot be empty '}else{this.formName.passwordError
                    = ''; Modify the status of the button if (This.formnamE.user!= ' && this.formName.password!= ') {this.formName.beDisabled = false;
                }else{this.formName.beDisabled = true; {}}}} </script>
 
Explain:
1. The data in this form is all in the FromName object.
2, for the input box binding data, using V-model two-way binding, the effect is similar to the on (' input ') event in jquery.
3, check the trigger event: The use of this side of the blur when the trigger check, error prompted binding p elements.
4, in the Blur event trigger at the same time, to determine whether the submit button can be submitted, the initial change is not submitted by default disabled.
5, completes the input and the verification success, clicks the submission button, initiates the asynchronous request, this side uses Axios.get ().

Effect:

A simple login form will be available for this.

Hope for so cute, but also to see my blog you have a little help.