computed와 watch 속성의 차이점 - vuejs.org/v2/guide/computed.html#ad
Watch
특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성입니다.
<body>
<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,oldValue);
}
},
methods: {
fetchUserByNumber: function(newValue, oldValue) {
console.log(oldValue+'->'+newValue);
}
}
});
</script>
</body>
computed 속성을 이용한 클래스 코드 작성 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.warning {
color: red;
}
.normal {
color: blue;
}
</style>
</head>
<body>
<div id="app">
<!-- 1) 클래스 이름 waring을 직접 입력했을 때 -->
<!-- <p v-bind:class="{ warning: isError }">Hello</p> -->
<!-- 2) class 이름의 결정을 computed 속성에 위임했을 때 -->
<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: {
isError: false
},
computed: {
errorTextColor: function() {
// 1) if 조건문
// if (isError) {
// return 'warning'
// } else {
// return null;
// }
// 2) 삼항 연산자
return this.isError ? 'warning' : 'normal';
}
}
});
</script>
</body>
</html>
www.inflearn.com/course/Age-of-Vuejs/
Vue.js 시작하기 - Age of Vue.js - 인프런
Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요. 초급 웹 개발 프레임워
www.inflearn.com
joshua1988.github.io/vue-camp/
Cracking Vue.js
joshua1988.github.io
위 강좌를 통해 배운 내용을 정리했습니다.
'Study > Vue' 카테고리의 다른 글
| [Vue] Vue CLI 란? (+설치 방법) (0) | 2020.12.07 |
|---|---|
| [Vue] 템플릿 문법 computed, v-if, v-show (0) | 2020.12.06 |
| [Vue] HTTP 통신 라이브러리 - Axios 엑시오스 (0) | 2020.12.06 |
| [Vue] 뷰 라우터(router) (0) | 2020.12.06 |
| [Vue] 같은 컴포넌트 레벨 간의 통신 방법 (0) | 2020.12.06 |
댓글