eunas blog

var obj = { num:10, getNumber : function() { console.log(this.num); //this는 객체인 obj를 바라본다. console.log(obj.getNumber()); //10 } } console.log(obj); var Vue = { el : '', data : { num:10 }, methods : { getNumber : function() { this.num; //10을 가리킴. this는 Vue를 바라본다. } } } 근거

Event는 하위에서 상위 컴포넌트로 통신하는 방식. 상위 컴포넌트에 이벤트를 발생시킴 실습 {{ num }}

Root 컴포넌트에서 지정한 속성 값이 바뀌면 (ex: num, message) 자동으로 자식 컴포넌트의 값도 바뀐다. 이것이 바로 Vue의 Reactivity

Vue.component : 전역 컴포넌트로 사용 이는 중소 규모 프로젝트에서 유용하며, 좀 더 복잡한 프로젝트나 프론트엔드가 Javascript기반인 경우 단점이 생긴다. - 모든 구성 요소에 대해 고유한 이름을 지정하도록 강요되어짐 - 구문 강조가 약하기 때문에 여러 줄로 되어진 HTML에 가독성이 좋지 않은 슬래시가 많이 들어감 - HTML, Javascript가 컴포넌트로 모듈화 되어있으나, CSS는 지원되지 않음 이러한 단점을을 Webpack, Browserify같은 빌드 도구를 이용하여 .vue 확장자를 가진 싱글 파일 컴포넌트로 해결(export default)할 수 있다. .vue 파일이 하나의 독립적인 컴포넌트 기능을 함 div p {{greeting}} World! other-compo..

┌> 상위 컴포넌트 ┐ 이벤트 발생└ 하위 컴포넌트

지역/전역 컴포넌트의 차이점? 전역 컴포넌트는 라이브러리 형식으로 만들어 전역으로 사용해야할 때에만 사용. 전역이므로, 인스턴스를 만들때마다 생성해 줄 필요가 없다. //오류가 나면서 화면에 보이지 않는다. footer는 지역 컴포넌트이고 app과 매핑되어 있으므로

지역 컴포넌트 등록 new Vue({ el : '#app', //객체 리터럴 열어준다. //key-value component : { '컴포넌트 이름' : 컴포넌트 내용 } });

컴포넌트? 컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능. 컴포넌트 기반으로 화면을 개발하게 되면, 코드의 재사용성을 높여 개발의 속도를 높일 수 있다. 인스턴스를 생성하면 기본적으로 Root 컴포넌트가 된다. 전역 컴포넌트 등록 Vue.component('컴포넌트 이름', 컴포넌트 내용);

new Vue({ el : '#app' , //마운트 할 요소 template : '', data : {//객체 또는 배열로 지정 name : 'kea', message : 'hi' }, methods : { }, created : function() { }, watch : { } }); el : 인스턴스가 그려지는 화면의 시작점(특정 HTML 태그) template : 화면에 표시 할 요소 (HTML, CSS) data : 뷰의 반응성(Reactivity)가 반영된 데이터 속성 methods : 화면의 동작과 이벤트 로직을 제어하는 메서드 created : 뷰의 라이프 사이클과 관련된 속성 watch : data에서 정의한 속성이 변화했을 때, 추가 동작을 수행할 수 있게 정의

뷰로 개발할 때 필수로 생성해야 하는 코드 함수 이름이 대문자 : 생성자 함수를 의미