전체 글345 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').. 2024. 3. 31. @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, .. 2024. 3. 31. 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:.. 2024. 3. 30. 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.. 2024. 3. 30. 08. v-bind and v-on shorthands v-on 기능을 @으로 변경 가능하다 [원본.] Events in Action Add 10 Subtract 5 Result: {{ counter }} Reset Input Your Name: {{ fullname }} [변경] Events in Action Add 10 Subtract 5 Result: {{ counter }} Reset Input Your Name: {{ fullname }} @click.right도 가능하다. v-bind도 가능하다 아래처럼 :value로 변경이 가능하다. 2024. 3. 30. Methods vs Computed vs Watch Methods Computed Watch Use with event binding OR data binding Use with data binding Not used directly in template Data binding: Method is executed for every “re-render” cycle of the component Computed properties are only re-evaluated if one of their “used values” changed Allows you ro run any code in reaction to some changed data (e.g. send Http request etc.) Use for events or data that really n.. 2024. 3. 30. 이전 1 2 3 4 5 ··· 58 다음
