vue.js7 [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. [Vue.js] Vue 시작하기 (설치, 개발환경 설정) Vue.js 란? Vue.js는 프론트엔드 웹 개발을 쉽게 만드는 JavaScript 프레임워크로, 선언적 렌더링, 반응형 데이터 바인딩 기능과, 컴포넌트 기반 아키텍처와 가상 DOM을 활용하여 성능을 최적화합니다. ( + 재사용 가능하고 확장 가능한 UI 컴포넌트의 생성) 또한 Vue.js는 라우팅, 상태 관리, 템플릿, JSX와 같은 다양한 기능을 지원하여 웹 애플리케이션 개발의 효율성을 높여줍니다. 공식사이트 : https://v2.ko.vuejs.org/ Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 v2.ko.vuejs.org ⭐️ Vue 의 특징 선언적 렌더링: Vue.js는 HTML 템플릿을 사용하여 사용자 인터페이스를 정의하는 선언적 렌더링을 지원 컴포넌트 기반 아키텍처:.. 2023. 10. 24. 이전 1 2 다음
