모던 웹 애플리케이션 개발/뷰(Vue)

소스 : https://github.com/donghyeon0725/vue_tutorials donghyeon0725/vue_tutorials Contribute to donghyeon0725/vue_tutorials development by creating an account on GitHub. github.com data 프로퍼티가 반응형이 되는 원리 vue 인스턴스가 초기화 되는 동안 Vue.js는 data 객체의 프로퍼티에 접근하고 데이터를 감싸는 프락시(대리인, wrapper)를 생성하여 데이터를 관찰할 수 있도록 만든다. 또한 내부에 _data를 만들고 this를 통해 data에 접근할 때 실행컨텍스트를 변경하는 것 같다.(이 한줄은 내 예측) 구체적으로 내부에 들어간 모든 값을 Object..

소스 : https://github.com/donghyeon0725/vue_tutorials css index.html {{ json.content }} {{ btnStr.left }} {{ btnStr.right }} {{ json.content }} 1. 이동할 요소에 draggable="true" 어트리뷰트를 추가할 것 2. 드랍될 엘리먼트의 drop 이벤트에 event.preventDefault()를 사용할 것 드랍 될 요소에 preventDefault를 사용하지 않으면 브라우저에서 드랍 이벤트를 허용하지 않을 수 있습니다. 다음의 스타일을 정의할 것 -- 드래그 될 때의 스타일 -- 드래그가 다른 엘리먼트 위에 있을 때 스타일 -- 다른 엘리먼트 위에 드랍될 때의 스타일 javascript lo..

소스 : https://github.com/donghyeon0725/vue_tutorials donghyeon0725/vue_tutorials Contribute to donghyeon0725/vue_tutorials development by creating an account on GitHub. github.com 목표 : 싱글페이지 어플리케이션(SPA)을 만들며, vue.js 가 내부적으로 어떻게 동작하는지 알아보는 것 Vue 인스턴스 생성 // Vue 인스턴스 내부에 전달할 객체를 options 이라고 부를 것이다. new Vue({ /*options*/ }) 뷰는 기본적으로 CLI를 사용하는 방법도 있겠지만, js 파일을 불러와 Vue 인스턴스를 생성하는 방법으로도 사용할 수 있다. 10번 줄 ..