템플릿 문법
Vue를 사용하여 화면을 조작하는 것으로 크게 1) 데이터 바인딩, 2) 디렉티브로 나뉩니다.
1) 데이터 바인딩
Vue Instance에서 정의한 속성들을 화면에 표시하는 방법입니다.
가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)입니다.
<div>{{ message }}</div>new Vue({
data: {
message: 'Hello Vue.js'
}
})2) 디렉티브
Vue로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다.
화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있습니다.
<div>
Hello <span v-if="show">Vue.js</span>
</div>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
new Vue({
data: {
show: false
items: ['shirts', 'jeans', 'hats']
}
})이외에도 자주 사용되는 디렉티브가 있습니다.
- v-bind
- v-on
- v-model
computed 속성
템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성
아래 코드에서 두 번째 p 태그에 있는 doubleNum의 경우 computed 속성에 의해 변화되는 것을 볼 수 있다.
<p>{{num}}</p>
<p>{{doubleNum}}</p>new Vue({
el: '#app',
data: {
num: 10,
},
computed: {
doubleNum: function() {
return this.num * 2;
}
}
})
Vue 디렉티브와 v-bind
화면에 표현되는 text값뿐만 아니라 DOM에 대한 정보까지 변경할 수 있다
<div id="app">
<p v-bind:id="uuid"></p>
</div>new Vue({
el: '#app',
data: {
uuid: 'abcd1234'
},
})
v-if, v-show
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="login">Login</button>
<div v-if="loading">
Loading...
</div>
<div v-else>
Login Success!!
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
loading: true
},
methods: {
login: function(){
if(this.loading) this.loading = false;
else if(!this.loading) this.loading = true;
}
}
})
</script>
</body>
</html>v-if 와 v-show의 차이
<div v-if="loading">
Loading... v-if
</div>
<div v-show="loading">
Loading... v-show
</div>
조건이 false 일 때, v-if는 dom 자체가 사라지고 v-show는 display 속성이 none이 된다.
v-model
input 태그에 값을 입력할 경우, message가 변경된다
<input type="text" v-model="message">
<p>{{message}}</p>
<script>
new Vue({
el: '#app',
data: {
message: ''
},
})
</script>
v-on
// enter를 칠 때
<input type="text" v-on:keyup.enter="logText">
// 키를 누를 때
<input type="text" v-on:keypress="logText">
// 키를 눌렀다가 땔 때
<input type="text" v-on:keyup="logText">
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] watch 속성 (0) | 2020.12.06 |
| [Vue] HTTP 통신 라이브러리 - Axios 엑시오스 (0) | 2020.12.06 |
| [Vue] 뷰 라우터(router) (0) | 2020.12.06 |
| [Vue] 같은 컴포넌트 레벨 간의 통신 방법 (0) | 2020.12.06 |
댓글