Vue

Vue.js란?MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리💡 MVVM 패턴 : Model + View + ViewModel

Vue로 개발할 때 필수로 생성해야 하는 코드인스턴스를 생성하면 아래와 같이 인스턴스 안에 어떤 속성과 API가 있는지 콘솔 창에서 확인할 수 있다.아래 코드는 ‘app’이라는 id를 가진 태그를 찾아서 인스턴스를 붙이겠다는 의미이다.인스턴스를 붙이면 vue의 기능과

화면의 영역을 구분하여 개발할 수 있는 뷰의 기능컴포넌트 기반으로 화면을 개발하면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다.컴포넌트의 구성은 아래와 같다.컴포넌트 적용은 아래 코드처럼 적용하면 된다.1️⃣ 인스턴스 생성하여 id명이 app인 태그에 붙이

Vue 컴포넌트는 옵션 API와 컴포지션 API 2가지 스타일로 작성 가능하다.옵션의 data, methods, mounted 같은 객체를 사용하여 컴포넌트 로직 정의data: data()에서 반환된 속성들은 this에 노출methods: 속성값을 변경하고 업데이트 할

디렉티브는 Vue에서 제공하는 특수한 속성접두사 v-를 사용실제 HTML을 출력하기 위한 디렉티브data를 <template>에 출력하면 아래와 같이 문자열이 출력된다.아래 예제와 같이 v-html을 적용하면 실제 HTML로 출력되는 것을 확인할 수 있다.💡 웹

엘리먼트에 데이터를 바인딩하는 이유클래스 목록과 해당 인라인 스타일을 조작하기 위함이다.1) 객체로 바인딩아래와 같이 렌더링된다.2) 배열로 바인딩아래와 같이 렌더링된다.삼항 표현식을 통해 클래스를 토글할 수 있다.그러나 조건부 클래스가 여러개이면 가독성이 떨어지므로

디렉티브 표현식이 truthy 값을 반환하는 경우에만 렌더링v-show가 있는 엘리먼트는 항상 렌더링되고 DOM에 남아 있다.v-show는 display CSS 속성만 전환한다.v-show를 false로 지정하였더니 h1 엘리먼트가 display: none으로 지정되어

Vue 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 내용이 갱신(update)되며, 소멸(destroy)되는 4가지 과정을 거치게 된다.인스턴스가 생명 주기를 거치는 동안 hook을 사용할 수 있도록 API를 제공한다.일반적으로 많이 사용하

