Vue.js 템플릿 문법 - 실전

Inseok Park·2022년 6월 26일
0

Vue Lv1

목록 보기
9/11
post-thumbnail

watch 속성

  • 데이터의 변화에 따라서 특정 로직을 실행

increase 버튼을 누를때마다
watchconsole.log('changed')가 실행된다

<div id="app">
  {{ num }}
  <button v-on:click="addNum">increase</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
  el: '#app',
  data: {
    num: 10
  },
  watch:{
    // 데이터의 변화에 따라서 특정 로직을 실행
    num: function() {
      this.logText();
    }
  },
  methods:{
    addNum: function() {
      this.num = this.num + 1;
    },
    logText: function() {
      console.log('changed');
    }
  }
});
</script>

computed vs watch

대부분의 케이스에서 computed vs watchcomputed가 적합하다.
computed는 벨리데이션(확인), 간편한 텍스트 연산에 적합하고
watch는 무거운 동작(비동기 data요청 등)에 더 적합한 방법이다.
watch 속성과 computed 속성 차이점에 관한 공식 문서 링크

<div id="app">
  {{ num }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      num: 10
    },
    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);
      }
    }
  });
</script>

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

computed에 조건문을 적용하고 <p> 태그의 class에 v-bind 적용

<style>
.warning {
  color: red;
}
</style>

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      // cname: 'blue-text',
      isError: false
    },
    computed: {
      errorTextColor: function() {
        // if (isError) {
        //   return 'warning'
        // } else {
        //   return null;
        // }
  		// 삼항연산자
  		// (위 주석과 같은 코드로 isError가 true이면 warning을, false일땐 null을 반환)
        return this.isError ? 'warning' : null;
      }
    }
  });
</script>

0개의 댓글