-
Vue의 장점 - ReActivityVUE.JS 2020. 4. 16. 00:17
Vue.js 를 사용할 경우 ReActivicity의 장점을 갖는다.
즉, 변수의 할당된 값이 변경될 경우, 브라우저가 그 것을 감지하여 화면에 뿌려주는 값 또한 자동으로 변경되는 것을 말한다. (반응성)
Vue를 이용하지 않고, 일반적인 자바스크립트를 이용할 경우 아래와 같은 코드를 사용하여 ReActivity를 구현해볼 수있다.
123456789101112131415161718192021222324252627282930313233343536<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"></div><script>var div = document.querySelector('#app');var str = 'hello world';div.innerHTML = str;viewModel ={};Object.defineProperty(viewModel, 'str',{get : function() {console.log('접근');},set : function (newValue) {console.log('할당', newValue);div.innerHTML = newValue;}});</script></body></html>http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter아래와 같이 ViewModel.str를 변경할 시에 화면 값도 같이 변경되는 것을 볼 수 있다.
'VUE.JS' 카테고리의 다른 글
emit 개념 관련 정리 (0) 2020.04.30 Props 관련 예제 및 실습 (0) 2020.04.26 지역컴포넌트 - 전역컴포넌트 관련 정리 (0) 2020.04.19 HELLO VUE .JS 이해하기 (0) 2020.04.18 VUE의 특징 (계속 업데이트) (0) 2020.04.12