[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 빠른시작]템플릿 문법 예제 추가

[Vue 빠른시작]템플릿 문법 예제 추가 Vue는 컴포넌트 인스턴스의 데이터를 서술적으로 렌더링된 DOM에 바인딩할 수 있는 HTML 기반 템플릿 문법을 사용한다. 내부적으로 Vue는 템플릿을 고도로 최적화된 JavaScript 코드로 컴파일한다. 반응형 시스템과 결합된 Vue는 앱 상태의 변경 사항을 적용할 때, 다시 렌더링 할 필요가 있는 최소한의 컴포넌트를 지능적으로 파악하고 DOM 조작을 최소화 한다. 0. vue 파일 import 및 mount하기 Template.vue라는 파일에 코드를 따로 작성할 예정이어서 .vue 파일을 가져오는 방법 먼저 작성함 예제 // Template.vue {{ title }} // main.js import { createApp } from 'vue/dis..

  • format_list_bulleted Frontend/Vue3
  • · 2024. 1. 11.
  • textsms
Vue3 set up 가이드(기본 프로젝트 생성) (2/2)

Vue3 set up 가이드(기본 프로젝트 생성) (2/2)

이어지는 글 2023.04.06 - [Frontend/Vue3] - Vue3 set up 가이드(환경설치) (1/2) Vue3 set up 가이드(환경설치) (1/2) 목차 환경설치 IDE Visual Studio Code Extensions 플러그인 Node.js 설치 Vue Devtools 설치 크롬 브라우저 Bootstrap 환경설치 1. IDE 1.1. Visual Studio Code https://code.visualstudio.com/Download 접속하여 설치 1.2. Extensions 플 fourseasons0525.tistory.com 기본 프로젝트 생성 NPM/Vite를 이용한 기본 프로젝트 생성 Npm을 통해 vue를 설치 npm install vue@next npm 커맨드를 이..

  • format_list_bulleted Frontend/Vue3
  • · 2023. 4. 6.
  • textsms
Vue3 set up 가이드(환경설치) (1/2)

Vue3 set up 가이드(환경설치) (1/2)

목차 환경설치 IDE Visual Studio Code Extensions 플러그인 Node.js 설치 Vue Devtools 설치 크롬 브라우저 Bootstrap 환경설치 1. IDE 1.1. Visual Studio Code https://code.visualstudio.com/Download 접속하여 설치 1.2. Extensions 플러그인 vue 확장자 파일을 다룰 수 있는 Vuter Extension이 존재한다. Vuter를 비롯하여 문법 하이라이팅, 인텔리센스, 포맷팅과 같은 다양한 기능을 지원하는 Vue를 위한 확장 플러그인들을 한번에 모아둔 Vue VS Code Extension Pack은 Visual Studio Code를 이용해 Vue를 개발하는 개발자에게 필수 Extension이다...

  • format_list_bulleted Frontend/Vue3
  • · 2023. 4. 6.
  • textsms