[Vue 빠른시작] 컴포넌트 기초 예제 추가(Options API ver)

이 파트도 공부하다보니 api 버전을 나눠야할 필요가 있을것 같아 따로 작성한다. 이후글 보기 : [Vue 빠른시작] 컴포넌트 기초 예제 추가(Composition API ver) 컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있다. 따라서 앱이 중첩된 컴포넌트의 트리로 구성되는 것은 일반적이다. 이것은 기본 HTML 엘리먼트를 중첩하는 방법과 매우 유사하지만, Vue는 각 컴포넌트에 사용자 정의 컨텐츠와 논리를 캡슐화할 수 있는 자체 컴포넌트 모델을 구현한다. Vue는 기본 웹 컴포넌트와도 잘 작동한다. 1. Defining a Component 빌드 방식을 사용할 때 일반적으로 Single-File Component(SFC)라고 하는 .vue 확..

  • format_list_bulleted Frontend/Vue3
  • · 2024. 1. 25.
  • textsms

[Vue 빠른시작] Template Refs(템플릿 참조) 예제 추가

[Vue 빠른시작] Template Refs(템플릿 참조) 예제 추가 예제 코드가 Options API ver, Composition API ver 순서대로 등장한다. 본문에 Composition API ver인 경우 추가 설명이 있으니 잘 봐야함 Vue의 선언적 렌더링 모델은 개발자가 직접 DOM에 접근해야 하는 대부분을 추상화하지만, 개발자가 DOM 엘리먼트에 직접 접근해야 하는 경우가 여전히 있을 수 있다. 이러한 필요성을 충족시키기 위해 ref라는 특별한 속성을 사용할 수 있다. ref는 v-for장에서 언급한 key 속성과 유사한 특수 속성이다. 이를 통해 마운트된 특정 DOM 엘리먼트 또는 자식 컴포넌트 인스턴스에 직접적인 참조를 얻을 수 있다. 예를 들어 컴포넌트 마운트의 인풋에 초점을 맞추..

  • format_list_bulleted Frontend/Vue3
  • · 2024. 1. 23.
  • textsms

[Vue 빠른시작] watchers(감시자) 예제 추가(Composition API ver)

[Vue 빠른시작] watchers(감시자) 예제 추가(Composition API ver) 감시자 항목은 생각보다 정리가 길어져서 Composition API ver, Composition API ver으로 나누어서 작성함 이전글 : [Vue 빠른시작] watchers(감시자) 예제 추가(Options API ver) 1. Basic Example computed(계산된 속성)은 계산되어 파생된 값을 선언적으로 사용할 수 있게 한다. 그러나 상태 변경에 대한 반응으로 "사이드 이펙트"(ex. DOM을 변경하거나 비동기 작업의 결과를 기반으로 다른 상태를 변경하는 것)를 수행해야 하는 경우가 있다. Composition API를 사용하는 경우, watch 함수를 사용하여 반응형 속성이 변경될 때마다 함수..

  • format_list_bulleted Frontend/Vue3
  • · 2024. 1. 22.
  • textsms

[Vue 빠른시작] watchers(감시자) 예제 추가(Options API ver)

[Vue 빠른시작] watchers(감시자) 예제 추가(Options API ver) 감시자 항목은 생각보다 정리가 길어져서 Options API ver, Composition API ver으로 나누어서 작성함 이후글 : [Vue 빠른시작] watchers(감시자) 예제 추가(Composition API ver) 1. Basic Example computed(계산된 속성)은 계산되어 파생된 값을 선언적으로 사용할 수 있게 한다. 그러나 상태 변경에 대한 반응으로 "사이드 이펙트"(ex. DOM을 변경하거나 비동기 작업의 결과를 기반으로 다른 상태를 변경하는 것)를 수행해야 하는 경우가 있다. options API를 사용하는 경우, watch 옵션을 사용하여 반응형 속성이 변경될 때마다 함수를 실행할 수 ..

  • format_list_bulleted Frontend/Vue3
  • · 2024. 1. 18.
  • textsms
크롬 Vue.js devtools 사용 시 "Vue.js not detected" 오류

크롬 Vue.js devtools 사용 시 "Vue.js not detected" 오류

크롬 확장프로그램에서 Vue.js devtools(https://chromewebstore.google.com/detail/nhdogjmejiglipccpnnnanhbledajbpd?hl=ko)을 설치했는데 막상 사용하려고 하니 위 이미지와 같이 "Vue.js not detected" 오류가 뜨면서 사용이 불가능했다. 구글링 한 결과 확장 프로그램 관리에서 옵션 하나를 변경하니 잘 작동하였다. 1. Vue.js devtools 우클릭 후 확장 프로그램 관리 2. 하단의 " 파일 URL에 대한 액세스 허용" 허용 체크 3. 새로 고침 후 개발자 도구를 다시 열면 Vue 탭을 확인 할 수 있다. 단, Vue로 제작된 사이트여야 할 것이고 보안상 devtool을 허용하지 않은 경우도 있다. Vue 공홈에서 d..

  • format_list_bulleted Frontend/Vue3
  • · 2024. 1. 17.
  • textsms

[Vue 빠른시작] Lifecycle Hooks 예제 추가

[Vue 빠른시작] Lifecycle Hooks 예제 추가 각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 예를 들어 데이터 감시를 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고 데이터가 변경되면 DOM을 업데이트해야 한다. 그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행하여, 특정 단계에서 개발자가 의도하는 로직이 실행될 수 있도록 한다. 1. Registering Lifecycle Hooks 예를 들어 mounted 훅은 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있다. {{ msg }} 인스턴스 생명 주기의 여러 단계에서 호출되는 다른 훅도 있으며, 가장 일반적으로 사용되는 것은 mo..

  • format_list_bulleted Frontend/Vue3
  • · 2024. 1. 17.
  • textsms