하루하루 살아남기

[Vue.js] 시작하기 본문

개발/Vue.js

[Vue.js] 시작하기

막막이 2021. 4. 8. 00:02
반응형

Vue

vue.js는 데이터와 뷰를 연결해 주는 역할입니다.

vue는 MVVM(Model-View-View-Model) 방식을 기본으로 만들어져 있습니다.

 

 

설치하기

 

뷰를 설치하는 방법에는 두가지가 있습니다.

 

  1.  CDN을 이용하여 설치
  2. Vue-Cli로 시작하는 방법

Vue-Cli로 시작하는 두번째방법은 대규모 어플리케이션을 구축시에 사용하는 방법이므로 CDN으로 설치하겠습니다.

 

v3.ko.vuejs.org/guide/introduction.html

 

 

시작하기 | Vue.js

시작하기 NOTE 이미 Vue 2를 알고 있고 Vue 3의 새로운 점을 배우고 싶으신가요? Migration Guide를 확인하세요! Vue.js가 무엇인가요? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를

v3.ko.vuejs.org

 

공식문서에서는 아래 코드를 .html문서에 삽입하면 된다고 합니다.

테스트용 html문서를 만들어보겠습니다.

 

 

 

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="https://unpkg.com/vue@next"></script>
      <title>Vue Test HTML 문서</title>
    </head>
    <body>

      <h2>왼쪽 & 오른쪽</h2>

      <div id="test">

        <p>현재 {{arrow}} 입니다. </p>

        <div>

          <button v-on:click="arrowLeft">왼쪽</button>
          <button v-on:click="arrowRight">오른쪽</button>

        </div>

      </div>

    </body>
    </html>

 

HTML문서를 만들었습니다.

아직 script태그가 없기때문에 크롬에서 실행시켜도 아무런 동작을 하지 않습니다.

 

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="https://unpkg.com/vue@next"></script>
      <title>Vue Test HTML 문서</title>
    </head>
    <body>

      <h2>왼쪽 & 오른쪽</h2>

      <div id="test">

        <p>현재 {{arrow}} 입니다. </p>

        <div>

          <button v-on:click="arrowLeft">왼쪽</button>
          <button v-on:click="arrowRight">오른쪽</button>

        </div>

      </div>

    </body>
    <script>

        const Counter = {
          data() {
            return {
              arrow: '왼쪽'
            }
          },
          methods: {
            arrowLeft() {
              this.arrow = '왼쪽';
            },
            arrowRight() {
              this.arrow = '오른쪽';
            }
          }
        }


        Vue.createApp(Counter).mount('#test')
    </script>
    </html>

 

위와같이 body 밑에 script 태그를 추가해줍니다.

 

 

728x90
반응형
Comments