LittleDeveloper

2.4 기타 디렉티브 주요 디렉티브들은 모두 다루었으니 나머지 디렉티브들을 알아보자. 1) v-pre : HTML 요소에 대한 컴파일을 수행하지 않는다. {{message}} v-pre 디렉티브를 사용하지 않았다면 콧수염 표현식을 사용해 message 속성의 값이 화면에 바인딩되어 나타나겠지만 v-pre 디렉티브로 인해 Vue 객체는 컴파일하지 않고 {{message}} 문자열이 그대로 출력된다. 이렇게 템플릿 문자열을 컴파일하지 않고 그대로 내보내기 위해 v-pre를 사용한다! 2) v-once : HTML 요소를 단 한 번만 렌더링한다. {{message}} 콘솔 창에서 message를 수정해도 화면에 수정사항이 출력되지 않는다. 즉, v-once 디렉티브는 처음 한 번만 렌더링을 수행하므로 Vue ..

v-for 디렉티브로 출력하는 데이터는 보통 배열이 많다. 그런데 배열 데이터가 변경될 때 추적이 되지 않는 작업이 있으므로 주의해야 한다. =>배열 데이터를 index 번호를 이용해 직접 변경하면 안되나?? 예를 들어, list.contacts[0] = {no:1, name:"winter", pos:"armamenter", address:"광야"}; 위의 코드처럼 배열 값을 변경할 수 없을까?? 정답은 No, 변경할 수 없다... 각 배열 값 내부의 속성을 직접 변경하는 것은 Vue 인스턴스 내부의 감시자(Watcher)가 추적하기 때문에 화면이 즉시 변경된다. list.contacts[0].name="winter"; 만약 기존의 배열 값을 직접 변경하고 싶다면, Vue.set 메서드를 사용하여 변경해..

2.3 반복 렌더링 디렉티브 반복적인 데이터를 렌더링하기 위해서는 v-for 디렉티브를 사용한다. v-for 디렉티브는 자바스크립트 언어의 for문과 유사하다. 아래의 예시를 통해 한번 알아보자. #예제 02-08 No. Name Position Address {{contact.no}} {{contact.name}} {{contact.pos}} {{contact.address}} model 객체는 내부에 contacts 라는 이름의 배열 데이터를 가지고 있다. 이 데이터를 여러 번 반복적으로 화면에 나타내야 한다. 이와 같은 작업을 위해 v-for 디렉티브를 사용한다. tr 이 바로 반복해야 하는 HTML 요소이다. 이 요소는 원본 데이터(contacts 배열)의 개수만큼 반복되어 나타난다. ... v-..

2.1 hellovuejus 예제 분석 지난 1장에서 예제를 통해 model 객체의 속성을 변경하면 화면이 변경되는 것을 확인했다. 이 index.html이 어떻게 구성되었는지 코드를 분석해보자. var model = { message: "첫 번째 Vue.js 앱입니다.", }; 위 코드에서 model 객체는 변수명 그대로 모델(Model) 객체로서, 데이터를 가지고 있다. var simple = new Vue({ el: "#simple", data: model, }); 또한 위 코드의 simple 객체는 Vue 객체이자 뷰모델(ViewModel) 객체이다. Vue 객체의 el 속성은 HTML 요소(Element)를 나타내고, data 속성은 모델 객체를 참조한다! 즉, Vue 객체는 HTML 요소와 데..

1.1 Vue.js란? Vue.js는 2013년 12월에 UI를 빠르게 개발하기 위해 만들어졌다. 따라서 Vue.js는 웹 화면 작성에 최적화된 자바스크립트 프레임워크이다. Vue.js는 크게 3가지 특징이 있다. 1) 많이 안 알려짐. React, Angular 에 비해 개발 생태계가 작은 편. => 하지만 급속도로 확산 중! 2) React, Angular 에 비해 대단히 유연하고 가벼움. (++가상 Dom이 있어 아주 빠른 UI 렌더링 속도) 3) 학습 곡선이 완만하다, 즉 배우기 쉽다. => 프레임워크의 확산 속도가 빠른 이유. 1.2 개발 환경 설정 Vue.js를 활용하기 위해 아래와 같은 툴이 필요하다. -Node.js -npm -VS Code -크롬 브라우저+Vue.js devtools -V..