코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 4일차

3장 뷰 기본 문법 익히기

3.6 계산된 속성과 감시자 속성

계산된 속성(computed)은 컴포넌트에서 자주 사용하는 데이터를 캐시해 애플리케이션 성능을 향상시킨다.

<script>
export default {
  data() {
    return {
      firstName: 'TH',
      lastName: 'Lee',
    };
  },

  computed: {
    fullName() {
      console.log("computed fullname");
      return `성은 ${this.firstName} 이름은 ${this.lastName}`;
    },
  },
}
</script>

<template>
  <h1>{{ firstName }}</h1>
  <h1>{{ lastName }}</h1>
  <h1>{{ fullName }}</h1>
  <h1>{{ fullName }}</h1>
</template>

<style></style>

 

감시된 속성(watch)은 데이터의 변경을 감시하고, 변경이 감지될 때마다 특정 동작을 수행할 수 있게 한다.

3.7 스타일 다루기

style 속성, v-bind 디렉티브, 내부 스타일, 외부 스타일

<script>
export default {
  data() {
    return {
      primaryColor: 'red',
      primaryStyle: 'italic',
    };
  },
}
</script>

<template>
  <h1 style="color: blue; font-style: italic">style</h1>
  <h1 :style="{ color: primaryColor, fontStyle: primaryStyle }">v-bind Style</h1>

  <h2>internal h2 Style</h2>
  <h3>external h3 Style</h3>
</template>

<style>
@import './assets/main.css';
h2 {
  color: orange;
  font-style: italic;
}
</style>