props

props로 데이터를 부모요소에서 자식요소로 전달할 때 하나의 데이터가 아니라 여러 데이터가 담긴 객체이면 for를 통해 하나씩 보내줘야 한다.

<template>
  <Menu :menu="menu"/>
  <nav>
    <ul>
      <Product v-for="product,i in products" :key="i" v-bind:product="product"/>
    </ul>
  </nav>
</template>

v-on event(@~)

click 마우스를 클릭했을 때 실행함
dblclick 마우스를 더블 클릭했을 때 실행함
mouseover 마우스의 포인트가 요소 위로 올라왔을 때 실행함
mouseout 마우스의 포인트가 요소 밖으로 벗어났을 때 실행함
mousemove 마우스의 포인트가 이동했을 때 실행함
mousedown 마우스의 버튼을 눌렀을 때 실행함
mouseup 마우스의 버튼을 놓았을 때 실행함
keydown 키보드의 키를 눌렀을 때 실행함
keyup 키보드의 키를 놓았을 때 실행함
keypress 키보드의 키를 눌렀다가 놓았을 때 실행함
change 요소가 변경될 때 실행함
submit < Form >이 제출될 때 실행함
reset < Form >이 재설정될 때 실행함
select < select >의 값이 선택되었을 때 실행함
focus 태그에 포커스가 있을 때 실행함
blur 태그에 포커스를 잃었을 때 실행함

수식어

.prevent 기본 이벤트의 자동 실행을 중단 시킴 preventDefault() 과 동일한 기능
.stop 이벤트가 전파되는 것을 중단 시킴 (Bubbling 중단) stopPropagation() 과 동일한 기능
.capture 포착 단계에서만 이벤트를 발생시킴 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리함
.self 발생 단계에서만 이벤트를 발생시킴 event.target이 엘리먼트 자체인 경우에만 트리거를 처리, 자식 엘리먼트에서는 실행안됨
.once 이벤트를 한번만 실행 시킴
.passive 기본 이벤트를 취소할 수 없게 함 있을지 모를 .preventDefault()를 실행 안되게 함.

print

javascript에서 print를 명령하면 정말로 프린트 하는 화면이 뜬다...신기하면서도 킹받았음..

칸반보드 드래그 앤 드롭

드래그앤 드롭으로 카드를 진행전, 진행중, 완료 상태에 옮기는 로직을 구현하는데 힘이들었다.

먼저 마우스 왼쪽버튼을 클릭이아니라 눌렀을때 (mousedown) 해당 카드에 todo의 정보를 따로 저장한다.

드래그하여 다른 위치에 놓으면 @change를 통해 상태별 리스트 길이가 변하면 작동되도록 하였다. 드래그 하여 배열의 변화가 생기면 저장해놨던 정보를 put 요청하여 새로운 상태로 업데이트하는 로직이다.

로직은 잘 짰지만 데이터를 백엔드로 보내는 과정에서 상태 값이 잘 안들어가서 애먹었다.