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설정..

Json Key 가져오기 : Object.keys()사용 let jsonObj = {'이름':'에이미','나이':5}; Object.keys(jsonObj); console.log(Object.keys(jsonObj)); //(2) ['이름', '나이'] Json Key, Value 가져오기 * 원래 Key는 String을 사용하지만 예시를 위해 임의로 적용해봄 var jsonStr = '[{"1":"9"},{"3":"3"},{"5":"3"},{"6":"7"}]';//Json형식의 String변수 var jsonArr = JSON.parse(jsonStr); //Json형식의 String값 -> Json객체로 변환 //jsonArr은 jsonObject가 4개 들어있는 배열 //console.log(js..

chart.js로 차트사용방법은 여기 클릭 -html코드 -css코드 .pie-chart1 { display:inline-block; width: 300px; height: 300px; background: conic-gradient(#8b22ff 0% 25%, #ffc33b 25% 56%, #21f3d6 56% 100%); border-radius: 50%; } 출처: gahyun-web-diary.tistory.com/93

1. www.chartjs.org/ 접속하여 'Get Started' 클릭 2. 좌측 메뉴 'Installation' 클릭 후 우측 URL 클릭 3. chart.js 클릭 후 다운로드 * 최종적으로 'chart.min.js' , 'chart.min.css' 필요하므로 하단 클립보드로 해당 파일 복사해도됨 4. 다운로드 후 압축을 풀면 아래와 같이 많은 파일들이 다운로드 되는데, 여기서 dist 폴더에 있는 'chart.min.js' , 'chart.min.css' 파일 차트를 적용할 자신의 프로젝트에 넣어주기 5. 아래와 같이 코드 추가 *나의 경우 '원형차트'를 적용해주었기 때문에