[vue.js] 템플릿 문법 - 실전

watch.html

# watch 속성

 <div id="app">

    // 데이터 바인딩 : data변수 <> view

    {{ num }}

    // v-on:click="메소드명"

    <button v-on:click="addNum">increase</button>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>

    new Vue({

      el: '#app',

      data: {

        num: 10

      },

      // ★ 데이터에 변화에 따라 특정 로직을 Trigger할 수 있다.

      watch: {

        // 인스턴스내 data.num 데이터 변수에 매핑 가능

        num: function() {

          this.logText();

        }

      },

      methods: {

        addNum: function() {

          this.num = this.num + 1;

        },

        logText: function() {

          console.log('changed');

        }

      }

    })

  </script>

watch vs computed.html

# watch와 computed 속성의 차이는?

computed: {

        // ★ num을 기반으로 가공한 값

        // validation 값

        // computed 속성을 사용하는 것을 추천

        doubleNum: function() {

          return this.num * 2;

        }

      },

      watch: {

        // ★ 무거운 로직(데이터 요청)

        // 매번 실행되기 어려운 로직

        // ★ 이전값과 변경된 값을 전달 받을 수 있음

        num: function(newValue, oldValue) {

          // 인스턴스내 메소드 호출

          this.fetchUserByNumber(newValue);

        }

      },

      methods: {

        fetchUserByNumber: function(num) {

          // console.log(num);

          axios.get(num);

        }

      }

 

# computed 속성을 이용한 클래스 코드 작성법

// 방법1. 동적 클래스명 변경, warning 클래스명 : bool값(적용여부)

    <p v-bind:class="{ warning: isError }">Hello</p>

    // 방법2. 동적 클래스명 변경, computed 변수명 : 속성값에 따라 가공

    <p v-bind:class="errorTextColor">Hello</p>

// Computed 속성 활용

      computed: {

        errorTextColor: function() {

          return this.isError ? 'warning' : null;

        }

      }