Vue 문법

각 컴포넌트는 생성될 때 일련의 초기화 단계를 거칩니다. 예를들어 데이터 관찰, 템플릿 컴파일, 인스턴스를 DOM에 마운트, 데이터 변경 시 DOM을 업데이트해야합니다.

데이터가 변경되어도 갱신되지 않는 일회성 보간 수행 가능실제 HTML을 출력하려면 v-html 디렉티브를 사용하면 실제로 html문법으로 출력됩니다.저장버튼 누르면 v-bind가 사라지고 :class="msg"만 남는다. (원래는 v-bind:class="msg")at

이미 계산된 작업인 computed미리 계산된 값을 넣어줘서 바로 실행할 수 있게 도와줌

데이터를 최적화 하는 용도로, 계산된 데이터를 캐싱 기능을 통해 사용 가능하다. 그러므로 computed는 반복사용해도 부담이 적다.

computed는 읽기 전용으로 값을 얻어내는 용도(Getter)로만 사용한다. 하지만 vue문법을 통해 Setter로 사용할 수 있다.add 클릭 시 기존 메세지에 !?가 붙는 모습을 볼 수 있다.Vuex를 다룰 때 유용하게 활용 가능하다.

감시하고 싶은 데이터가 있으면 `watch`에 메소드처럼 만들어서 메소드의 로직으로 그 데이터가 변경되었을 때 어떤 내용을 실행할지를 명시하면 된다.

active라는 class를 추가하는데, true일때만 동작관련 공식 문서:https://v3.ko.vuejs.org/guide/class-and-style.html데이터를 동적으로 관리할 수 있다.기본적으로 객체데이터로 연결하지만 여러가지 객체데이터를 연결할

v-if, v-else-if, v-else > v-if 다음 v-else-if 다음 v-else true라는 값을 가져야지만 화면에 렌더링 해준다. false는 렌더링 하지 않음 Template 태그 > div와 다른 점: button 아래 특정 태그로 감싸져있지 않

v-for로 엘리먼트에 배열 매핑하기배열데이터를 반복할 때, 숫자 데이터가 필요하다고 한다면 index 추가다양한 배열 데이터 활용, 반복적으로 화면에 출력하는 방법v-for를 통해 id 속성이 아니더라도 item을 구분해주는 특성한 속성이 존재해야하고 그 속성을 통해

e.target.textContent 처럼 실행하는 event의 안으로 들어가서 그 내용을 가져올 수 있음handler에 직접 인자를 추가, $event를 추가해서 동시에 핸들러가 발생하게 할 수 있다. 참고로 $e는 동작하지 않는다.하나의 버튼을 클릭했을 때 두개의

이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일입니다. 메소드 내에서 쉽게 이 작업을 할 수 있지만, DOM 이벤트 세부 사항을 처리하는 대신 데이터 로직에 대한 메소드만

@keydown.enter라고 event를 실행시켰을 때 enter키를 누르면 console에log가 찍힌다. key부분을 케밥케이스로 실행시켜야하고, .key를 통해 어떤 key인지 확인 할 수 있다. 또한 체이닝이 가능하다.

단방향 데이터 바인딩 > 연결이 한쪽 방향으로 (script에서 template로)만 되어있는 경우 메시지를 수정해도 갱신이 되지 않는다. (input 고쳐도 h1은 똑같음)

입력하는 동안이 아닌 입력하고 난 뒤 enter를 누르거나 blur가 해제되었을 때 등 입력을 하고 나서 바뀜lazy가 게으르다라는 뜻으로 v-model.lazy를 하면 게으르게 동작한다고 하여 엔터를 누르면 그 때 데이터가 바뀐다.v-model로 바인딩 한 후 숫자를

컴포넌트를 재사용하기 위해 Mybtn이라는 컴포넌트를 만들고 props을 통해 다른 컴포넌트에 color를 바꿔줌구조App.vueMyBtn.vueType을 String으로 받았기 때문에, App.vue에서 \`<MyBtn color="\`\`\` banana

App.vueMybtn에 onehousesilver를 2번째 class로 추가My Btn.vue원래는 class에 btn 다음으로 onehousesilver이 같이 붙었는데 지금은 onehousesilver class가 없어진 상태. 왜 이렇게 되었을까?그 전에 구조를

순서대로 천천히 쓰는 emit 방법만약 최상위 컴포넌트가 2개 이상이라 이벤트를 가져오지 못한다면?App.vue에 있는click 이벤트를 MyBtn.vue로 가져와서 script에 emits에 붙여넣는다.내가 연결할 요소에 이벤트를 앞에 넣는다. 만약 h1태그에 연결한

기본적인 content가 있으면 slot에 삽입되는데, 없으면 slot태그 사이에 있는 기본적인 내용을 출력한다. 내용이 없을때 출력되는 개념을 fallback contents라고 한다.App.vueMyBtn.vue컴포넌트 사이에있는 모든 내용이 slot태그를 대신해서

App.vue에서 Parent.vue를 거쳐 Child.vue에 msg를 띄우는 방식, Props를 통해 데이터를 내려줬다.App.vueParent.vueChild.vue이렇게 되면 Parent.vue의 경우는 정말 아무 기능 없이 Prop의 기능만 하려고 중간다리 역

ref라는 속성을 통해 해당 하는 요소를 참조할 수 있고 참조된 내용은 $refs에 저장된다.html이 연결된 직후에만 사용 가능해서, mounted()에만 사용 가능하다. created()에서는 undefined라고 뜸.또한 ref도 특정한 이름으로 참조가 가능하다.