[Vue3 + vite + tailwindCSS] 트위터 클론코딩 - 회원가입 페이지

1. template에 html코드 작성하기 

<template>

  <div class="flex flex-col items-center space-y-4 mt-10">

    <i

      :class="`fab fa-twitter text-4xl text-primary ${

        loading ? 'animate-bounce' : ''

      }`"

    ></i>

    <span class="text-2xl font-bold">트위떠 회원가입</span>

    <input

      v-model="username"

      type="email"

      class="rounded w-96 px-4 py-3 border border-gray-200 focus:ring-2 focus:outline-none focus:border-primary"

      placeholder="이메일"

    />

    <input

      v-model="email"

      type="text"

      class="rounded w-96 px-4 py-3 border border-gray-200 focus:ring-2 focus:outline-none focus:border-primary"

      placeholder="아이디"

    />

    <input

      v-model="password"

      type="password"

      class="rounded w-96 px-4 py-3 border border-gray-200 focus:ring-2 focus:outline-none focus:border-primary"

      placeholder="비밀번호"

    />

    <button

      @click="onRegister"

      class="w-96 rounded bg-primary text-white py-4 hover:bg-dark"

    >

      회원가입

    </button>

    <button class="text-primary">계정이 이미 있으신가요 로그인하기</button>

  </div>

</template>

 

 

2. input태그에 v-model을 사용하여 양방향 바인딩을 구현할 수 있도록 한다. 

 

그리고 script로 넘어와서 ref 를 import하고 각 변수를 ref를 사용하여 초기값을 설정한다. 

처음 시작 시 username, email, password는 아무런 값이 없으니 ""으로 공백으로 지정한다. 

 

input에서 v-model을 사용하여 input의 값이 변경되면 해당 변수에 잘 저장되는지 테스트 하기위해 

 

그리고 onRegister함수를 만들어서 입력한 값을 회원가입을 클릭하면 입력된 값이 잘 저장됐는지 console로 찍어본다. 

 

중요한것은 모든 함수와 변수는 return을 해줘야한다는 점 !

import { ref } from "vue";

export default {

  setup() {

    // 변수 ref(초기값) usestate 와 동일

    const username = ref("");

    const email = ref("");

    const password = ref("");

    const loading = ref(false);

    //회원가입 클릭 시 실행되는 함수

    const onRegister = () => {

      console.log(username.value, email.value, password.value);

    };

    return {

      username,

      email,

      password,

      loading,

      onRegister,

    };

  },

};

 

 

f12 개발자 도구로 확인해본다. 

이메일 , 아이디, 비밀번호를 입력 후 회원가입 버튼을 클릭했을 경우 오른쪽 화면과 같이 잘 출력되는 것이 확인된다. 

 

 

 

 

 

 

 

https://ko.vuejs.org/guide/components/v-model

Vue.js