v-for 디렉티브를 통해 배열을 리스트로 렌더링v-for 범위 내 모든 속성 접근 가능현재 아이템의 index를 제공v-for의 아이템을 분해 할당해 사용할 수 있다.in 대신 of를 사용하여 자바스크립트 반복문 문법처럼 사용할 수 있다.(value, key, ind

수정 메서드 : push(), pop(), shift(), unshift(), splice(), sort(), reverse()배열 교체 메서드 (새 배열 반환) : filter(), concat(), slice()새 배열을 반환한다고 다시 렌더링되는 것은 아니다. V

일반적으로 v-on 디렉티브는 @ 기호를 사용하여 단축v-on:click="handler" 또는 @click="handler"와 같이 사용핸들러 종류는 총 2가지 입니다.인라인 핸들러 : 이벤트가 트리거될 때 실행되는 인라인 자바스크립트메서드 핸들러 : 컴포넌트에 정의

값 바인딩을 수동으로 연결하고 이벤트 리스너를 변경하는 작업을 단순화한다.<textarea> <select>에서도 사용 가능사용되는 엘리먼트에 따라 자동으로 다른 DOM 속성 및 이벤트 쌍으로 확장텍스트 유형의 <input> <textarea> :

템플릿 안에서 연산을 하게 되면 가독성이 떨어지고 유지보수가 어려워진다.템플릿에서 사용할만한 로직은 일반적으로 computed에서 사용한다.computed는 default로 getter() 함수가 있지만 필요에 의해 setter() 함수를 설정할 수 있다.🧐 comp

UI를 독립적이고 재사용 가능한 각각의 독립된 모듈일반적으로 싱글 파일 컴포넌트(Single File Component; SFC)라고 하는 .vue 확장자를 사용해 각 파일에 해당 컴포넌트를 정의한다.자식 컴포넌트를 사용하려면 부모 컴포넌트에서 가져와야 한다.(e.g.

탭 인터페이스와 같이 컴포넌트 간에 동적으로 전환하는 것이 유용한 경우가 있다.<component> 엘리먼트를 통해 동적으로 컴포넌트를 생성할 수 있는데 아래 예제를 통해 확인해보자.App.vue(부모 컴포넌트)에 아래와 같이 작성한다.src/components

전역 컴포넌트는 app.component() 메서드를 통해 등록할 수 있다.예제를 진행하기에 앞서 components 폴더에 GlobalComponent.vue를 생성하고 아래와 같이 작성한다.src 폴더에 main.js에 아래와 같이 작성한다.const app = c

props는 컴포넌트를 사용할 때 데이터를 전달하기 위해 사용한다.props는 props 옵션을 사용하여 선언한다.객체 선언 문법key : props의 이름value : 값이 될 데이터의 타입에 해당하는 생성자 함수 (String, Number ...)kebab-cas

컴포넌트는 내장 메서드 $emit을 사용하여 v-on 디렉티브 등에서 사용자 정의 이벤트를 발신할 수 있다.$emit 메서드는 컴포넌트 인스턴스에서 this.$emit()으로도 사용할 수 있다.부모 컴포넌트는 v-on 디렉티브를 사용하여 수신할 수 있다..once 수식

컴포넌트에서 v-model 디렉티브를 사용하기 위해선 2가지 작업을 수행해야 한다.<CustomInput> 예시로 작성해보자면,네이티브 <input> 엘리먼트의 value 속성을 modelValue 프로퍼티에 바인딩한다.네이티브 input 이벤트가 트리거되면

폴스루(fallthrough: 대체) 속성부모 컴포넌트에서 속성 또는 v-on 이벤트 리스너를 전달하고 이것을 받는 컴포넌트의 props 또는 emits에 선언하지 않는 속성일반적으로 class, style, id 속성이 있다.컴포넌트가 엘리먼트를 렌더링하면 폴스루 속

슬롯은 템플릿 조각을 자식 컴포넌트에 전달하여 자식 컴포넌트가 자체 템플릿 내에서 조각을 렌더링하는 것이다.최종 렌더링은 아래와 같이 된다.name이라는 속성으로 컨텐츠가 렌더링되어야 하는 위치를 결정할 수 있다.name 속성이 없다면 기본적으로 default란 이름을

<Transition> 컴포넌트는 빌트인 컴포넌트이므로 등록하지 않고도 템플릿 내에서 사용 가능하다.컴포넌트 애니메이션은 아래 조건 중 하나라도 충족하면 발생한다.v-if를 통한 조건부 렌더링v-show를 통한 조건부 표시<component>를 통해 전환되는

prop drilling을 방지하기 위한 메서드provide : 부모 컴포넌트에서 데이터 제공inject : 자식 컴포넌트에서 데이터 주입

<slot />에 name과 age 프로퍼티를 작성한다.

변수 num1의 데이터 변경 후 이벤트를 발생하고 싶은데 하단 코드에선 발생하지 않는다.dispatchEvent()를 통해 이벤트를 강제로 발생시킬 수 있다.

h()는 가상 DOM 요소를 생성하는데 사용된다.요소의 타입(필수), 속성, 자식 노드를 인수로 사용된다.

등록된 컴포넌트를 수동으로 확인한다.컴포넌트를 찾을 수 없는 경우 런타임 에러가 발생한다.resolveComponent()를 통해 &lt;ButtonCounter />라는 컴포넌트가 있는지 확인하고 가상 노드를 생성해 리턴한다.

1.$refs (vue2) 2. ref (vue3)