This article provides a Vue-based front-end login registration form implementation solution, suitable for beginners. 1. Use Vue to manage the overall status and switch login registration interface; 2. Create login and registration components that contain username and password input items and switch links respectively; 3. Handle login success and exit logic in the main instance; 4. The form implements data binding and basic verification through v-model; 5. It can expand integrated backend requests or enhance front-end verification functions.

sure. Below is a simple Vue login and registration form implementation idea, suitable for developers who are just getting started with Vue. They do not require complex framework knowledge or back-end support (only implementing the front-end interface and basic logic).

Basic structure and preparation

First, make sure you have introduced Vue into your project, whether it is a CDN method of Vue 2 or Vue 3, or a project created through the Vue CLI.

Let's prepare the basic HTML structure first:

 <div id="app">
  <div v-if="!isLoggedIn">
    <login-form v-if="isLogin" @switch-to-register="isLogin = false"></login-form>
    <register-form v-else @switch-to-login="isLogin = true"></register-form>
  </div>
  <div v-else>
    <p>Welcome back, {{ username }}! </p>
    <button @click="logout">Login</button>
  </div>
</div>

Then define two components: LoginForm and RegisterForm , which are used for the login and registration interfaces respectively.

Implement the login form component

The login form requires two fields: the username and password, and a "Login" button, and provides a link to switch to the registration page.

 const LoginForm = {
  template: `
    <form @submit.prevent="login">
      <h3>Login</h3>
      <input v-model="username" placeholder="username" required />
      <input v-model="password" type="password" placeholder="password" required />
      <button type="submit">Login</button>
      <p>No account? <a href="#" @click.prevent="$emit(&#39;switch-to-register&#39;)">Register</a></p>
    </form>
  `,
  data() {
    return {
      username: &#39;&#39;,
      password: &#39;&#39;
    };
  },
  methods: {
    login() {
      // Simulate login logic if (this.username && this.password) {
        this.$emit(&#39;login-success&#39;, this.username);
      } else {
        alert(&#39;Please enter username and password&#39;);
      }
    }
  }
};

Implement the registration form component

Registration forms usually require a username, password, confirmation password, as well as a submit button and a link to switch back to login.

 const RegisterForm = {
  template: `
    <form @submit.prevent="register">
      <h3>Register</h3>
      <input v-model="username" placeholder="username" required />
      <input v-model="password" type="password" placeholder="password" required />
      <input v-model="confirmPassword" type="password" placeholder="confirmPassword" required />
      <button type="submit">Register</button>
      <p>Already have an account? <a href="#" @click.prevent="$emit(&#39;switch-to-login&#39;)">Login</a></p>
    </form>
  `,
  data() {
    return {
      username: &#39;&#39;,
      password: &#39;&#39;,
      confirmPassword: &#39;&#39;
    };
  },
  methods: {
    register() {
      if (!this.username || !this.password || !this.confirmPassword) {
        alert(&#39;Please fill in all fields&#39;);
        return;
      }
      if (this.password !== this.confirmPassword) {
        alert(&#39;The password entered twice is inconsistent&#39;);
        return;
      }
      // Simulate registration successfully alert(&#39;Register successful&#39;);
      this.$emit(&#39;switch-to-login&#39;);
    }
  }
};

The main Vue instance controls the overall state

In the main Vue instance, we manage the login status, the currently displayed form type, and the username after the user login.

 new Vue({
  el: '#app',
  components: {
    'login-form': LoginForm,
    'register-form': RegisterForm
  },
  data() {
    return {
      isLogin: true,
      isLoggedIn: false,
      username: ''
    };
  },
  methods: {
    loginSuccess(username) {
      this.isLoggedIn = true;
      this.username = username;
    },
    logout() {
      this.isLoggedIn = false;
      this.username = '';
      this.isLogin = true;
    }
  }
});

Tips and notes

• The form verification part can be more complete, such as using Vue's v-validate plug-in or writing verification functions yourself.
• If you plan to connect to the backend API, you can use axios or fetch to send the request in login() and register() methods.
• Using v-model can simplify bidirectional binding, but be careful to use props and events when passing data between components.
• Page switching can be done with v-if to control whether the component is rendered, or v-show can be used to control display and hide.

Basically that's it. You can copy the above code into an HTML file and run it to see the effect. Although there is no backend, it can simulate the basic process of user login and registration.

The above is the detailed content of How to build a simple login and registration form with Vue?. For more information, please follow other related articles on the PHP Chinese website!