본문 바로가기

Vue45

26. Vue - 컴포넌트 Refs 1. Refs란? - Vue에서만 제공하는 개념으로, 특정한 컴포넌트 또는 요소를 참조하는 방식을 말한다. - 기존에 JS를 사용하여 컴포넌트를 참조하는 방법을 개선시킨 형태다. 2. Refs를 사용하는 이유 a) 예제코드 [App.vue] Hello world! - h1태그가 갖고있는 내용을 콘솔에 출력하고 싶은 경우, 위와 같은 코드를 작성할 수 있다. - 그러나 Vue에서 제공하는 Refs를 사용하면 보다 적은 줄의 코드로 동일한 기능을 사용할 수 있다. b) Refs 예제코드 [App.vue] Hello world! [출력화면] c) 코드해설 - HTML 엘리먼트에 id 또는 class 명으로 선택자를 사용했다면, Vue Refs에서는 ref라는 속성값을 사용하여 선택자를 생성한다. - ref 선.. 2021. 5. 28.
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.

티스토리툴바