Vue 4

title: 4장 Vue 인스턴스

4장 Vue 인스턴스

4.1 Vue 인스턴스 개요

• 코드 예시:

<template>
  <div></div>
</template>

<script>
const app = new Vue({
  el: '#app',
  data: {
    greeting: '안녕, Vue!'
  }
});
</script>

• 설명: 여기서 el은 엘레먼트를 의미하며 스크립트 셋업을 통해 내보낸다.

4.2 data 옵션

• 코드 예시:

<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Hello World!'
    }
  }
}
</script>

• 설명: data를 리턴하면서 템플릿에 해당 데이터를 접근할수있다.

4.3 계산된 속성(Computed Property)

• 코드 예시:

<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'Vue',
      lastName: '초보'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}
</script>

• 설명: computed로 데이터를 기반한 계산된 값을 생성합니다.

4.4 메서드

• 코드 예시:

<template>
  <button @click="sayHello">클릭</button>
</template>

<script>
export default {
  methods: {
    sayHello() {
      alert('안녕하세요!');
    }
  }
}
</script>

• 설명: methods도 export를 통해서 템플릿 내의 사용이 가능하다.

4.5 관찰 속성

• 코드 예시:

<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal) {
      this.countPlusOne = newVal + 1;
    }
  }
}
</script>

• 설명: watch로 데이터 변경을 감지할 수있다.

4.6 생명주기 메서드

• 코드 예시:

<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.message = '인스턴스가 생성되었습니다!';
  }
}
</script>

• 설명: created 속성을 통해서 컴포넌트가 생성되었지만 마운트 되기전에 실행된다. swift에서의 onAppear 과 비슷한 것같다.