TutleKing Story

디렉티브 (directives = 지시어)v-접두사가 있는 특수 속성종류 v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-on (단축표기 @) * 중요v-bind (단축표기 :) * 중요v-modelv-slot (단축표기 #) * 중요v-prev-oncev-cloakv-memo (v3.2+)디렉티브 구성디렉티브(directives) : v- 접두사가 있는 특수 속성으로, 디렉티브의 값(value)이 변경될 때 특정 효과를 반응적으로 DOM에 적용하는 것을 말함전달인자(Argument) : 일부 디렉티브는 디렉티브명 뒤에 콜론(:)으로 표기되는 전달인자 수식어(Modifiers) : 수식어는 점(.)으로 표시되는 특수 접미사이벤트v-on 사용 -> @로 축약// 인라인 핸들러..

Vue.js #1Vue 란?Vue 는 User Interface 개발을 위한 자바스크립트 프레임워크 HTML, CSS, JavaScript를 기반으로 복잡한 UI 까지 개발 가능 핵심기능선언적 렌더링 (Declarative Rendering) : 템플릿 구문{{데이터}}을 활용하여 출력반응성 (Reactivity) : JS 상태 변경을 자동으로 추적 및 변경시, DOM을 효율적으로 업데이트 컴포넌트UI 를 재사용할 수 있도록 정의한 것 JS 뿐 아니라 HTML, CSS 도 캡슐화 하여 재사용 가능 컴포넌트 만드는 법 : 정의 -> 등록 -> 사용컴포넌트 정의문자열 템플릿 : HTML, CSS, JS를 string 으로 선언 Single File Component (SFC) : 빌드 도구(Webpack, ..

반응형 기초https://ko.vuejs.org/guide/essentials/reactivity-fundamentals.html반응형 상태 설정data 옵션을 사용하여 컴포넌트 반응형 상태 선언data 에서 return 한 변수들은 this로 접근해야한다.컴포지션 API : reactive (객체일때), ref (원시값 일때 사용)data에 포함하지 않고 this 에서 데이터를 선언 및 사용 할 수 있지만, 아래와 같은 warning 을 받는다.Property "abc" was accessed during render but is not defined on instance.메서드 선언컴포넌트 인스턴스에 메서드를 추가하기 위해서는 methods 옵션을 사용arrow function 사용 주의 (참고2)반..