[DAY 34] Vue (2)

Frontend/프로그래머스 FE 데브코스

[DAY 34] Vue (2)

BeNI 2022. 12. 6. 04:01

728x90

1. Computed

: 계산된 데이터

- Vue 내부에서 캐싱 기능을 제공하기 때문에 반복된 계산은 한번만 일어난다.

- 계산된 데이터는 의존성을 가지고 있다.

1) 사용 방법

<body>
    <div id="app">
      <h1>{{count}}</h1>
      <h2>{{double}}</h2>
      <h2>{{double}}</h2> // 한번만 계산된다.
    </div>
    <script>
      const App = {
        data() {
          return {
            count: 3,
          };
        },
        computed: {
          double() {
            return this.count * 2;
          },
        },
      };
      const vm = Vue.createApp(App).mount("#app");
    </script>
</body>

2) getter, setter 사용하기

data() {
  return {
    firstName: "Leon",
    lastName: "Miller",
  };
},
computed: {
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    set(newValue) {
      const names = newValue.split(" ");
      this.firstName = names[0];
      this.lastName = names[1];
    },
  },
},

- get()은 vm.fullName으로, set()은 vm.fullName = '이름' 으로 접근 가능하다.

2. Watch

- 반응성을 가지는 데이터를 감시하는 역할

1) 기본 형태

watch: {
  firstName(newValue, oldValue) {
    console.log("watch: ", newValue, oldValue);
  },
  fullName() {
    console.log("watch: ", this.fullName);
  },
},

- firstName을 변경했을 때, watch 내 firstName(), fullName()은 데이터 변경을 감지하여 실행된다.

2) 속성

 watch: {
  `데이터 이름`: {
    handler(newV, oldV) { // 순서 상관 있음
      console.log(newV, oldV);
    },
    deep: true, // 다른 속성이 바뀌어도 실행
    immediate: true, // 페이지가 처음 불러올 때도 실행
  },
},

deep : 객체나 배열같은 참조 데이터 내부의 데이터를 감시할 때 사용
immediate: 페이지를 처음 불러울 때도 실행하고 싶을 때 사용

3. 클래스와 스타일 바인딩

- v-bind와 computed을 사용하여 html 요소에 클래스를 추가하여 스타일을 바인딩 할 수 있다.

1) 객체 형태로 클래스 바인딩

<h1 :class="{active: isActive, small: isSmall}" class="title"></h1>
<h1 :class="{active, small}" class="title"></h1> // data형태: active, small

data의 isActive가 true면 class에 active가 추가 된다.

여러 개를 바인딩하고 싶으면 쉼표로 구분한다.

2) computed를 이용하여 styleObject 바인딩

<h1 :class="styleObject"></h1>

computed: {
  styleObject() {
    return {
      active: this.active,
      "title--small color--orange": this.small,
    };
  },
},

- 여러 클래스를 한꺼번에 바인딩 하고 싶을 때 computed로 빼서 한꺼번에 바인딩 할 수 있다.

- 띄어쓰기로 구분하여 한 데이터에 여러개 클래스를 의존하도록 가능

3) 배열로 클래스 바인딩

<h1 :class="[active, title]">Hello Vue</h1>

data() {
  return {
    title: "title",
    active: "active",
  };
},

data에 string으로 데이터를 선언하여 배열 형태로 클래스를 바인딩 할 수 있다.

4) 템플릿 리터럴로 클래스 바인딩

<h1 :style="`color:${color}`">Hello Vue</h1>

data() {
  return {
    color: "red",
  };
},

* 인라인 스타일은 카멜케이스를 지원한다. 따라서 속성의 이름을 따로 표시안해도 된다.

 <h1 :style="{color, backgroundColor}"></h1>
 
return {
    color: "royalblue",
    backgroundColor: "orange", //자동 변환 카멜케이스
    styleObject: {
      // 오브젝트 형태로 여러개 넣을 수 있다 []
    	},
    };
},

728x90

저작자표시 비영리