🔍슬롯(Slot)이란? 슬롯은 컴포넌트를 보다 디테일하게 활용할 수 있도록 하는 도구이다. (=기존 컴포넌트 재사용성을 높여줌) 컴포넌트에 콘텐츠 혹은 다른 컴포넌트를 또다른 방식으로 주입시킬 수 있는 방법 🔍슬롯 기본 예제 Slot은 부모 컴포넌트에 특정 문법에 따라 쓰인 html 코드를 자식 컴포넌트에 보내는 역할을 함. 부모 컴포넌트인 About.vue에 아래 코드를 작성 한다. 그럼 자식 코드의 slot 태그 위치에 해당 코드가 추가되어 로드된다. 만약 slot을 두 개 만들고 각기 다른 자리에 html 코드를 넣고 싶다면 slot에 이름을 붙여주면 된다. 그럼 header 이름을 가진 slot 태그에 해당 코드가 추가되며 만약 default로 지정할 경우 이름이 정해지지 않은 곳에 추가됨. 만약..

🔍뷰 라우터(Vue-router)란 싱글 페이지 애플리케이션(SPA) 여러 화면을 하나의 페이지 안에서 제공하면서 화면을 별도로 로딩하지 않는 방식. 뷰 라우터(vue-router) Vue.js에서 SPA 구현 시 사용자 요청 경로에 따라 해당하는 컴포넌트에 매핑하여 렌더링을 결정해주는 플러그인. 뷰 라우터 설치 npm install vue-router //vue router 설치 import Vue from 'vue' import VueRouter from 'vue-router'//main.js 추가 🔍뷰 라우터(Vue-router) 동작 방식 vue 설치 후 폴더 구조를 보면 아래와 같이 html 파일은 index.html 단 하나로 구성되어 있다.(SPA) index.html에서 id로 app을 매..

🔍조건부 렌더링 Vue.js에서도 if문을 제공한다. Vje.js에서 조건부 렌더링 시에 사용하는 디렉티브는 v-if, v-show가 있다. 🔍예제 show에 false를 주었기 때문에 브라우저 화면에 아무 것도 나타나지 않는다. 이번에는 토글 버튼을 추가하는 코드를 작성해 보았다. true로 주었기 때문에 토글 버튼 클릭 시 Yes 메시지가 나타난다. 여러 개의 div 태그에 조건부 렌더링을 하고 싶다면 template 태그로 묶어서 사용하면 된다. 아래와 같이 v-if와 @click을 같이 줄 수도 있다. 버튼 클릭 시 숫자가 1씩 증가하는 것을 확인할 수 있다. 그렇다면 v-if와 v-show의 차이점은 무엇일까? 아래의 개발자도구에서 확인해 보면 알 수 있듯이, v-if는 조건에 따라 컴포넌트가 ..

회사에서 Vue.js로 작업을 하고 있어서 기초 공부를 시작했다. 뷰는 공식 문서가 굉장히 잘 정리되어 있어서 공식 문서랑 유튜브로 기본 공부를 시작하려고 한다. https://kr.vuejs.org/ Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 🔍Vue 설치 방법 크롬 브라우저에 Vue Devtools 설치 직접 cdn 프로덕선 버전 CLI Vue CLI(Vue Command Line interface)는 기본 뷰 개발환경을 설정해주는 도구. VS Code 터미널 실행 후 아래 명령어로 설치. npm install -g @vue/cli +개발 툴은 VS Code 사용 예정