Vue 템플릿 문법
템플릿 문법 소개
뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미합니다.
템플릿 문법은 크게 데이터바인딩과 디렉티브로 나뉩니다.
데이터 바인딩 : 콧수염 괄호 {{ }} (Mustache Tag)
computed를 활용한 계산
<div id="app">
<p>{{ num }}</p>
<p>{{ doubleNum }}</p>
</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;
}
}
})
</script>data의 num이 변하면 computed의 doubleNum을 자동으로 계산.
디렉티브
코드 내 주석처리 되어있는 부분을 v-bind를 사용하여 아래의 형태로 변경한다.
뷰 인스턴스 data에서 입력된 값이 <p>태그의 id와 class값으로 지정된다.
이후 data속성만 바꾸어주면 DOM에서도 자동으로 변경되므로
더이상 바닐라스크립트에서처럼 queryselector 등으로 작업을 여러번 거치지 않아도 된다.
<div id="app">
<!-- <p id="abc1234" class="text-blue">{{ num }}</p> -->
<p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
</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'
}
})
</script>
v-if, v-else, v-show
<!DOCTYPE html>
<div id="app">
<div v-if="loading">
loading...
</div>
<div v-else>
test user has been logged in
</div>
<div v-show="loading">
Loading...
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
loading:true
}
})
</script>뷰인스턴스 data의 loading:true로 설정하면 v-if가 화면에 나타난다.
else 부분은 나타나지 않는다.
Vue 개발자모드에서 체크박스를 눌러보면 false로 data상태를 변경해보면
v-else가 나타난다.
v-if와 v-show의 차이점
v-show="loading"은 v-if와 같이 ture일때만 함께 나타난다.
v-if는 false일때 DOM에서 완전히 사라지지만
v-show는 DOM은 그대로 존재하지만 css로 display:none; 처리된다.
모르는 문법이 나왔을때 공식문서를 보고 해결하는 방법
v-model에 대해 배우지 않은 상태에서 아래 코드의 주석의 문제를 해결하려한다.
공식문서인 https://vuejs.org/ 로 접속해서 검색창에 input을 입력하면
문제에 대한 답과 예시, playground까지 찾을 수 있다.
문법이나 api등을 스스로 해결하는 능력을 기르자
<!-- TODO: input에 입력된 내용을 p태그에 출력해보세요 -->
<input type="text" v-model="message">
<p>{{ message }}</p>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>methods 속성과 v-on 디렉티브를 이용한 키보드, 마우스 이벤트 처리 방법
마우스 클릭시 이벤트 v-on:click
키보드 입력시 이벤트 key-up
키보드 엔터시 입력시 v-on:keyup.enter
위 방법처럼 .을 활용하는 핸들링 방법(keyup.enter) 을 event modifiers라고 한다.
마우스, 키보드 등 다양한 핸들링 방법이 있으므로 아래 문서를 참조
event-modifiers 공식문서 참조
<div id="app">
<!-- <button v-on:click="메서드 이름">Click me</button> -->
<button v-on:click="logText">Click me</button>
<input type="text" v-on:keyup.enter="logText">
</div>
<script>
const vm = new Vue({
el: '#app',
methods: {
logText:function(){
console.log('clicked');
}
}
});
</script>