<span *v-bind*:*class*="{textCompleted: *todoItem.*completed}">{{*todoItem.*item}}</span>위와 같이
v-bind 동적으로 할 수 있게 하는데
todoItem.completed 가 true 면 textCompleted고 flase 면 사라짐
v-bind로 동적으로 값에 따라서 클래스를 추가하거나 뺄 수 있는 것임
로컬스토리지에 있는 데이터를 모두 지우는 api
localStorage.clear();데이터를 조작하는 부분을 container 라고 한다.
즉 App 부분이 컨테이너고
하위컴포넌트들은 표현단인 presenter 컴포넌트라고 보면된다.
v-bind, v-on, this.$emit 사용법
v-bind: 내려보낼 프롭스 속성이름 ="현재 위치의 컴포넌트 데이터 속성"
v-on : 하위 컴폰너트에서 발생시킨 이벤트 이름 = "현재 컴포넌트의 메서드명"
this.$emit('이벤트이름' : 인자1, 인자2,,, );안티 패턴이란
습관적으로 많이 사용한느 패턴이지만 성능, 디버깅, 유지보수, 가독성 측면에서
부정적인 영향을 줄 수 있어 지양하는 패턴이다
todoItem.completed = !todoItem.completed;
this.todoItems[index].completed =!this.todoItems[index].completed;윗줄과 아랫줄은 똑같은 코드이다.
컴포넌트간의 요소를 더 명확히 하기 위해서 밑줄처럼 코딩함
하위 컴포넌트들은 프레젠트 컴포넌트 ( 보여주기 용 ) 으로 사용하고
상위 컴포넌트하나에서 모아서 (컨테이너 컴포넌트)데이터처리등을 한번에 하는것이 좋다.(리액트 방식이긴 함)
하위-> 보여주기
상위-> 데이터처리
vue 는
트렌지션, 애니메이션 등을 vue 공식 라이브러리에서 제공을 해줘서 리액트보다 장점이 있음
템플릿을 모듈화 하려면 x-template 라는 것을 사용할 수 있다.
다른 컴포넌트들이 공동으로 사용하는 것들은 components 파일 안에 common 파일 안에다가 넣어서 관리해 주는 것이 좋다.
slot
특정 컴포넌트의 일부 ui 들을 재사용할 수 있게 하는 기능
slot을 정의한 부분에서 뭐라고 써놓든, slot 을 상위 컴포넌트에서 재정의해서 쓸 수 있다.
v-on:click=”” 을 축약하면 @click=””
트렌지션을 사용할 떄
v-enter-to , v-leave 가 함께 잘 쓰이고
v-enter , v-leave-to 가 함께 쓰인다.
ES6의 여러가지 문법중 Vue.js 코딩을 간편하게 해주는 문법학습
const & let,
Arrow Function,
Enhanced Object Literals,
Modules 학습
EX6 란
이전의 자바스크립트와 문법이 많이 다른 최신 자바스크립트 문법이라고 할 수 있다.
BABEL 이라는 사이트에서 보면 알 수 있는데 다 쓰진 않을거고
최대한 간결하게 빠르게 코딩하는 법을 배울 수 있다.
빠르게 프로토타입, 재개발 편하게 코딩할 수 있음
ECMAScript 2015와 동일한 용어
2015년은 ES5(2009년) 이래로 진행한 첫 메이저 업데이트가 승인된 해
최신 Front-End Framework React, Angular, Vue에서 권고하는 언어 형식
(( Vue 가 나머지두개에 비해 ES6를 바로 알지 않아도 프레임워크에 대해 빨리 학습할 수 있다는 장점이있다. ))
ES5에 비해 문법이 간결해져서 익숙해지면 코딩을 훨씬 편하게 할 수 있음
구 버전 브라우저 중에서는 ES6의 기능을 지원하지 않는 브라우저가 있으므로 transpiling이 필요
Babel 이란
ES6의 문법을 각 브라우저 호환 가능한 ES5로 변환하는 컴파일러다.
