전체 글 (445) 썸네일형 리스트형 hands on vue - emit와 익숙해지는 연습문제(해답) [목표] 1. emit에 대한 해답 [App.vue] 더보기 [FriendContact.vue] 더보기 // FriendContace.vue 소스 {{name}} {{isFavorite_child? '(Favorite)' : ''}} Favorite toggle {{detailVisible ? 'Hide' : 'Show'}}Details NAME: {{name}} PHONE: {{phoneNumber}} EMAIL: {{emailAddress}} export default{ props: { name: { type: String, requried: true }, phoneNumber:{ type: String, required: true }, emailAddress:{ type: String, requri.. hands on vue - emit와 익숙해지는 연습문제 [목표] 1. emit과 익숙해지기 위한 연습문제를 만들었다. 검색을 하던 책을 찾아보던 혼자풀던 적어도 10분은 고민해서 풀어보기 충족해야할 조건은 다음과 같다. 조건1. => App.vue -> FriendsContact.vue 넘긴 데이터 friend가 있다. 그림에서 보이는 friends 값은 FriendContact.vue로 넘어간다. 알다시피 FriendContact.vue(자식컴포넌트)에서는 데이터 수정을 할 수 없다. 하지만 자식컴포넌트에서 favorite을 클릭했을 때 부모 컴포넌트의 isFavorite 값을 바뀌게 해보라 힌트는 this.$emit... 검색해서 알아오도록 소스코드 [App.vue] [FriendContact.vue] // FriendContace.vue 소스 {{nam.. hands on vue - v-bind를 사용하여 자식에게 넘기기 [목표] 1. 지금까지 케밥케이스로 자식 컴포넌트에 넘겼다. 아휴 어색하기도 하고 쓰는 곳을 한번도 못봤다. v-bind:변수명 혹은 :변수명 을 사용하여 자식 컴포넌트에 넘겨보자 [App.vue] [FriendsContact.vue] // FriendContace.vue 소스 {{name}} {{isFavorite_child? 'Favorite' : ''}} Favorite toggle {{detailVisible ? 'Hide' : 'Show'}}Details NAME: {{name}} PHONE: {{phoneNumber}} EMAIL: {{emailAddress}} hands on vue - props 상세설정 (type, required, default 등..) [목표] 1. 부모컴포넌트가 넘겨준 데이터를 자식 컴포넌트에서 props로 받았다. 만약 오지 않았다면? 원하지 않는 타입이라면? 필수적으로 넘어와야 되는 데이터라면? 이런 것들을 상세설정하는 속성이 있다. type은 말그대로 넘어오는 타입이다. required는 필수적인지 아닌지 설정하는 것이다. default는 넘어오지 않았다면 기본값은 어떻게 하는지다. 만약 필수설정을 했는데 안넘어온다면 어떻게 보일까? phoneNumber를 requried: true로 했는데 보내지 않았다면 console에 다음과 같이 뜬다. 연습해보려면 아래 소스 첨부한다. [App.vue] [FriendContact.vue] // FriendContace.vue 소스 Favorite Change {{name}} {{isFav.. hands on vue - 부모->자식 데이터 넘기기 연습예 [목표] 1. 부모-> 자식 데이터를 넘기고 해당 데이터를 변형하여 사용하는 데에 익숙함을 만들자 예제 : 자식 컴포넌트에 Favorite 버튼을 생성하고 클릭한 list가 Favorite 추가가 되도록 해라 수정 전 소스 [App.vue] [FriendContact.vue] // FriendContace.vue 소스 {{name}} {{detailVisible ? 'Hide' : 'Show'}}Details NAME: {{name}} PHONE: {{phoneNumber}} EMAIL: {{emailAddress}} [main.js] import { createApp } from 'vue'; import App from './App.vue'; import FriendContact from './comp.. hands on vue - component 간 데이터 넘기기 [목표] 1. vue는 컴포넌트 프레임워크다. 데이터가 컴포넌트 간에 같이 사용할 수 있다. 예를 들어 App.vue의 자식 컴포넌트는 FriendContact.vue 이다. App.vue에서 사용하는 데이터를 자식 컴포넌트에게 어떻게 보내는 지 알아보자 [예제] 빨간박스로 컴포넌트를 두개씩 하면 두개가 같은 데이터가 들어있다. 각각의 friend-contact 컴포넌트에 다른 데이터를 넣으려면 어떻게 할까? [App.vue] [FriendContact.vue] // FriendContace.vue 소스 {{name}} {{detailVisible ? 'Hide' : 'Show'}}Details NAME: {{name}} PHONE: {{phoneNumber}} EMAIL: {{emailAddress}}.. hands on vue - style 적용하기(별거없음) [목표] 1. vue-cli로 생성한 프로젝트에서 App.vue파일에서 스타일 태그 안에 css 넣기 [App.vue] // FriendContace.vue 소스 {{friend.id}} {{detailVisible ? 'Hide' : 'Show'}}Details NAME: {{friend.name}} PHONE: {{friend.phone}} EMAIL: {{friend.email}} hands on vue - component화 하기 [목표] 1. 조각난 부분을 모아서 하나의 페이지로 만들어보자 빨간 부분을 따로 빼서 component화 한 뒤에 사용하고 싶다. component용 폴더 만들고 파일을 생성한다. // FriendContace.vue 소스 {{friend.id}} ShowDetail NAME: {{friend.name}} PHONE: {{friend.phone}} EMAIL: {{friend.email}} import { createApp } from 'vue'; import App from './App.vue'; import FriendContact from './components/FriendContact.vue'; const app = createApp(App); app.component('friend-contac.. 이전 1 ··· 46 47 48 49 50 51 52 ··· 56 다음
