기존과 달라진 ES6에서의 리스트 순회 for i++ for of const list = [1, 2, 3]; for(let i = 0; i < list.length; i++) { console.log(list[i]); } for(const a of list) { console.log(a); } Array const arr = [1, 2, 3]; for(const a of arr) { console.log(a); } Set const set = new Set([1, 2, 3]); for ( const a of set) console.log(a); Map const map = new Map([['a', 1], ['b', 2], ['c', 3]]); for (const a of map) console.log(..
평가 코드가 계산(Evaluation)되어 값을 만드는 것 일급 값으로 다룰 수 있다 변수에 담을 수 있다 (함수를 변수에 담을 수 있다) 함수의 인자로 사용될 수 있다 (Parameter) 함수의 결과로 사용될 수 있다 (return 값) const a = 10; const add10 = a => a + 10; const r = add(10); console.log(r); // 20 일급 함수 함수를 값으로 다룰 수 있다 조합성과 추상화의 도구 const add5 = a => a + 5; console.log(add5); // a => a + 5 console.log(add5(5)); // 10 const f1 = () => () => 1; // () => 1 console.log(f1()); // (..
이벤트 리스닝 하기 v-on 디렉티브는 단축 문법으로 @ 기호를 사용하며, DOM 이벤트를 수신하고 트리거될 때, 사전 정의해둔 JavaScript 코드를 실행 v-on:click="handler" 또는 줄여서 @click="handler"와 같이 사용 인라인 핸들러 이벤트가 트리거될 때 실행되는 인라인 JavaScript 1 추가 숫자 값은: {{ count }} 메서드 핸들러 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로 v-on은 컴포넌트의 메서드 이름이나 메서드를 가리키는 경로를 실행할 수 있게 구현 function greet(event) { alert(`안녕 ${name.value}!`) // 'event'는 네이티브 DOM 이벤트 객체입니다. if (event) { alert(ev..
조건부 렌더링 v-if, v-else-if, v-else를 형제 요소로 사용할 수 있다 Hello Vue! Application.. Good Morning~ template 태그를 사용하면 template 안에 있는 내용만 출력된다 Hello Vue! Application.. 1234 987 Good Morning~ v-show true/false 값에 상관없이 해당요소를 구조적으로 출력하고 화면에 보이는지 아닌지는 CSS로 제어를 한다. 연결된 데이터의 true/false값에 따라 css의 display: none으로 바꾸거나 속성과 값을 제거하며 화면에 요소를 보여지거나 보여지지 않게 한다 초기 렌더링 비용이 높고 전환 비용이 낮다 보여지거나 보여지지 않는 구조가 많을 때 적합 v-cloak 디렉티브..
