vue.js / 5

 
 
 
 
 
 
 
 
 
- reactive 
 
 

 
 
 

//이렇게 쓰게 되면 이 자체를 쓰게 되는게 아니라 categoryId.value를 쓰게 되는것

//reactive 되는 대상이 달라지는것

 

let categoryId = ref({});

 
 
 
 
- 원하는 구조를 쓸땐 reactive를 쓴다(?)
 
 
 

 
 
 
 
 
- 코드가 다 돌아가게 만든다음에(반복이 있더라고) 그 다음에 정리하는게 '고도화 작업' 이다
 
 
 
- 바뀌는것은 모델을 바꾼다고 생각하면된다. 걔를 직접 찾아서 바꾼다기 보다는...
 
 
 
 
- 바인딩 (selected 라는 단어 들어간 애들은 다 선택)

export default {
  data() {
    return {
      test: "haha",
      list: [{},{}], //null이면 오류나서 이렇게 빈 배열이라고 하는것 re active 특징있음 
      categoryId: 1,
      searchWord:"",
      categorySelected:"selected"
    };
    
    ----------//
    
    <li :class="categorySelected">
              <a href="" @click="categoryId=1">커피</a>
            </li>

 
 
 
 
 
 
- 데이터 바인딩 방식은 이런식으로...

     <ul @click.prevent="categoryClickHandler">
            <li :class="{selected:categoryId==0}">
              <a href="list">전체메뉴{{categoryId}}</a>
            </li>
            <li :class="{selected:categoryId==1}">
              <a href="" @click="categoryId=1">커피</a>
            </li>
            <li :class="{selected:categoryId==2}">
              <a href="" @click="categoryId=2">수제청</a>
            </li>
            <li :class="{selected:categoryId==3}">
              <a href="" @click="categoryId=3">샌드위치</a>
            </li>
            <li :class="{selected:categoryId==4}">
              <a href="" @click="categoryId=4">쿠키</a>
            </li>
          </ul>

 
 
 
 
 
 
- 요게 묶여있지 않은 개별

@EmbeddedId

private MenuLikeId menuLikeId;

 
 
 
 
- 요게 묶여있다는 뜻

@Embeddable

@Getter

@Setter

public class MenuLikeId {

private Long memberId;

private Long menuId;

}

 
 
 
 

아 필기한거 다 날라갔어 개빡챠!!!!!!!!!