el, data, computed 옵션
- data 옵션 : Vue 인스턴스가 관찰하는 데이터 객체를 의미
- vm.name 을 data 옵션으로 직접 접근하려면 다음과 같이 작성 vm.$data.name
- el 옵션 : Vue 인스턴스에 연결할 HTML 요소를 지정.
- 여러개 요소를 지정할 수 없음. 선택자로 여러개를 지정해도 첫번째 요소에만 연결됨
- computed 옵션 :
- 지정하는 것은 함수이지만 사용 시에는 속성 처럼 사용
- set 메서드를 지정하여 쓰기 작업도 가능
<script>
var vm = new Vue({
el : '#example',
data : { amt : 1234567 },
computed : {
amount : {
get : function(){
var s = new String(""+this.amt);
var result = "";
var num = 0;
for(var i=s.length-1; i>=0; i--) {
result = s[i] + result;
if( num % 3 == 2 && i !== 0) {
result = ',' + result;
}
num++;
}
},
set : function {
if( typeof(amt) === 'string') {
var result = parseInt(amt.replace(/,/g,''));
if(isNaN(result)) this.amt = 0;
else this.amt = result;
} else if( typeof(amt) === 'number'){
this.amt = result;
}
}
}
}
});
</script>
<!--
사용 :
vm.amount = "1,000,000,000"
console.log(vm.amount); ==> 1000000000
-->
메서드
methods 와 computed 의 차이점
- computed(계산형속성)은 종속된 값에 의해 결괏값이 캐싱
- methods는 sum() 메서드를 매번 실행
주의점
- ECMAScript6 에 사용하는 화살표 함수를 사용하지 말아야 한다.
- 함수 내부에서 가리키는 this가 Vue 인스턴스를 가리키지 않고 전역객체를 가리킴
var simple1 = new Vue({
el: "#example",
data: model,
// computed: {
methods: {
sum: function() {
var n = Number(this.num)
if (Number.isNaN(n) || n < 1) return 0;
return ((1 + n) * n) / 2;
}
}
});
관찰 속성
- watch 옵션 : 속성의 이름과 해당 속성이 변경되었을 때
- 긴 시간이 필요한 비동기 처리가 필요할 때는 관찰속성이 유용
<body>
<div id="example">
x : <input type="text" v-model="x" /><br />
y : <input type="text" v-model="y" /><br />
덧셈결과 : {{sum}}
</div>
<script type="text/javascript">
var simple1 = new Vue({
el: "#example",
/* 다음 방법이 더 유용하다.
data: {x: 0,y: 0},
computed: {
sum: function() {
var result = Number(this.x) + Number(this.y);
if (isNaN(result)) return 0;
else return result;
}
}
*/
data: {
x: 0,
y: 0,
sum: 0
},
watch: {
x: function(v) {
console.log("## x 변경");
var result = Number(v) + Number(this.y);
if (isNaN(result)) this.sum = 0;
else this.sum = result;
},
y: function(v) {
console.log("## y 변경");
this.y = v;
var result = Number(this.x) + Number(v);
if (isNaN(result)) this.sum = 0;
else this.sum = result;
}
}
});
</script>
</body>
- 이 방법은 계산형 속성으로는 구현할 수 없다. 계산형 속성은 값을 직접 리턴해야 하기 때문
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>연락처 조회 서비스</title>
<style>
#list {
width: 400px;
border: 1px solid black;
border-collapse: collapse;
}
#list td,
#list th {
border: 1px solid black;
text-align: center;
}
#list>thead>tr {
color: yellow;
background-color: purple;
}
</style>
</head>
<body>
<div id="example">
<p>이름<input type="text" v-model="name" placeholder="두자 이상 입력하세요"></p>
<table id="list">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>전화번호</th>
<th>주소</th>
</tr>
</thead>
<tbody id="contacts">
<tr v-for="(contact, index) in contactlist">
<td>{{contact.no}}</td>
<td>{{contact.name}}</td>
<td>{{contact.tel}}</td>
<td>{{contact.address}}</td>
</tr>
</tbody>
</table>
<div v-show="isProcessing">조회중</div>
</div>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#example",
data: {
name: "",
isProcessing: false,
contactlist: []
},
watch: {
name: function(val) {
if (val.length >= 2) {
this.fetchContacts();
} else {
this.contactlist = [];
}
}
},
methods: {
fetchContacts: _.debounce(function() {
this.contactlist = [];
this.isProcessing = true;
var url = "http://sample.bmaster.kro.kr/contacts_long/search/" + this.name;
var vm = this;
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(json) {
vm.contactlist = json;
vm.isProcessing = false;
})
.catch(function(ex) {
console.log('parsing failed', ex);
this.contactlist = [];
this.isProcessing = false;
});
}, 300)
}
});
</script>
</body>
</html>결과
[{
"no": 1592030163195,
"name": "Francess James",
"tel": "010-3456-8289",
"address": "서울시",
"photo": "http://sample.bmaster.kro.kr/photos/90.jpg"
}, {
"no": 1592030163172,
"name": "Jain Ross",
"tel": "010-3456-8266",
"address": "서울시",
"photo": "http://sample.bmaster.kro.kr/photos/67.jpg"
}, {
"no": 1592030163112,
"name": "Rana Jackson",
"tel": "010-3456-8206",
"address": "서울시",
"photo": "http://sample.bmaster.kro.kr/photos/7.jpg"
}, {
"no": 1592030163182,
"name": "Ray Jackson",
"tel": "010-3456-8276",
"address": "서울시",
"photo": "http://sample.bmaster.kro.kr/photos/77.jpg"
}]v-cloak 디렉티브
<style>
#list {
width: 400px;
border: 1px solid black;
border-collapse: collapse;
}
#list td,
#list th {
border: 1px solid black;
text-align: center;
}
#list>thead>tr {
color: yellow;
background-color: purple;
}
[v-cloak] { display: none;}
</style>
<div id="example" v-cloak>
....
</div>
Vue 인스턴스 라이프 사이클
| 라이프 사이클 훅 | 설명 |
| beforeCreate | Vue 인스턴스가 생성되고 데이터에 대한 관찰 기능 및 이벤트 감시자 설정 전에 호출 |
| created | Vue 인스턴스가 생성된 후에 데이터에 대한 관찰 기능, 계산형 속성, 메서드, 감시자 설정이 완료된 후에 호출 |
| beforeMount | 마운트가 시작되기 전에 호출 |
| mounted | el에 vue 인스턴스 데이터가 마운트 된 후에 호출 |
| beforeUpdate | 가상 DOM랜더링, 패치되기 전에 데이터가 변경될 때 호출. 이 훅에서 추가적인 상태 변경을 수행. 추가적으로 랜더링 하지는 않음 |
| updated | 데이터의 변경으로 가상 DOM이 다시 랜더링되고 패치된 후에 호출. 이 훅이 호출되었을 때는 이미 컴포넌트의 DOM이 업데이트 된 상태임. 그래서 DOM에 종속성이 있는 연산을 이 단계에서 수행할 수 있음 |
| beforeDestroy | Vue 인스턴스가 제거되기 전에 호출 |
| destroyed | Vue 인스턴스가 제거된 후에 호출. 이 훅이 호출될 때는 Vue 인스턴스의 모든 디렉티브의 바인딩이 해제되고, 이벤트 연결도 모두 제거됨 |
<script type="text/javascript">
var vmSum = new Vue({
el : "#example",
data : { num : 0},
created : function() {
console.log("Created!!");
},
updated : function() {
console.log("Updated!!");
},
computed : {
sum : function() {
var n = Number(this.num);
if(Number.isNaN(n) || n < 1 ) return 0;
return ((1+n)*n)/2;
}
}
});
</script>
<!--
created 이벤트가 발생한 뒤 데이터가 변경될 때마다 updated훅이 실행
-->