컴포넌트 태그명 : 컴포넌트 이름
반응형 웹 view port 를 사용
scope 를 쓰는 이유
CSS가 싱글 파일 컴포넌트에서 무시가 되고 컴포넌트 안에서만 유효한 스타일 속성으로 변환이 됨
v-model :(two - way binding )
화면에 있는 데이터랑 스크립트 단에 있는 데이터가 동기화 되는 부분
input 에 입력된 텍스트 값을 동적으로 바로 vue 인스턴스 안에 매핑하는 역할을 함데이터를 선언하고 연결해주면 됨
화면부분을 스크립트라고 한다.
data:function(){
return {
}
}vue.js 는 앵귤러랑 리액트의 장점을 결합한 것이다.
loval storage 쓰는 방법
localStorage.setItem(키,밸류);enter 눌렀을 때 버튼 누른 것 같은 효과를 주는 법
v-on:keyup.enter="addTodo"를 input 태그 안에 넣어주면 된다.
enter 를 눌렀을 때 addTodo 메소드가 실행되는 것과 같다.
list 만들 때 유용한 단축키
ul>li*3 ul 태그안에 li 태그 3개가 심어짐
라이프 싸이클이 있는데
created 인스턴스가 생성되자마자 실행되는 로직이다.
v-for
데이터 갯수만큼 뿌리는 법 (리스트 안에 넣어주면 됨)
<li v-for="todoItem in todoItems" v-bind:key="todoItem">1</li>App.vue(제일 상위 컴포넌트) style 에 shadow 를 정의해놨기 때문에 태그 안에 calss=”shadow” 하면 하위 컴포넌트들까지 적용이 된다.
font awesome 에 들어가서 아이콘 사용하고 싶은 거 쓰면 된다
https://fontawesome.com/v5.15/icons/times?style=solid
리스트 태그 안에 todoItem 과 index로 접근할 수 있다.
(각각 할 일 이름, 리스트 순서) 를 메소드에 넘길 수 있다.
localStorage.removeItem*(todoItem);
removeItem (키) ⇒ **api 임**splice ⇒ javascript 배열 api
특정 인덱스에서 하나를 지울 수 있다.
slice() 는 지우는데 기존 배열을 변경하지 않는 api
splice() 변경해서 새로운 배열을 반환해주는 api
텍스트값 + 텍스트가 체크됐는지의 진위값 (boolean) 을 넣어서 객체에 저장한것임
넣을때는JSON.stringify 해주고 꺼낼때는 JSON.parse 해줘야함
parse ⇒ string 을 객체 형태로 바꿔줌
