\study\Vuejs_exercise>vue create vue-todo-list Vu프로젝트명을 카멜식(todoList)으로 입력할 경우 에러 발생. 반드시 케밥식으로 작성 vue/cli버전 3.x미만(1.x 혹은 2.x)일 경우 : vue init webpack 프로젝트명 *cli버전에 3.x이상일 경우 vue init 명령어는 모두 에러 발생 > Manually select features 선택시 필요한 설정들을 체크할 수 있음

Vue.js로 체크박스를 한번도 구현해본적 없었는데, 체크박스를 라디오버튼처럼 한 개만 체크된 상태로 구현해달라는 요건이 생김. 회사에서 시도 해봤는데, 전혀 감이 잡히지 않아 집에서 시도. 핵심은 제이쿼리는 Dom요소로 제어하지만, Vue로 구현한다면 값으로 컨트롤 해야 한다는 것이었음. [ 방법 1 ] : CheckBox.vue에 바로 적용 CheckBox.vue 전체체크 1 2 3 {{checkedValues}} {{this.isAllChecked}} {{removeValue}} 체크박스가 체크되면, checkedValues라는 배열에 체크된 value값이 담김. 근데, 이게 @click 발생시 메서드에서 checkedValues 값을 찍어보면 바로 들어가는게 아니라 클릭이벤트가 끝나구 들어감 (예..

- Atom Keymap : 아톰의 키 설정을 불러오는 플러그인 - Vetur : Vue.js 플러그인 - TSLint : 타입스크립트 문법 검사 플러그인 - ESLint : 자바스크립트 문법 검사 플러그인 - Auto Close Tag : HTML 태그 자동 닫기 플러그인 - Material Icon Theme : 폴더 아이콘 테마 *적용안될 경우 좌측 설치시 클릭하는(Extensions)클릭 - Material Icon Theme 한번 더 입력 - Set File Icon Theme 클릭 - Material Syntax : 코드 하이라이팅 플러그인 - Night Owl : 코드 하이라이팅 플러그인 - Live Server : 정적 파일을 로컬 서버에 올리고 자동 갱신해주는 플러그인 -Beauty 영역..

computed와 methods의 차이 computed는 인자를 전달할 수 없음 computed는 반드시 return값이 존재해야 함 template에서 함수 호출 형태인 ()를 사용할 수 없음 종속된 데이터 변경 시에만 계산됨 캐시됨 computed와 whatch computed와 whatch는 특정 데이터가 변경 될 경우 값을 조작할 수 있다는 측면에서 동일하지만, 데이터를 가공해서 보여주는 역할은 computed가 담당하고 watch는 아래와 같은 상황에서 사용함. - 서버와 통신 - DOM조작 - local storage, audio playback 같은 browserr API사용시

props 대소문자 구분 HTML속성은 대소문자를 구별하지 않고 모든 대문자를 소문자로 인식하므로 Vue에서 HTML을 표현 할 때 보통 kebab-case(하이픈으로 표기)로 표현하고 javascript에서 prop을 받아 사용할 때는 camelCase(단어시작시대문자로표기)로 사용. -HTML에서 prop을 사용할 때 대소문자 구분 -script에서 prop을 사용할 때 대소문자 구분 {{childData}} {{child-data}} PropsExTest.vue {{childData}} 참고 : 캡틴판교 님 인프런 강의

VueCLI 프로젝트 구성 node_modules/ : npm install 명령어로 다운받은 라이브러리 public/index.html : npm run serve실행시 로딩되는 파일,/ 애플리케이션의 뼈대가 되는 HTML파일 src/ : .vue파일, 애플리케이션이 동작하는 필요한 로직이 위치 assets/ : 이미지 등 애플리케이션에서 사용되는 파일들이 모여있는 디렉토리 components/ : Vue 컴포넌트들이 모여 있는 디렉토리 App.vue : 가장 최상위 컴포넌트 main.js : 가장 먼저 실행되는 javascript파일. Vue 인스턴스를 생성하는 역할 ,기본적으로 애플리케이션의 설정들 플러그인, 라이브러리들을 파악할 수 있는 청사진(구조도)이 됨. package.json : npm설정..