Vue3

모든 Vue 앱은 Vue 인스턴스를 생성하는 것 부터 시작한다.Vue2에서는 const vm = new Vue(); 이렇게 생성했으나, Vue3는 const vm = Vue.createApp();으로 생성한다. 둘 다 선언된 vm(vue model)을 콘솔에 찍어 볼

!! 듣고있는 강의에서는 Vue2를 사용하기 때문에 정보가 혼동될 수 있음 주의, 최대한 찾아가면서 하는중 ㅠㅠ 인스턴스 라이프사이클 훅 각 Vue 인스턴스는 생성될 때, 일련의 초기화 단계를거친다. Vue의 컴포넌트가 생성되고 소멸될 때 까지의 다양한 단계에서 특정

1. v-once 아래처럼 콘솔창에 msg를 직접 변경하면 변경된 문자 데이터로 재 렌더링되어 나타난다. 하지만, 태그 요소에 v-once를 사용하면 데이터 변경이 되지 않는다. : 기존에 렌더링 된 데이터를 한 번만 렌더링하고 변경시 반응은 하지 않음 2. v

computed는 말그대로 계산로직을 처리할때 사용하는 Vue의 함수 속성이다.computed의 반환값은 파라미터 함수가 반환하는 값을 가지는Proxy 객체의 일종이라고 한다. 따라서 연결되는 데이터가 변경되면 자동으로 새로운 값을 계산하고 반영한다.computed의

Vue는 대부분의 경우 computed 속성이 더 적합하나 사용자가 만든 감시자가 필요한 경우가 있다.그래서 watch 옵션을 통해 데이터 변경에 반응하는 방법을 제공한다. watch는 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는

이번 강의는 Vue의 공식 가이드 문서를 통해 진행된 강의이다.출처: https://v3-docs.vuejs-korea.org/guide/essentials/class-and-style.html일반적으로 class를 연결할 때 v-bind를 사용하여 문자열 값

v-if 디렉티브는 조건부로 블록을 렌더링하는 데 사용된다. 기본적으로 표현식이 true를 반환할 때만 렌더링된다.v-else, v-else-if 디렉티브를 사용하여 else, else if블록을 나타낼 수 있다.기본적인 colorStateblueanother

v-for 디렉티브를 사용하여 배열을 리스트로 렌더링할 수 있다. item in items(list)형식의 특별한 문법이 필요하다. 간단하게 for( object : list ) 의 개념과 비슷Vue는 반응형 배열의 변경 메소드가 호출 되는 것을 감지하여, 필요한 업데

일반적으로 v-on 디렉티브는 단축 문법으로 @ 기호를 사용하며, DOM 이벤트를 수신하고 트리거될 때, 사전 정의해둔 JavaScript 코드를 실행할 수 있다. v-on:click="handler" 또는 줄여서 @click="handler"와 같이 사용한다.인라인

이벤트 핸들러 내에서 event.preventDefault() 또는 event.stopPropagation()을 호출하는 것은 매우 흔한 일이다. 메서드 내에서 이 작업을 쉽게 수행할 수 있지만, 메서드가 DOM 이벤트에 대한 세부적인 처리 로직 없이 오로지 데이터 처

키보드 이벤트를 수신할 때, 특정 키를 확인해야 하는 경우가 많기 떄문에, 키 수식어를 지원한다.KeyboardEvent.key를 통해 유효한 입력키 이름을 kebab-case로 변환하여 수식어로 사용할 수 있다.위의 예에서 핸들러는 $event.key가 'PageDo

vue 에서 message데이터를 Hello~로 지정해놨을 때, 화면에는 아래와 같이 보인다.단방향 바인딩일 때 value값을 화면에서 변경해주면 기존에 Hello~로 데이터가 들어가있는 것이 바뀌지 않고, 화면에만 변경된 것을 알 수 있다.하지만 양방향 데이터 바인딩

.lazy기본적으로 v-model은 각 input 이벤트 이후 데이터와 입력을 동기화 한다.대신 change 이벤트 이후에 동기화하기 위해 .lazy 수식어를 추가할 수 있다..trim사용자 입력의 공백이 자동으로 트리밍되도록 하려면 v-model 수식어로 .trim을

컴포넌트는 Vue의 가장 강력한 기능 중 하나이다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는데 도움이 된다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트이다. 경우에 따라 특별한 is 속성으로 확장된 원