Vue 기본 세팅

Vue.js

Vue 기본 세팅

Mecodata 2024. 1. 23. 14:51

기본 세팅

- npm install -g @vue/cli → Vue 설치

- <template> 안에 HTML 코드를 작성

- <script> 안에 JavaScript 코드를 작성

- createApp() = Application 인스턴스 생성

- data = 반환할 데이터 정의 (메소드로 정의해야 함)

- methods = 메소드 정의 (객체 타입으로 정의해야 함)

※ methods에서 화살표 함수 방식을 사용하여 메소드를 정의하면 this가 window 객체를 가리키기 때문에

methods에서 메소드를 정의할 때는 화살표 함수가 아닌 명명문(A() {})으로 정의해야 함

- mount() = createApp()으로 생성한 Application 인스턴스를 파라미터로 지정한 특정 요소에 마운트

JavaScript

const app = createApp({
  data() {
    return {
      goals: [],
      enteredValue: ''
    };
  },
  methods: {
    addGoal() {
      this.goals.push(this.enteredValue); // enteredValue를 goals에 추가 후
      this.enteredValue = ''; // 다시 빈 값으로 초기화
    }
  },
})

app.mount('#app')

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A First App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="app">
      <div>
        <label for="goal">Goal</label>
        
        <!-- app.js의 enteredValue와 매칭 -->
        <input type="text" id="goal" v-model="enteredValue" />
        
        <!-- Add Goal 클릭 시 app.js의 addGoal()이 실행되도록 설정 -->
        <button v-on:click="addGoal">Add Goal</button>
      </div>
      <ul>
      	<!-- goals 요소들 하나씩 출력 -->
        <li v-for="goal in goals">{{ goal }}</li> 
      </ul>
    </div>
    <!-- CDN 방식으로 Vue 라이브러리 호출 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js"></script>
  </body>
</html>