전체 글 (445) 썸네일형 리스트형 hands on vue3 - 주어진 소스를 가지고 @blur를 이용한 validation을 해보기 [목표] 1) @blur 속성에 대해 익숙해지기 Form에는 이름과 나이를 넣는 input이 있다. 이름과 나이 칸을 비워놓는다면 다음 조건을 만족시켜라 첫째) input박스의 border-color를 red로 하기 둘째) input박스 아래에 p 태그를 이용하여 입력하라는 문구를 적어놓기 아래는 주어진 소스다 해당 소스를 갖고서 수정한 뒤 완료 코드와 비교해보시오 [App.vue] [TheForm.vue] Your Name Please Check Your Name Input Your Age (Years) Please input your age How did you hear about us? Google Word of mouth Newspaper What are you interested in? News.. hands on vue3 - component에서 수정된 값을 부모에서 받기 [목표] 부모에서 넣은 component태그 즉, 자식 안에서 값이 변경되면 부모에서 값을 받아보자 [App.vue] [Number.vue] This is Number Money: hands on vue3 - 제공된 소스로 체크,라디오,드랍박스 값을 v-model로 구해보자 [목표] : v-model로 name으로 grouping된 체크, 라디오, 드랍박스 값을 구하여 버튼을 클릭하여 submit할 때 console에 나오게 하라 해답을 보기 전 제공된 소스로 직접 해보길 바람.. [App.vue] [TheForm.vue] Your Name Your Age (Years) How did you hear about us? Google Word of mouth Newspaper What are you interested in? News Tutorials Nothing How do you learn? Video Courses Blogs Other Save Data 아래는 해답이다 [App.vue] 수정없음 [TheForm.vue] Your Name Your Age (Years) H.. hands on vue3 - 조심하라 ref로 받으면 Number타입이 아니다! [목표] : 1. input type=number 에서 v-model과 ref로 받을 때의 차이점을 알아보자 2. 콘솔에 나타나는 Number 와 String의 차이점을 살펴보자 3. v-model의 숨겨진 v-model.number, v-model.trim 에 대해서 알아보자 input type=number 에서 v-model과 ref로 받을 때의 차이점을 알아보자 Your Age (Years) 타입은 Number v-model, ref 각각 변수에 할당했다. console에 찍어보자 export default{ data(){ return{ inputName: '', inputAge: 0, }; }, methods: { submitData(){ console.log(this.inputName); con.. hands on vue3 - 제공된 소스로 설문조사 유효성검사 만들기 연습문제 - 1 [목표] : 설문조사에 빈칸을 넣으면 안된다. 유효성 검사를 통해 만들어보도록한다. 먼저 나이를 적으면 콘솔에 나타나도록 하라 [App.vue] [TheForm.vue] Your Name Your Age (Years) How did you hear about us? Google Word of mouth Newspaper What are you interested in? News Tutorials Nothing How do you learn? Video Courses Blogs Other Save Data 아래는 해답소스다 [App.vue] 수정없음 [TheForm.vue] Your Name Your Age (Years) How did you hear about us? Google Word of mouth.. hands on vue3 - 동적 component를 사용하기 위한 기술들 연습 [목표] : 동적으로 변하는 component들을 사용하기 위해 필요한 스킬들을 연습해보자 1. component는 동적으로 변하기 때문에 custom event(자식에서 넘어온 emit 이벤트)들을 어떻게 처리할 것인가. 2. component가 A에서 작성하다가 B로 넘어왔을 경우 A에 대한 데이터를 어떻게 유지할 것인가. 3. 추가) form에서 submit를 할 경우 어떻게 reload가 안되게 할 것인가. 먼저 소스와 요구사항들을 확인하고 직접 구현한 뒤에 비교해보자 요구사항 1. 버튼을 hover할 경우만 색상이 진하게 바뀌도록 하라 2. 클릭한 버튼만 보라색으로 바뀌게 하라 3. 두 개의 버튼을 base-card 컴포넌트로 묶어라 4. Add Resource에서 추가했을 때 Stored Re.. hands on vue3 - provide & inject 이용하여 resource 구현하기 [목표] : 자식 컴포넌트에게 props로 데이터를 넘겨왔다. 두번 이상의 자식을 거친다면 다이렉트로 넘겨주는 provide&inject를 사용한다. 동적으로 변하는 component에게는 어떻게 props를 전달할까? project & inject가 훨씬 더 편할거 같다. props를 쓴다면 동적으로 바뀌는 component마다 필요없는 데이터임에도 불구하고 전달해줄 가능성이 있다. 해답 코드를 보기 전에 도전해보자 [App.vue] [TheResources.vue] Stored Resources Add Resource [StoredResource.vue] [LearningResource.vue] {{res.title}} {{res.description}} Delete View Resource hands on javascript - some 연습문제 const fruits = ["apple", "banana", "mango", "guava"]; some 함수를 이용하여 fruits 배열에 apple 있는지 Boolean 값을 return 해주는 함수를 만들어라 const fruits = ["apple", "banana", "mango", "guava"]; function checkAvailability(arr, val){ return arr.some((arrVal) => val == arrVal); } console.log(checkAvailability(fruits, "banana")); 이전 1 ··· 43 44 45 46 47 48 49 ··· 56 다음
