Vue

인스턴스와 라이프사이클 인스턴트 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위 생성자 : 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 저장해 놓고, 새로 개체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법 옵션 속성 template : 화면에 표시할 HTML, CSS 등의 마크업 요...

템플릿 문법 보간법 Mustache”(이중 중괄호 구문)기법을 사용한다. msg 속성 값으로 대체되며 또한 msg 속성이 변경될 때 마다 갱신된다. v-once를 통해서 일회성 보간을 수행할 수 있다. 원시 HTML 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석합니다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 한다....

Computed Computed coputed (계산된데이터) data 옵션에 정의해둔 특정한 데이터를 추가적으로 어떤 연산을 통해 정의한 다음에 정의한 값을 반환하는 계산된 데이터 data들을 정의한 후 원본에 손상이 가지 않도록 computed를 통해 계산할 수 있으며 캐싱 기능을 통해 간단한 로직은 더 부담없이 활용할 수 있다. Setter C...

클래스(Class)와 스타일 바인딩 (Style Binding) HTML 스타일 바인딩 객체 구문 v-bind:class (v-bind:class의 약자)에 객체를 전달하여 클래스를 동적으로 전환할 수 있다. 위 구문은 active 클래스의 존재가 데이터 속성 isActive의 진실성(Truthiness) 에 의해 결정됨을 의미한다. 여러 클래스 전...

조건부 랜더링 (Conditional Rendering) v-if 조건에 따라 블록을 렌더링할 때 사용한다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링 된다. v-else, v-else-if, template과 같이 사용할 수 있다. templa

디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있다. v-for 디렉티브는 item in items 형태로 특별한 문법이 필요하다. 여기서 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭이다. Vue가 v-for에서 렌더링된 엘리

v-on디렉티브는 @기호로, DOM 이벤트를 듣고 특정한 반응에 동작할 때와 JavaScript를 실행할 때 사용한다.속성 값으로 메소드의 이름을 받는다.원본 DOM 이벤트에 액세스 해야할 때 $event를 통해 전달할 수도 있다.여러 효과를 사용할 때는 생략했던 ()

v-model 디렉티브를 사용하여 input, textarea, select 요소들에 양방향 데이터 바인딩을 생성할 수 있다. v-model 디렉티브는 input type 요소를 변경하는 올바른 방법을 자동으로 선택한다. v-model은 내부적으로 서로 다른 속성을 사

컴포넌트 이름은 kebab-case 또는 PascalCase로 정의한다. 특정 유형의 값으로 사용될 수 있으며, 속성의 이름과 값에 각각 prop 이름과 타입이 포함된 객체로 prop를 나열할 수 있다.부모 컴포넌트의 html 요소에 class 속성으로 값을 입력한 경