본문 바로가기

Front-end85

25. Vue- provide, inject - 이번 포스팅에서 provide와 inject에 대해 알아볼 것이다. 1. 예제코드 [App.vue] [Parent.vue - components 폴더 안에 생성] [Child.vue - components 폴더 안에 생성] {{ msg }} [출력결과] * props - 부모와 자식 컴포넌트 간의 데이터 통신을 가능하게 한다. a) 코드의 흐름 - App.vue에서 Parent 컴포넌트를 출력한다. - Parent 컴포넌트는 msg라는 props(속성)를 사용하는데, 이 props는 Child.vue에서 넘어온다. - 그러므로 Parent 컴포넌트에서 Child.vue를 import한다. - 결론적으로 화면에 출력되는 문구는 Child.vue에서 'msg'라는 부분인데, 이는 props를 통해 App.. 2021. 5. 27.
24. Vue - slot 태그 - 이전 포스팅에서 slot태그를 이용하여 컴포넌트 내용을 출력하였다. - 이번 포스팅에서는 slot태그에 관하여 조금 더 알아보자. 1. Fallback content [App.vue] Banana [MyBtn.vue] ㅌ [작동순서] a) slot 태그 사이에 내용이 있는 경우 [출력화면] - 반드시 컴포넌트에 내용(=content)을 삽입해야만 slot태그에서 출력이 되는 것이 아니다. - 위의 예시처럼 slot 태그 자체에 내용(=content)을 삽입하여 출력할수도 있다. b) slot 태그 사이에 내용이 있고 컴포넌트에도 내용이 있는 경우 [출력화면] - 컴포넌트와 slot태그 모두 content를 포함하고 있는 경우, 위의 예시처럼 컴포넌트의 내용이 우선적으로 출력된다. - slot 태그에 .. 2021. 5. 25.
23. Vue- Emit(2) - 본 포스팅은 이전 포스팅과 이어지는 내용입니다. - 이전 포스팅을 읽고 본 포스팅을 이해하는 것을 추천합니다. 1. emit에서 event 객체 사용하기 a) 예제코드 [App.vue] Banana? [MyBtn.vue] h1태그 입니다. [출력화면] - App.vue에서 event 객체를 등록하여 해당 이벤트가 동작하면 event 객체의 내용이 출력되도록 하였다. - 하지만, 위의 출력화면에서 확인할 수 있듯이 콘솔에 undefined 라고 나오는 것을 확인할 수 있다. - 이 부분이 확실히 출력되도록 설정하는 방법을 알아보자. b) event 객체 이용방법(1) - 위의 코드에서 emit을 사용하는 부분에 매개변수를 하나 더 집어넣었다. - 123이라는 숫자는 event 객체를 통해서 전달되는 값.. 2021. 5. 24.
22. Vue - Emit(1) 1. Emit 이란? - 이전 시간에 속성 상속에 대해서 배워보았다. - 속성 상속은 최상위 컴포넌트가 하나 이상인 경우, 속성을 직접 컴포넌트에 할당하는 것을 의미한다. - 이와 비슷하게 Emit은 최상위 컴포넌트가 하나 이상인 경우, 이벤트를 직접 컴포넌트에 할당하는 것을 의미한다. - 어떻게 하는지 예제코드를 통해서 알아보자. a) 예제코드 [App.vue] Banana? [MyBtn.vue] - MyBtn.vue를 살펴보면 최상위 컴포넌트가 div와 h1 두가지 이다. - log 라는 이벤트를 등록해 놓았으나, 최상위 컴포넌트가 두개이므로 작동하지 않는다. - Emit을 이용하여 직접 이벤트를 할당하는 방법을 알아보자. b) Emit 적용하기 [MyBtn.vue] h1태그 입니다. - script.. 2021. 5. 24.
21. Vue - 속성 상속 1. Attribute Inheritance - 우선 예제코드를 살펴보자. [App.vue] Banana [MyBtn.vue] [출력화면] - 출력화면을 살펴보면 다음과 같이 클래스 속성에 btn과 test 속성이 들어가 있는 것을 확인할 수 있다. - 해당 버튼 아래에 다른 요소를 삽입하면 다음과 같은 결과를 출력하는데, - 기존에 존재하던 버튼에 test라는 클래스 속성이 사라진 것을 확인할 수 있다. - 이유가 무엇일까? a) 최상위 요소 - HTML을 작성할 때, Vue에서는 template 태그에 작성하게 된다. - template 태그의 자식요소를 '최상위 요소(= Root)'라고 부르는데, 위의 코드에서는 최상위 요소가 2개(= div 2개)가 있는 것이다. - 이처럼 최상위 요소가 하나 이.. 2021. 5. 21.
20. Vue - 컴포넌트 기초(props, slot) 0. 예제코드 a) App.vue b) MyBtn.vue Apple 1. 컴포넌트의 재활용 - 한번 만들어 놓은 컴포넌트는 재활용이 가능하다는 점이 Vue의 장점 중 하나다. - 컴포넌트를 만들어 놓고 해당 태그를 복사 붙여넣기만 하면 간단하게 재활용 할 수 있기 때문이다. a) props - 기본적인 구조는 복사해서 사용한다고 해도 약간의 변화를 주고싶다면 어떻게 해야할까? - 그럴 때 사용할 수 있는 옵션이 props다. - 다음 예제 코드를 보면서 알아보자. [App.vue] [MyBtn.vue] - style 부분 생략 Apple 1. 첫번째 포인트 - MyBtn.vue에서 props를 정의한 부분을 살펴보자. - color라는 속성을 정의하였다. type은 입력값의 형태를 의미하며, defau.. 2021. 5. 21.
19. Vue - V model 수식어 1. v-model 수식어 - 이번 포스팅에서는 이전 포스팅에서 배운 v-model 디렉티브의 수식어에 대해 알아보자. a) lazy (= change) - input 요소에 입력이 끝나고 난 후, 엔터키를 누르거나 다른 요소를 클릭해서 focus 상태에서 벗어나면 적용된다. {{ msg }} - 위의 change 기능을 v-model 수식어로 사용하면 다음과 같이 표현할 수 있다. {{ msg }} b) number - 사용자로부터 input요소를 통해 어떤 값을 입력받으면 해당 값은 String 타입이다. - number를 사용하면 문자가 아닌 숫자가 입력되었을 때, 이를 number 타입으로 변환해주는 기능이다. c) trim - input 요소의 입력값에 공백이 있는경우, 앞뒤의 공백을 없애주는 기능 2021. 5. 21.
18. Vue - 폼 입력 바인딩(V-model) 1. Form Input Binding a) 단방향 데이터 바인딩 - 단방향 데이터 바인딩이란, 이름 그대로 데이터가 일방통행한다는 뜻이다. - 다음 예제코드를 통해서 알아보자. {{ msg }} - 위의 코드에서 확인할 수 있듯이, 개발자가 설정한대로 문자열이 생성된다. - 양방향이라면 유저가 원하는 대로도 설정할 수 있어야 되는 것이다. b) 양방향 데이터 바인딩 {{ msg }} - 위의 코드를 해설하자면 다음과 같다. - @input 이벤트를 사용하여 어떤 값이 입력란에 입력되면 이벤트 핸들러가 동작한다. - 핸들러에서는 입력된 값을 event객체를 통해 받아온 뒤에 msg 데이터를 갱신한다. (갱신 = 반응성) - 위의 과정을 통해서 사용자가 입력한 값이 h1태그에 출력되도록 만들었다. - 이것.. 2021. 5. 20.
17. Vue - 이벤트 키 수식어 1. 키 수식어란? 먼저 다음 예제코드를 살펴보자. 위의 예제코드를 실행하게 되면 다음과 같은 결과가 콘솔에 출력된다. 키보드 이벤트를 콘솔에 출력하도록 만든 코드이다. 위의 사진은 a를 입력하고 엔터키를 눌렀을때 콘솔에 출력되는 결과이다. 이처럼, 키보드 조작에 의해 입력된 값을 이벤트 객체를 통해 확인할 수 있다. 이 과정을 이벤트 수식어를 통해 쉽게 구현할 수 있는데, 이를 키 수식어라고 부른다. 2. 키 수식어 사용방법 키 수식어는 반드시 케밥 케이스를 사용해야 한다. 이 부분을 유념하자. a) 특정 키 수식어 등록 위의 코드는 엔터키를 눌렀을 때만 핸들러가 동작하도록 만든 키 수식어다. 코드에서 볼 수 있듯이, @keydown 뒤에 점(.)과 함께 원하는 키를 등록할 수 있다. b) 다수의 키 .. 2021. 5. 20.

티스토리툴바