Vue/Vue.js12 1-9. 재사용 컴포넌트, 부모<->자식 간 값 전달 template> h3>{{ title }}h3>template>script>export default { components: {}, props: { title: { type: String, default: '페이지 제목' } }, props에 정의되어 있는 데이터 변수들은 부모로부터 전달된 값들이다. 즉, props는 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용한다. ,custom event, emit, refs - 부모와 자식 컴포넌트간 값 전달을 위해 필요한 기능들 예제ParentView.vuetemplate> div> button @click="changeValue">변경button> child-com v-bind:str=".. 2024. 9. 12. 1-8. 라이프사이클 훅 template> div> div>{{ sampleData }}div> div> label for="">태어난 도시는?label> select name="" id=""> option value="" :key="city.code" v-for="city in cities"> {{ city.title }} option> select> div> div>template>script>export default { components: {}, data() { return { sampleData: '', cities: [], fnInterval: null } }, props: {}, s.. 2024. 9. 12. 1-7. computed와 watch computed computed는 data에 있는 key를 가지고, computed 안에 함수로 만들면 data 밑에 함수이름으로 있는 거랑 똑같은 효과를 가진다. watchcomputed와 유사한데, data에 선언되어 있는 key를 직접 감시하고 싶을 때 watch 사용하는 2가지 주요 이유특정 데이터 변수가 값이 변경이 발생했을 때, 특정 코드를 작성을 해서 실행을 해야 할 경우값의 변경사항을 계속 히스토리로 저장하고 싶을 때 2024. 9. 10. 1-6. 렌더링 조건 (v-if, v-show) v-if, v-else-if, v-else div v-if="userRole === 'G'"> button>조회button> div> div v-else-if="userRole === 'M'"> button>조회button> button>생성button> div> div v-else> button>조회button> button>생성button> button>삭제button> div> 조회 조회 생성 조회 생성 삭제 조회 생성 삭제 조회 생성 .. 2024. 9. 10. 이전 1 2 3 다음
