뷰의 템플릿 문법
- 뷰로 화면을 조작하는 문법
- 크게 데이터 바인딩, 디렉티브로 나뉨.
데이터 바인딩
- 뷰 인스턴스에서 정의한 속성을 화면에 표시하는 방법 ex) 콧수염 괄호(Mustache Tag)
<div>{{message}}</div>디렉티브
- 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법(v- 가 붙는 속성을 뷰 디렉티브라고 함)
- 예시로 특정 속성 값에 따라 화면의 영역의 표시 유무 결정
<div>
Hello <span v-if="show"> show data </span>
</div>
new Vue({
data:{
show: false
}
})computed, v-bind, v-if, v-show
body>
<div id="app">
<p v-bind:id="uuid" v-bind:class="name">{{num}}</p>
<!-- <p id="abc1234">{{num}}</p> -->
<p>{{doubleNum}}</p>
<!-- 로딩중일떄 -->
<div v-if="loading">
Loading...
</div>
<!-- 로딩이 끝나면 뜸 -->
<div v-else>
test user has been logged in
</div>
<div v-show="loading">
show
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
uuid: 'abc1234',
name: 'text-blue',
loading: true
},
// 계산된 속성
computed:{
doubleNum: function(){
return this.num * 2
}
}
})
</script>
</body>- v-if, v-show차이
- v-if가 false인 경우, tag가 아예 사라짐
- v-show가 false인 경우, 화면에만 안 나오도록 설정됨.
- ex) 키보드 이벤트
<input type="text" v-on:keyup.enter="logText">watch vs computed
- computed : 가벼운 연산, 데이터 입력, 매번 실행되기 부담이 없는 요청
- watch : 매번 불러오기 부담되는 로직 ex) 데이터 요청
- 아래는 num의 변경에 따라 데이터가 변경되는 로직
- 공식 문서에서는 computed를 권장
- 공식 문서
<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;
}
},
// num값이 변경될 때 데이터가 변경되는 로직
// 매번 불러오기엔 무거운 로직들(데이터 요청)
watch: {
num: function(newValue, oldValue) {
this.fetchUserByNumber(newValue);
}
},
methods: {
fetchUserByNumber: function(num) {
// console.log(num);
axios.get(num);
}
}
});
</script>
</body>
배우면서 나아가자