# vue3
[2022.06.16] Vue slot, template(v-slot)
컴포넌트를 자유자재로 손쉽게 사용할 수 있는 도구이다.prop이나 data, 이벤트 외에도 실질적인 템플릿 코드 조각을 통째로 보내서 화면에 보여줄 수 있는 유용한 기능이다.먼저, components 폴더 안에 slot 폴더를 만들고slot폴더 안에 CardView.v
[2022.06.13] Vue component - 오브젝트 컴포넌트로 각각 다른 데이터 바인드하기, non-prop 속성
먼저 products 데이터 배열을 만들고 오브젝트 아이템을 작성하였다.템플릿 태그 안에 html 요소도 작성해주었다.li 태그 안에 product 오브젝트가 리스트로 작성된다.이제 이 오브젝트들을 하나하나의 모양을 가진 컴포넌트로 만들어보고자 한다.기본적으로 반복문을
[2022.06.12] Vue component - Object props 전달 및 default 값 설정하기
[2022.06.11] Vue component - 컴포넌트 만들고 불러오기, props 사용 및 주의사항 이전 포스트에서 사용했던 코드를 이어서 작성하였다. props 복습 어떤 데이터를 넘겼을 때 자식 컴포넌트에서 반드시 해당 props를 받아서 사용해야 하는
[2022.06.11] Vue component - 컴포넌트 만들고 불러오기, props 사용 및 주의사항
컴포넌트는 일반적인 웹 화면을 header, sidebar, content, footer 등으로 나누었다고 가정했을 때, 나눠져 있는 섹션들을 다른 파일로 구분해서 따로 관리하는 것을 의미한다.한 화면을 만들기 위해 모든 내용을 다 포함하고 있는 것이 아닌, 각각의 화
[2022.06.05] Vue 메서드 사용하기
머스타치 문법을 사용하면 간략한 수식도 활용할 수 있다.만약, 15년뒤, 20년뒤 마다 직접 하드코딩을 하는 것은 효율적이지 않다. 이때 사용할 수 있는 방법은 메서드가 있다.methods : {} methods라는 오브젝트 형태로 선언하여 이 메소즈 프로퍼티 안에 함
[2022.06.03] Vue3 리스트 렌더링(배열, 오브젝트 v-for), 중첩 반복
배열로 나타낼 수 있다. 배열 데이터를 화면에 출력하는 것을 의미한다.배열 fruits에 과일 원소를 추가하였다.이 배열을 화면에 렌더링해보았다.배열 자체가 화면에 출력되었다. 하나 하나의 요소가 리스트처럼 나오게 하려면 어떻게 하면 될까?v-for 디렉티브를 사용하면
[2022.06.02] Vue3 v-once, 조건부 렌더링
데브리님의 세삭뷰 영상을 보며 정리하였다.내용 변경이 일어나도 1번만 수정이 되는 디렉티브이다.모두 변수의 이름을 변경하면 자동으로 변경된 내용으로 렌더링된다.user.name의 값을 아이유로 변경해보았다.v-once는 해당 값이 변화가 일어나더라도 최초 화면에 1회
[2022.06.01] Vue3 - 조건에 따라 클래스 넣는 방법(v-bind:class)
vue 클래스 동적으로 연결하기정적으로 작성한 클래스에 스타일을 입혀서 넣는 방법도 있지만 값이 변경될 때마다 동적으로 클래스가 바뀌도록 작성하는 방법도 있다. v-bind를 이용하면 된다.v-bind는 : 약어로도 작성할 수 있다. (예시) v-bind:class와
[2022.05.31] Vue3 attr(html 속성 연결), style 지정하기 (v-bind)
vue 파일을 살펴보면 template 태그, script 태그, style태그로 나뉘어 있다.여기서 style 태그안에 일반적으로 평소에 사용하는 css를 작성할 수 있다.vue에서는 이 방법 외에도 script를 통해서 스타일을 넣는 방법도 있다.title이라는 아
[2022.05.30] Vue3 기초 - 변수 사용, v-html, v-text
뷰 기초 시작하기기본 vue3 세팅을 완료하고 프로젝트를 오픈하였다.vue 사용을 위해 몇가지 필요한 vscode 확장 프로그램이다.VeturVue3 snippetsprettier - Code formatter그 다음에 확장 프로그램 prettier 세팅을 위해 ctr
[2022.05.29] webpack 번들링 해보기
데브리님의 Sesac Vue 영상을 보고 정리하였다.오늘은 vue나 react와 같은 프로젝트에서 번들링을 하는 방법을 공부해보았다.webpack은 번들링(압축 및 요약)을 도와주는 도구이다.번들링을 하는 이유는 용량이 적고 효율적이어야 하기 때문이다.react나 vu
[2022.05.28] Vue3 공부노트 - vue 프로젝트 살펴보기
데브리님의 Sesav Vue 시리즈 강좌를 보며 정리하였다. 먼저, node설치 및 npm install로 random을 설치하였다. npm - random 라이브러리 사용해보기 node를 설치했기 때문에 vscode의 터미널에서 javascript 파일을 실행시
[2022.05.26] Vue3 공부노트 - cdn으로 간단히 사용해보기, Vue 특징/반복문/v-model
데브리님의 vue3 강좌 영상보면서 적어보는 노트react와 angluar의 장점을 수용해서 만듦비교적 쉬운 학습 난이도와 속도나 퍼포먼스적 측면에서도 뛰어남꾸준한 업데이트와 방대한 커뮤니티컴포넌트 재사용성과 상태관리가 우수함뷰에 저장한 데이터를 html에 데이터 바인
Vue.js
Vue3_Wabpack GitHubApp.vuev-once : 일회성 보간{{ }} : 일반 텍스트로 해석v-html : 실제 HTML로 해석v-bind : HTML 속성 사용 v-bind 약어 : :v-on 약어 : @예 1)App.vue예2)App.vueApp.v
