WEB Developer/Vue JS (15) 썸네일형 리스트형 라우터의 종류 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 수행 후.. 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').. computed 속성 사용: Dynamic Styling (Click 시 색상 변화) computed 속성을 사용하여 적용이 가능하다. DOCTYPE html> Vue Basics Vue Dynamic Styling 아래는 app.js 코드 const app = Vue.createApp({ data() { return { boxASelected: false, boxBSelected: false, boxCSelected: false }; }, computed: { boxAClasses () { return { active: this.boxASelected }; }, boxBClasses () { return { active: this.boxBSelected }; }, boxCClasses () { return { active: this.boxCSelected }; }, }, methods:.. v-bind 사용 - Dynamic Styling (Click 시 색상 변화) DOCTYPE html> Vue Basics Vue Dynamic Styling :class="{active: boxASelected}" 에서 boxASelected가 true이면 class=active, false이면 active가 제거됨 CSS에서 아래 속성을 추가하였으므로 class가 active가 되면 아래 CSS 속성이 동적으로 추가됨. . active { border-color: red; background-color: salmon; } Toggle 동작을 위해 아래와 같이 구현함. const app = Vue.createApp({ data() { return { boxASelected: false, boxBSelected: false, boxCSelected: false }; }, metho.. 이전 1 2 다음
