eunas blog

캡틴판교님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 실습한 내용입니다. TodoHeader.vue TODO it! TodoInput.vue TodoList.vue {{ todoItem.item }} TodoFooter.vue Clear All App.vue

(function() { //JavaScript 즉시 실행 할 내용 입력 })();

앞선 HTML 문제점을 Vue 기능인 Reactivity를 이용하여 구현해보자 이러한 특성을 Vue의 Reactivity 즉, Vue의 반응성이라고 한다. str이 변했을 때, 계속하여 그 변한 값에 맞추어 데이터를 뿌리고 싶으면 defineProperty API의 set에서 div에 newValue를 innerHTML을 이용하여 셋팅해주면 된다. set: function(newValue) { console.log('할당', newValue); div.innerHTML = newValue; } 그럼 newValue가 변할 때 마다, 값이 자동으로 재할당되는 것을 볼 수 있다.

1.VS code에 git clone하여 수업용 소스 코드 import 완료한 상태 - Vetur 플러그인 설치 - Material Icon Theme 플러그인 설치 - Night owl 플러그인 설치 (코드 강조) - Live server 플러그인 설치 (open with live server) 2. 플러그인 설치 후, VS code 재시작! 3. live server로 켠 뒤, 크롬 개발자 도구 - vue 패널 선택하여 이용

1. visual studio code 설치 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications. code.visualstudio.com 2. node.js 설치 (LTS로 설치) htt..