데이터 바인딩
데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미.
주요 문접으로는 {{}} 문법과 v-bind 속성
{{}} - 콧수염 괄호
가장 기본적인 텍스트 삽입 방식
v-bind
아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식
<html>
<head>
<title>Vue Template - Data Binding</title>
</head>
<body>
<div id="app">
<p v-bind:id="idA">아이디 바인딩</p>
<p v-bind:class="classA">클래스 바인딩</p>
<p v-bind:style="styleA">스타일 바인딩</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
idA: 10,
classA: 'container',
styleA: 'color: blue'
}
});
</script>
</body>
</html>
자바스크립트 표현식도 가능
<html>
<head>
<title>Vue Template - Javascript Expression</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ message + "!!!" }}</p>
<p>{{ message.split('').reverse().join('') }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>
디렉티브(directive)
뷰 디렉트브란 HTML 태그안에 v- 접두사를 가진 모든 속성들을 의미
ex. <a v-if="flag>Okay Vue.js</a>
|
디렉티브 이름 |
역할 |
|
v-if |
if문과 같다 true,false값에 따라 화면에 표시한다. |
|
v-for |
지정한 뷰 데이터의 개수만큼 반복하여 출력 |
|
v-show |
css의 display:none 으로 속성을 준다. if문의 경우 태그를 완전삭제함. |
|
v-bind |
vue 데이터속성과 html태그 기본속성을 연결해줌 |
|
v-on |
화면요소의 이벤트를 감지하여 처리 할 때 사용함 |
|
v-model |
form에서 주로 사용되는 속성. form태그에 입력한 값을 vue인스턴스의 데이터와 동기화함. 화면에 입력된 값을 서버로 보낼때 사용.(watch와 같은 고급 속성을 이용하여 추가 로직 수행 가능함) 주의 사항으로는 <input>, <select>, <textarea>태그에만 사용 가능함.
|
이벤트처리
사용자의 클릭이나 키보드 입력과 같은 이벤트를 처리할 때, v-on 디렉티브와 methods 속성을 활용
v-on 디렉티브 이용해 이벤트처리
<html>
<head>
<title>Vue Template - Event Handling</title>
</head>
<body>
<div id="app">
<button v-on:click="clickBtn">클릭</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
clickBtn: function() {
alert('clicked');
}
}
});
</script>
</body>
</html>v-on 디렉티브로 메소드 호출할 때 인자 넘기기
<html>
<head>
<title>Vue Template - Event Handling</title>
</head>
<body>
<div id="app">
<button v-on:click="clickBtn(10)">클릭</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
clickBtn: function(num) {
alert('clicked ' + num + ' times');
}
}
});
</script>
</body>
</html>event 인자를 이용해 화면 요소의 돔 이벤트에 접근
<html>
<head>
<title>Vue Template - Event Handling</title>
</head>
<body>
<div id="app">
<button v-on:click="clickBtn">클릭</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
clickBtn: function(event) {
console.log(event);
}
}
});
</script>
</body>
</html>
고급 템플릿 기법
computed 속성
computed 속성은 데이터의 연산을 정의하는 영역.
computed의 장점
1. data 속성 값이 변경되면 전체 값을 다시 한번 계산.
2. 캐싱. 동일 연산을 반복해서 하지 않기 위해 연산의 결과값을 미리 저장하고 있다가 필요할 때 불러오는 동작.
computed와 methods속성의 차이점
가장 큰 차이 -> methods는 호출할 때만 해당 로직이 수행, computed는 대상 데이터 값이 변하면 자동으로 수행
데이터를 수동으로 갱신할꺼냐, 자동으로 갱신할꺼냐의 차이
<html>
<head>
<title>Vue Template - Computed vs Methods</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMsg">문자열 역순</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMsg: function() {
this.message = this.message.split('').reverse().join('');
return this.message;
}
}
});
</script>
</body>
</html>
watch 속성
데이터 변화를 감지하여 자동적으로 특정 로직 수행.
compiuted속성은 내장 API를 활용한 간단한 연산 정도로 적합한 반면, watch 속성은 데이터 호출과 같이 상대적으로 더 많이 소모되는 비동기 처리 적합
<html>
<head>
<title>Vue Template - Watch</title>
</head>
<body>
<div id="app">
<input v-model="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
watch: {
message: function(data) {
console.log("message의 값이 바뀝니다 : ", data);
}
}
});
</script>
</body>
</html>'IT > Vue.js' 카테고리의 다른 글
| [vue.js] 뷰 CLI (0) | 2021.02.20 |
|---|---|
| [vue.js] 싱글 파일 컴포넌트 체계 (0) | 2021.02.20 |
| [Vue.js] Vue 템플릿(Vue template) (0) | 2021.02.20 |
| [vue.js] vue HTTP 통신 (Axios) (0) | 2021.02.20 |
| [vue.js] vue 라우터 (0) | 2021.02.20 |
