[24.05.27] Vue.js_이벤트/스타일 처리

[복습]

1) computed

2)v-if

1. 배열

• 위의 3개 권장 안함
• ES6버전부터 .of 사용 권장

1) [1, 2, , ,3, 4] 가능

• undefined로 정의됨

2) 크기 조정 가능

3) 순회 방법

• of : 값 저장
• in : 인덱스(키) 저장
  → 정의 안되면 건너뛴다

2. 2차원 배열

• 배열 안 배열
  

1) 순회

• 루프 돌때도 2중 for문 써야함
• 높은 차원 > 낮은 차원 순으로 쓰기
• ar [0][0] > 줄선택 / 컬럼선택

3. 유사배열

4. 배열 메서드

1) 검색 리턴

2) 추가/삭제

• push : 여러값 가능

splice(위치, 제거수, 추가(여러값 가능))

💡 원본이 바뀐다. (mutable) 

• 지정 요소 제거하는것 제일 많이 쓰임

slice(start, end) 범위

• 부분 집합 리턴
• start에서 end-1 까지 복사 ( 단, 프리미티브일때만 복사 가능)

→ 원래 ar2=ar1 하면 참조가 됨(같은 주소 가리키는것)

• 참조일때, 참조는 복사 안됨, 여전히 같은 주소 가리킴

💡 얕은 복사라고 부른다. (새로운 배열 리턴해준다) 💡 복제해서 사용해서, 비포 애프터를 알 수 있다. (no mutation)

.concat(arr1 ……)

• 원본 배열 내용 변경없음
  

3) 정렬

.sort([함수])

• 원본 내용 변경됨
  💡 cpu : - 연산자로 크기 비교함

ex)

• 문자열로 비교가 디폴트이므로 생기는 문제가 있음
  
• 해결 → sort(안에 함수 지정)

대소문자 정렬

• 아스키코드 순으로 정렬 (대소문자 구분)
• 소문자는 함수써서 if 비교해줘야함

4) 순회

.foreach(함수)

매개변수로 함수가 전달됨

.filter(함수)

• 새로운 배열 리턴됨 → true 값만
• 체인이 가능함
  
  필터걸고, 필터걸고, 필터걸고 …..

.map(함수)

• 개수 변경 없음
• 가공하여 새로운 값 리턴

💡 **함수적 프로그래밍** 이라고 부른다. (함수를 마치 매개변수로 주고, 리턴값으로 받는것)

5. Todolist

1) 부트스트랩 사용

• container : BT5 클래스, 중앙정렬
• card : header,body, footer 파트 나눠줌

💡 여기까지 골격 만들어줌

2) body 골격

• row : 12개 컬럼 만들겠다
• input-group : input+ span
• btn : 버튼화

3) row 골격

• list-group : 리스트
• badge : 삭제 버튼?
• float-end : 오른쪽 끝으로

4) 데이터 연결

data()

• todo : 추가
• todolist
• gettime : 정수 리턴

methods()

• addTodo
• push : 데이터 넣기
• findIndex : 아이템 찾기

💡 여기까지 스크립트 부분 완료

5) 스크립트와 템플릿 바인딩

데이터 : 데이터

• trim
• @enter

이벤트 : 클릭, 추가토글, 삭제

• @click

스타일 : 완료여부에 따라

6) Todo에 루프 걸기

• v-for
• :class= {}
  {’클래스명’ : 불린}으로 적용제외 제어
• 3항 연산자
  T/F 적용여부 제어
• @click.stop : 버블링 안하겠다
  부모에 click 있고, 자식과 다른 행동할때

7) const A = Null ?? ‘널일때 값지정’

• T/F 판단해서
• 왼쪽이 널, 오른쪽이 디폴트

8) splice 와 slice 의 차이점

면접문제로 나올 수 있음
sp : 뮤터블해서 원본의 값이 바뀐다
sl : 원본이 안바뀜 / 비포 애프터를 알 수 있다. (no mutation)