Vue를 이용한 DOM 상호작용

이번 단원 강의를 들으며 뷰의 기초 문법에 대해 공부했다. 전에 리액트를 한 번 조금 공부해 본 적이 있어서 비슷하게 공부하면 되겠지라는 생각으로 일단 강의를 듣고 있다.

 

딱히 현재까지 어려운 부분은 없었고, vue를 호출하기 전 특정 커맨드를 위주로 문법을 공부했다. 

---

패키지 불러오기

뷰의 커맨드를 불러오기 위해서는 패키지를 먼저 index 파일에 불러왔다. 패키지 경로는 아래와 같다.(24.05.18 기준) 

    <script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js" defer></script>

 

컴포넌트 생성

뷰를 사용하기 위해 뷰 컴포넌트를 생성해야 한다. 따라서 createApp() 메소드를 이용해서 컴포넌트를 생성한다. 

const app = Vue.createApp()

 

앱 마운트 하기

작성한 코드를 html의 어느 부분에 렌더링 할지 컨테이너를 선택한다. 보통 해당 컨테이너의 id를 주로 사용한다. 

app.mount('컨테이너의 ID');

 

보간법 및 메소드 생성

보간법이란 Vue에서 생성한 텍스트, 숫자 등 데이터를 html에 직접 넣는 것을 말한다. 데이터와 메소드는 최상위 컴포넌트에서 생성하며 html 코드에 넣을 때에는 {{}} (중괄호 2개) 를 이용해서 사용한다.

 

이 때 data 형식의 리턴은 반드시 object 형식이어야 한다. 

 

html

<p>{{ Goal }}</p>

Js

const app = Vue.createApp({
  data() {
    return {
      Goal: 'Learn Vue!' ,
    };
  }
});

위 코드에서는 Vue 컴포넌트에서 생성한 data를 직접 html 코드에 넣었다. 하지만 태그가 아닌 속성값에 data를 넣고 싶다면 v-bind 를 사용해야 한다.

 

html

<p>Learn more <a v-bind:href="vueLink">about Vue</a></p>

Js

const app = Vue.createApp({
  data() {
    return {
      vueLink: 'https://vuejs.org/'
    };
  }
});

 

 

---

이전까지는 object로 되어 있는 데이터를 직접 입력 했지만 메소드를 입력하는 방법도 있다. 

 

html

<p>{{ outputGoal }}</p>

 

Js

const app = Vue.createApp({
  methods: {
    outputGoal() {
      const randomNumber = Math.random();
      if (randomNumber < 0.5) {
        return 'Master Vue!';
      } else {
        return 'Learn Vue!';
      }
    }
  }
});