Vue/Vue.js 문법
-
Vue.js 문법 - RefsVue/Vue.js 문법 2021. 7. 18. 20:55
Refs App.vue Hello World! 코드 이해하기 - ref 속성은 reference 단어의 약어 - ref 속성을 이용해서 레퍼런스 ID를 자식 컴포넌트나 HTML 요소에 부여함으로써 직접 접근할 수 있다 컴포넌트 Refs 예제 App.vue Hello.vue Hello~ 코드 이해하기 - 컴포넌트를 ref 속성으로 참조할 경우에는 참조된 이름 뒤쪽에 $el 속성을 명시 (this.$refs.hello.$el) - 해당 컴포넌트가 참조하는 요소가 출력됨 - 만약 참조하려는 컴포넌트 최상위 요소가 여러 개인 경우에는 어떠한 요소를 참조할지 정확히 알 수 없다 - 그래서 특정한 요소가 아닌 객체 데이터가 출력됨 최상위 요소가 2개인 컴포넌트 Refs 예제 App.vue /* template 생략..
-
Vue.js 문법 - Provide / InjectVue/Vue.js 문법 2021. 7. 18. 20:04
예제 코드 App.vue Parent.vue Child.vue {{ msg }} 결과 코드 이해하기 - App.vue 파일 data() 부분 message 문자 데이터를 정의 - 정의된 내용을 Parent.vue 파일을 거쳐서 Child.vue 에서 출력 - props 를 이용해서 데이터를 한 단계씩 내려주고 있다 - 이 경우에 두 컴포넌트 사이의 모든 컴포넌트에 props를 전달해야하므로 효율적이지 못하다 Provide / Inject - 이러한 경우에 Provide / Inject 를 사용 - 모든 자식에 대한 종속성 제공자 역활을 함 - 부모 컴포넌트는 데이터 제공을 위해 Provide 옵션을 사용 - 자식 컴포넌트는 데이터 사용을 위해 Inject 옵션을 사용 App.vue Parent.vue C..
-
Vue.js 문법 - 컴포넌트 SlotVue/Vue.js 문법 2021. 7. 18. 18:53
대체 콘텐츠 (Fallback Contents) App.vue Banana MyBtn.vue Apple 결과 코드 이해하기 - slot 태그를 사용하면 부모 컴포넌트 사이에 있는 컨텐츠 (Banana)를 받아준다 - 부모 컴포넌트에 컨텐츠가 없는 경우에는 대체 컨텐츠 (Apple)가 표시된다 - 부모 컴포넌트에 컨텐츠가 있는 경우에는 대체 컨텐츠는 표시되지 않는다 - 이러한 개념을 대체 컨텐츠 Fallback Contents 라고 부른다 이름을 갖는 슬롯 (Named Slots) App.vue Banana (B) MyBtn.vue 결과 코드 이해하기 - slot 태그에 name을 부여하여 부모 컴포넌트에서 이름을 가진 컨텐츠가 해당 slot으로 들어감 - 부모 컴포넌트에서는 v-slot: 디렉티브를 사용..
-
Vue.js 문법 - 컴포넌트 EmitVue/Vue.js 문법 2021. 7. 16. 02:54
Emit - 이벤트를 상속 App.vue Banana MyBtn.vue 결과 코드 이해하기 - 자식 컴포넌트(MyBtn.vue) 최상위 요소가 2개이므로 속성 상속이 적용되지 않음 - 즉, 부모 컴포넌트(App.vue)의 @click 이벤트가 동작하지 않음 - 이벤트를 직접 연결하기 위해 emit 을 사용 - emits 옵션 추가, 부모 컴포넌트 이벤트(click)를 명시 - @click="$emit('click')" 작성하면 부모 요소의 연결되어 있는 이벤트와 연결 - 예제 결과에서 오른쪽 버튼을 누를때만 동작 (부모 컴포넌트 메소드 log() 동작) @click="$emit('ITBlue')" emits: [ 'ITBlue' ] - click이 아닌 원하는 이름의 이벤트를 자유롭게 만들어 사용할 수도..
-
Vue.js 문법 - 컴포넌트 속성 상속Vue/Vue.js 문법 2021. 7. 16. 02:23
컴포넌트 속성 상속 App.vue Banana MyBtn.vue 결과 코드 이해하기 - 바로 자식 요소를 최상위 요소(루트 요소) 라고 부름 - 부모 컴포넌트(App.vue)의 속성과 값이 자식 컴포넌트(MyBtn.vue)의 최상위 요소에게 상속됨 - 이러한 개념을 속성 상속이라고 부름 - 최상위 요소가 2개 이상인 경우에는 2개 요소 모두 상속이 되지 않음 (어느 부분에 상속이 되는지 알 수 없기 때문) inheritAttrs MyBtn.vue 코드 이해하기 - inheritAttrs: false 속성의 상속을 사용하지 않는다 - 최상위 요소가 1개라도 상속하지 않음 특정한 요소에 상속을 사용하기 MyBtn.vue 결과 코드 이해하기 - 2개의 최상위 요소 (왼쪽은 상속 제거, 오른쪽은 상속 적용) -..
-
Vue.js 문법 - 컴포넌트 기초Vue/Vue.js 문법 2021. 7. 16. 00:52
컴포넌트 - 컴포넌트는 이름이 있는 재사용 가능한 인스턴스 예제 App.vue MyBtn.vue Apple 결과 컴포넌트 재활용 App.vue 결과 코드 이해하기 - 버튼 여러개가 화면에 출력 - 한번 만들어놓은 컴포넌트(Mybtn.vue)를 재활용 Props - 컴포넌트에 데이터를 전달하기 위해 props 가 등장 - Props 는 컴포넌트에 등록할 수 있는 커스텀 속성 - 값이 props 속성에 전달되면, 그 값은 해당 컴포넌트 인스턴스의 속성이 됨 - 부모 컴포넌트와 자식 컴포넌트 간의 데이터 통신 방법 이라고도 부름 예제1 - 데이터 전달 App.vue MyBtn.vue Apple 결과 예제2 - 클래스 추가 App.vue MyBtn.vue Apple 결과 예제3 - Slot - 컴포넌트 사이에 ..
-
Vue.js 문법 - v-model 수식어Vue/Vue.js 문법 2021. 7. 15. 23:11
v-model 수식어 .lazy .number .trim .lazy {{ msg }} 코드 이해하기 - 양방향 데이터 바인딩 예제 - @change 이벤트는 값이 바뀌고 나서 동작, 완료가 되어야 동작 - v-model 에서는 @change 이벤트를 .lazy 수식어로 사용 .number {{ msg }} 코드 이해하기 - input 요소에다가 입력 해야 하는 데이터가 숫자 데이터를 유지해야 한다면 .number 수식어를 사용 .trim {{ msg }} 코드 이해하기 - 앞쪽과 뒤쪽의 공백을 항상 제거한 상태로 유지
-
Vue.js 문법 - 폼 입력 바인딩Vue/Vue.js 문법 2021. 7. 15. 20:44
단방향 데이터 바인딩(연결) {{ msg }} 코드 이해하기 - data() 부분에 msg 데이터를 input 요소에 value라는 속성에 연결 - 추가로 h1 요소에 콘텐트 (content)로도 연결하여 화면에 출력 - 데이터 부분에서 HTML (template) 방향으로만 흐른다 (연결되어 있다) - 이러한 개념을 단방향 데이터 바인딩 이라고 부름 - 그렇기 때문에 input 요소를 수정하여도, 수정된 내용이 data의 msg 데이터를 갱신하지 않음 양방향 데이터 바인딩 {{ msg }} 코드 이해하기 - @input 이벤트는 input 요소에 데이터가 입력되면 handler() 동작 - handler() 는 input 요소에 데이터를 가져와서 msg 데이터를 갱신 - 갱신된 msg 데이터는 연결된 ..