1. 디렉티브 : 'v-' 로 시작하는 속성. 주로 데이터 바인딩과 관련된 처리
* v-if, v-bind, key 등은 속성임
2. 데이터 바인딩: 데이터와 렌더링을 동기화하는 구조
● 텍스트 바인딩
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Vue.js App</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<!-- 여기 #app 내부에 템플릿을 출력할 것입니다 -->
<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
* new Vue() 는 한 개만 만들고, 컴포넌트로 UI를 구축한다.
//관례적으로 app 또는 vm(ViewModel)라는 변수 이름을 사용함
var app = new Vue({ // new Vue() 는 한 개만 만들고, 컴포넌트로 UI를 구축한다
el: '#app',
data: {
message: 'Hello Vue.js'
}
})
console.log(app.message) // app.data.message 가 아니라는 점 주의
● 반복 렌더링
data옵션에 등록한 배열 또는 객체에 v-for 디렉티브를 적용해서 반복 렌더링할 수 있음
<div id="app">
<!-- 여기 #app 내부에 템플릿을 출력할 것입니다 -->
<ol>
<li v-for="item in list">{{item}}</li>
</ol>
</div>
var app = new Vue({
el: '#app',
data: {
list: ['사과', '바나나', '딸기']
}
})
console.log(app.list);
list에 push 해보기
● 이벤트 사용
- 'v-on' : addEventListener 또는 jQuery의 $(element).on 메서드와 비슷하게 작용함
<div id="app">
<!-- 여기 #app 내부에 템플릿을 출력할 것입니다 -->
<button v-on:click="handleClick">Click</button>
</div>
var app = new Vue({
el: '#app',
methods: {
handleClick: function(event) {
alert(event.target) //[object HTMLButtonElement]
}
}
})
● 입력 양식과 동기화하기
데이터와 입력 양식 입력 항목을 바인딩할 때는 v-model 디렉티브를 사용함
입력 또는 선택을 하면, 곧바로 데이터와 DOM 에 반영됨
<div id="app">
<!-- 여기 #app 내부에 템플릿을 출력할 것입니다 -->
<p>{{message}}</p>
<input v-model="message">
</div>
input에 입력한 문자와 p태그의 문자를 동기화함
var app = new Vue({
el: '#app',
data: {
message: '초기메세지'
}
})
↓ input에 '동기화' 입력
.number 를 추가하면 입력 값을 숫자로도 받을 수 있음
<input v-model.number="message">
● 조건 분기
v-if 디렉티브를 사용하면 조건적용할 수 있음
<div id="app">
<!-- 여기 #app 내부에 템플릿을 출력할 것입니다 -->
<p v-if="show">Hello Vue.js</p>
</div>
show 속성이 true일 때만 <p> 요소를 렌더링함
var app = new Vue({
el: '#app',
data: {
show: true
}
})
콘솔에 app.show = false 입력하면 p태그가 DOM에서 제거됨
● 트랜지션과 애니메이션
<transition> 태그를 사용하면, 템플릿 내부의 요소들에 CSS 토랜지션과 애니메이션을 손쉽게 적용가능함
<div id="app">
<!-- 여기 #app 내부에 템플릿을 출력할 것입니다 -->
<button v-on:click="show=!show">변경하기</button>
<transition>
<p v-if="show">Hello Vue.js!</p>
</transition>
</div>
버튼 클릭하면 show 값이 true, false로 변경됨
var app = new Vue({
el: '#app',
data: {
show: true
}
})
console.log(app.show)
main.css
.v-enter-active, .v-leave-active{
transition: opacity 1s;
}
/* opacity: 0에서 1까지 페이드인&페이드아웃 하기 */
.v-enter, .-leave-to{
opacity: 0;;
}
클릭하면 p태그가 페이드인, 페이드아웃 효과가 적용됨
'Vue.js' 카테고리의 다른 글
| [Vue.js] 템플릿 조건분기 (0) | 2024.01.17 |
|---|---|
| [Vue.js] SVG 데이터 바인딩하기 (0) | 2024.01.17 |
| [Vue.js] 데이터 바인딩 - 텍스트, 속성 (0) | 2024.01.17 |
| [Vue.js] 데이터 바인딩 (0) | 2024.01.17 |
| [Vue.js] 옵션 구성 (0) | 2024.01.17 |
