분류 전체보기38 [Vue.js] Vue 클래스와 스타일 바인딩 (Class and Style Bindings) Vue 클래스와 스타일 바인딩 (Class and Style Bindings) Vue.js에서 클래스와 스타일 바인딩은 HTML 요소의 클래스 및 인라인 스타일을 동적으로 조작할 수 있는 기능을 제공하여 데이터 상태에 따라 요소의 모양 및 스타일을 변경할 수 있음. (다른 속성과 마찬가지로 v-bind를 사용하여 동적 할당) # HTML 클래스 바인딩 객체 바인딩 클래스를 동적으로 객체를 :class( = v-bind:class)에 전달. Class Style Binding page 배열 바인딩 :class를 배열로 바인딩하여 클래스 목록을 작성할 수 있음. 2023. 10. 26. [Vue.js] Vue 계산된 속성 (Computed Properties) 계산된 속성 (Computed Properties) 템플릿 내 표현식은 간단한 코드에 적합하며, 템플릿에 많은 논리가 있다면 유지 관리가 어려워집니다. const author = reactive({ name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] }) 따라서 반응형 데이터를 포함하는 복잡한 논리의 경우, 계산된 속성을 사용하는 것이 좋음. 책을 가지고 있다: {{ publishedBooksMessage }} Name: {{this.fullName }} 이름: {{ this.fullName='길동 홍'}} 2023. 10. 26. [Vue.js] Vue 반응형 (Reactivity Fundamentals) 반응형 (Reactivity Fundamentals) Vue.js에서 "반응형"은 Vue 컴포넌트의 데이터와 화면 간의 관계를 설명하는 중요한 개념입니다. Vue.js의 핵심 동작 원리로서 데이터의 변경이 화면에 자동으로 반영되도록 합니다. # 반응형 상태 설정 (Declaring Reactive State) ref() This is an Template page 증가 {{ count }} # 메서드 선언 (Declaring Methods) 컴포넌트에 메서드를 추가하기 위해 methods 옵션을 사용. export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, mounted() { // 생명 주기 훅.. 2023. 10. 26. [Vue.js] Vue 템플릿 문법 (Template Syntax) 템플릿 문법 (Template Syntax) Vue.js의 템플릿 문법은 HTML과 JavaScript를 결합한 형태로, Vue 컴포넌트 인스턴스의 데이터를 렌더링된 DOM에 선언적으로 바인딩할 수 있습니다. (JSX 문법 지원) {{ msg }} {{ desc }} # 텍스트 보간법 (Text Interpolation) 1. 문자열 데이터 바인딩의 가장 기본 형태는 '이중 중괄호(mustaches)'를 사용한 텍스트 보간. (보간은 중간에 무언가 끼워넣는다는 의미가 있습니다.) 메시지: {{ msg }} 2. 원시 HTML (Raw HTML) 이중 중괄호는 HTML이 아닌 일반 텍스트로 데이터를 해석하여, 실제 HTML을 출력 시, v-html 디렉티브를 사용해야 함. 이중 괄호: {{ rawHtml .. 2023. 10. 24. 이전 1 2 3 4 5 6 7 8 ··· 10 다음
