국비수업/수업정리
vue.js / 5
밀김
2023. 7. 12. 16:04
728x90
- 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;
}
아 필기한거 다 날라갔어 개빡챠!!!!!!!!!
728x90