다른 기업에서 Vue와 부트스트랩을 이용한 과제가 나와서 Vue를 간단히 공부해보려 합니다.

새로 공부해서 과제를 완료하기 쉽지 않겠지만 노력해보려 합니다 :)


1. CDN

간단하게 테스트 해보기 위해 CDN으로 시작해보겠습니다.

공식 홈페이지에서 CDN 링크를 index.html파일에 추가하겠습니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </body>
</html>

index.html을 live server로 켜서 콘솔을 확인해보시면 뷰 개발모드 로그가 나옵니다!

image.png


2. Input Text

Vue는 <div id="app"></div>에 외부 뷰를 작성하고,

<script>new View({ el: '#app' })</script> 로 태그를 연결하고 시작합니다.

각 input태그를 연결하기 위해서 v-model의 값과 data 내부의 객체 키와 일치시켜줍니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="text" id="user_id" v-model="userId" />
      <input type="password" id="user_password" v-model="userPassword" />
      <button>로그인</button>
      <br />
      아이디: {{ userId }}
      <br />
      비밀번호: {{ userPassword }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            userId: '',
            userPassword: ''
          };
        }
      });
    </script>
  </body>
</html>

바로 확인해보면 이렇게 쉽게 input태그가 텍스트와 바로 연결됩니다!

image.png