전체 글 (345) 썸네일형 리스트형 라우터의 종류 Nested Routernested router는 VueRouter에서 제공하는 기능 중 하나로 중첩된 라우팅을 구현한는 방법입니다.이를 통해 계층 구조를 가진 페이지를 표현하고 관리할 수 있다. nested router는 라우터를 부모-자식 관계로 구성한다.부모 라우터는 부모 페이지로 동작하고 자식 라우터는 부모 페이지 내에서 표시되는 하위 페이지로 동작한다. 네스티드 라우터를 사용하면 각 페이지에 해당하는 컴포넌트를 중첩하여 사용할 수 있따. main.vue 네스티드 라우터 설정 index.vue sub 설정 router.jsconst router = new VueRouter({ mode.. Vue CLI What is the Vue CLI https://cli.vuejs.org/guide/installation.html Installation | Vue CLI Installation Node Version Requirement Vue CLI 4.x requires Node.js version 8.9 or above (v10+ recommended). You can manage multiple versions of Node on the same machine with n, nvm or nvm-windows. To install the new package, use one of the following comman cli.vuejs.org 에 나오는 것처럼 npm install -g @vue/cli 수행 후.. Section 6. Components 개념 html 은 다음과 같음 DOCTYPE html> Vue Basics FriendList {{ friend.name }} {{ detailsAreVisible ? 'Hide' : 'Show' }} Details Phone:{{ friend.phone }} Email:{{ friend.email }} vue.js 구성은 다음과 같음 const app = Vue.createApp({ data() { return { detailsAreVisible: false, friends: [ { id: "manuel", name: "manuel lorenz", phone: "01234 5678 991", email: "manuel@localhost.com", }, { id: "julie", name: "Julie Jon.. Vue Instance Lifecycle Monster Slayer - v-for, v-if, v-model, v-bind, :class CSS * { box-sizing: border-box; } html { font-family: 'Jost', sans-serif; } body { margin: 0; } header { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); padding: 0.5rem; background-color: #880017; color: white; text-align: center; margin-bottom: 2rem; } section { width: 90%; max-width: 40rem; margin: auto; } .healthbar { width: 100%; height: 40px; border: 1px solid #575757; margin: 1rem 0; background.. v-if, v-for, list 예시 Conditional Centent Lists v-for Variations Keys v-if (and v-show) allows you to render content only if a certain condition is met v-for can be used to render multiple elements dynamically You can extract values, values and indexes or values, keys and indexes Vue re-uses DOM elements to optimize performance à This can lead to bugs if elements contain state v-if can be combined with v-else and v-e.. Rendering Content Conditionally (v-if, v-show, v-for) 첫번째 v-if 조건문 적용 에서 Goal은 목표가 있을때만 No goals ~ 메시지는 Goal이 아무것도 없을때만 적용하고 싶다고 한다면 HTML은 다음과 같이 변경할 수 있다. 원본 My course goals Add Goal No goals have been added yet - please start adding some! Goal 변경분 HTML \ My course goals Add Goal No goals have been added yet - please start adding some! Goal app.js (VUE Code) const app = Vue.createApp({ data() { return { goals: [] }; }, }); app.mount('#user-goals').. @click, v-model을 사용하여 styling 하 아래는 HTML DOCTYPE html> Vue Basics Vue Styling Style me! Toggle Paragraph Style me inline! CSS * { box-sizing: border-box; } html { font-family: 'Jost', sans-serif; } body { margin: 0; } header { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); margin: 3rem; border-radius: 10px; padding: 1rem; background-color: #1b995e; color: white; text-align: center; } #assignment { box-shadow: 0 2px 8px rgba(0, 0, .. 이전 1 2 3 4 ··· 44 다음
