728x90 반응형 분류 전체보기295 Vue.js] 7. 리스트 렌더링 v-for1. 배열data() { return { items: [{ message: 'Foo' }, { message: 'Bar' }] }} {{ item.message }} {{ index }} - {{ item.message }} 2. objectdata() { return { myObject: { title: 'Vue에서 목록을 작성하는 방법', author: '홍길동', publishedAt: '2016-04-10' } }} {{ value }} {{ key }}: {{ value }} {{ index }}. {{ key }}: {{ value }} 3. 숫자{{ n }}n의 값은 0이 아니라 1부터 시작한다. key를 통한 .. 2024. 12. 27. Vue.js] 6. 조건부 렌더링 v-ifVue는 정말 멋지죠! 전환Vue는 정말 멋지죠!아닌가요? 😢 A B C A/B/C 아님 제목 단락 1 단락 2 v-show안녕!v-if와의 차이점은 v-show가 있는 엘리먼트는 항상 렌더링되고 DOM에 남아있다. v-show는 엘리먼트의 display CSS 속성만 전환한다. v-show는 를 지원하지 않으면, v-else와 상호작용하지 않는다. v-if vs v-showv-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높습니다. 따라서 자주 전환해야 하는 경우 v-show를, 실행 중에 조건이 변경되지 않는 경우 v-if를 사용하는 것이 좋다. 엘리먼트에 v-if와 v-for를 함께 사용하는 것은 권장되지 않는다. 함께 사용하면 v-if가 먼저 평가.. 2024. 12. 27. Vue.js] 5. 클래스와 스타일 바인딩 객체로 바인딩 하기data() { return { isActive: true, hasError: false }}// 렌더링결과 data() { return { classObject: { active: true, 'text-danger': false } }}//렌더링 결과 객체를 반환하는 계산된 속성에 바인딩할 수도 있습니다. data() { return { isActive: true, error: null }},computed: { classObject() { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.typ.. 2024. 12. 24. Vue.js] 4. 계산된 속성 템플릿 내 표현식은 매우 편리하지만 간단한 작업을 위한 것이다. 템플릿에 너무 많은 논리를 넣으면 유지관리가 어렵다. 예를들어 객체 내 배열이 있는 경우 export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } }}책을 가지고 있다:{{ author.books.length > 0 ? 'Yes' : 'No' }}span 내의 표현식이 반복되거나 복잡한 경우 아래와 같이 계산된 속성을 .. 2024. 12. 24. Vue.js] 3. 반응형 기초 Vue.js는 2가지 개발 스타일이 있다. 1. Option API2. Compisiton APIVue.js 공식문서에서 API를 설정하여 문서를 확인할 수 있다. Option API는 Vue.js 기본 방식으로 컴포넌트를 구성하는 옵션 properties, methods, computed, watch등을 객체 형태로 정의한다. 기존 Vue 개발자에게 익숙한 스타일이다. Composition API는 Vue 3에 도입된 새로운 방식으로 함수형 프로그래밍의 장점을 활용한다. setup함수를 통해 컴포넌트 로직을 정의하며, 재사용성과 코드 구조의 명확성을 높인다. 여기서는 기존의 Option API에 대해 알아보자. 반응형 상태 설정data 옵션을 사용한다, 인스턴스를 처음 만들 때만 추가되므로 나중에.. 2024. 12. 24. Vue.js] 2. Vue 앱 만들기, 템플릿 문법 앱 인스턴스 모든 Vue앱은 createApp 함수를 사용하여 새로운 앱 인스턴스를 생성하는 것으로 시작한다. createApp에 전달하는 객체는 컴포넌트이며, 모든 앱에는 다른 컴포넌트를 자식으로 포함할 수 있는 최상위 컴포넌트가 필요하다. App : 최상위 컴포넌트앱 인스턴스는 .mount()메서드가 호출될 때까지 아무것도 렌더링하지 않는다. 템플릿 문법Vue는 컴포넌트 인스턴스의 데이터를 렌더링된 DOM에 바인딩할 수 있는 HTML기반 템플릿 문법을 사용한다. 내부적으로 Vue는 템플릿을 고도로 최적화된 JavaScript 코드로 컴파일합니다. 반응형 시스템과 결합된 Vue는 앱 상태의 변경 사항을 적용할 때, 다시 렌더링할 필요가 있는 최소한의 컴포넌트를 지능적으로 파악하고 DOM 조작을 최.. 2024. 12. 24. 이전 1 2 3 4 5 6 ··· 50 다음 728x90 반응형
