반응형
↑전 게시글의 이 문제는 vue.js의 핵심기능인 Reactivity(반응형)를 사용해서 편하게 개발할수 있다.
<Object.defineProperty()>
문법은 ↓
Object.defineProperty(대상객체, 객체의 속성,{
정의할 내용
});이렇게 값을 바꿀때마다 계속 화면이 바뀌는걸 Reactivity라 한다.
vue의 핵심은 데이터의 변화를 라이브러리에서 감지해서 알아서 화면을 자동으로 그려주는것인 Reactivity ★
이게 Data Bindings이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
var div = document.querySelector('#app');
div.innerHTML = 'hello wolrd';
//객체 선언
var viewModel = {};
//API -> Object.defineProperty();
//이 정적 메서드는 객체에 새로운 속성을 직접 정의하거나
//이미 존재하는 속성을 수정한 후, 해당 객체를 반환합니다.
//Object.defineProperty(); -> 객체의 동작을 재정의 하는 API
// 문법은 ↓
// Object.defineProperty(대상객체, 객체의 속성,{
// //정의할 내용
// });
Object.defineProperty(viewModel, 'str', {
get: function(){
//속성에 접근했을때의 동작을 정의한것
console.log('접근');
},
set: function (newValue) { //새로 할당된값
//속성의 값을 할당했을때 동작을 정의한것
console.log('할당', newValue);
}
})
</script>
</body>
</html>
반응형
'vue.js > vue.js 2' 카테고리의 다른 글
| 4. Vue.js와 vue개발자 도구 | 인스턴스 | 생성자함수 (0) | 2022.07.04 |
|---|---|
| 3. Reactivity 코드 라이브러리화 하기 | 즉시실행함수 (0) | 2022.07.04 |
| 1. HTML은 dom의 정보를 넣고, javaScript 는 해당 태그나 dom의 내용을 조작하는것. | console.log ,querySelector, innerHTML (0) | 2022.07.04 |
| 0. vue.js 개발자 도구 설정방법 | MVVM 모델에서의 Vue (0) | 2022.07.04 |
| 0. VScode 플러그인 다운 9개 (0) | 2022.07.04 |