Vue
-
NuxtVue/Nuxt 2021. 9. 17. 16:33
Nuxt.js - Vue.js 프레임워크를 기반으로 SSR(Server Side Rendering) 웹 페이지를 만들 수 있도록 해주는 라이브러리 - SEO 등의 문제 해결 Nuxt.js 특징 - Vue 파일 쓰기 - 코드 분할 자동화 - 서버 사이드 렌더링 - 비동기 데이터 기반의 강력한 라우팅 시스템 - 정작 파일 전송 - ES6/ES7 지원 - JS & CSS 코드 번들링 및 압축 - 요소 관리 - 개발 중 Hot module 대체 - 전 처리기 지원: SASS, LESS, Stylus 등 - HTTP/2 푸시 헤더 준비 - 모듈식 아키텍처 확장 참고 https://nuxtjs.org/ The Intuitive Vue Framework Build your next Vue.js application ..
-
컴포지션 API - 기본 옵션과 라이프 사이클Vue/컴포지션 API 2021. 7. 22. 02:12
예제 App.vue {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} App.Composition.vue {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} 참고 https://v3.ko.vuejs.org/guide/composition-api-lifecycle-hooks.html 라이프사이클 훅 | Vue.js 라이프사이클 훅 이 가이드는 이미 Composition API Introduction와 Reactivity Fundamentals를 읽었다고 가정합니다. Composition API를 처음 사용하는 경우 먼저 읽어보십시오. 라이프사이클 훅에 접두사 ..
-
컴포지션 API - 반응형 데이터 (반응성)Vue/컴포지션 API 2021. 7. 20. 19:11
예제 App.vue {{ count }} 코드 이해하기 {{ count }} - 화면에는 count 값 출력, count 초기 값은 0 - count 값을 클릭하면 increase() 메소드 동작 - increase() 메소드는 count 값을 1씩 증가 - count 값이 변하면 화면에 count 값이 변경됨 데이터를 변경하면 화면이 바뀐다 (반응성) 컴포지션 API 리팩토링 App.vue {{ count }} 코드 이해하기 - setup() 메소드를 사용해서 컴포지션 API를 사용 - 컴포지션 API 를 활용할때는 반응성을 가지도록 해주기 위해서 ref 라는 기능을 사용, 객체 데이터를 반환한다 - 객체 데이터를 반환 하기 때문에 객체 데이터 내부에 있는 value 라는 속성으로 접근 - 사용하지 않..
-
컴포지션 APIVue/컴포지션 API 2021. 7. 20. 18:45
예제 App.vue {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} 코드 이해하기 {{ count }} / {{ doubleCount }} - 해당 h1 태그를 클릭하면 increase() 메소드 동작 - count 횟수를 +1 증가 - count 에 변화가 생겼으므로 doubleCount 동작 - doubleCount 는 count * 2 증가 {{ message }} / {{ reversedMessage }} - {{ message }} 는 message: 'Hello world!' 를 출력 - reversedMessage() 는 해당 message 를 반전시켜줌 특정한 부분을 해석하기 위해서 많은 노력이 필요 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: 디렉티브를 사용..