[Vue.js] 템플릿 문법
2021. 9. 26. 15:28ㆍ개발공부/Vue.js 시작하기
템플릿 문법
뷰의 템플릿 문법은 뷰로 화면을 조작하는 방법을 의미합니다. 크게 데이터 바인딩과 디렉티브로 나뉩니다.
데이터 바인딩
데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법입니다. {{ }} 콧수염 괄호(Mustache Tag)가 가장 기본적인 방식입니다.
<div> {{ message }}</div>
new Vue({
data: {
message: 'Hello Vue.js'
}
})디렉티브
v-가 붙는 속성입니다. 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다.
<div>
Hello <span v-if="show">Vue.js</span>
</div>
new Vue({
data: {
show: falsesS
}
})위 코드는 show 데이터에 따라 Vue.js 내용이 보이거나 보이지 않는 코드입니다.
Computed
computed를 활용하면 변경된 값을 다른 값에 적용시켜줄수 있습니다.
<body>
<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>화면에서 num: 10이 변경될 때 doubleNum도 computed에 의해 달라집니다.
뷰 디렉티브
v-bind를 사용해 Vue 변수와 매칭시켜줄 수 있습니다.
<p v-bind:id="uuid">{{ num }}</p>
new Vue({
el: '#app',
data: {
num: 10,
uuid: 'abc1234'
},뷰 디렉티브를 사용하면 화면에 있는 데이터 뿐만 아니라 DOM에 있는 값까지 변경해줄 수 있는 장점이 있습니다.
v-if를 사용하면 데이터 진위에 따라 if-else로 DOM을 보여줄 수 있습니다.
<div v-if="loading">
Loading...
</div>
<div v-else="loading">
test user has been logged in
</div>v-show도 같은 동작을 하지만 실제 DOM에 제거하진 않고 style=display: none; 상태로 변경해주는 면에서 차이가 있습니다.
<div v-show="loading">
Loading...
</div>v-on을 사용하면 이벤트가 발생했을 때 (click이나 keyup 같은) 메서드를 실행시킬 수 있습니다.
<div id="app">
<button v-on:click="logText">click me</button>
<input type="text" v-on:keyup.enter="logText">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
logText: function() {
console.log('clicked');
}
}
});
</script>참고자료:
'개발공부 > Vue.js 시작하기' 카테고리의 다른 글
| [Vue.js] 모르는 문법 나왔을 때 공부방법 (0) | 2021.09.26 |
|---|---|
| [Vue.js] watch와 computed (0) | 2021.09.26 |
| [Vue.js] axios (비동기식 처리) (0) | 2021.09.23 |
| [Vue.js] Router (0) | 2021.09.20 |
| [Vue.js] 같은 레벨 컴포넌트의 통신 (0) | 2021.09.20 |