nuxt는 vue를 좀 더 편하게 사용할 수 있기 위해 몇 가지 기능을 더 추가한 vue의 확장판이다. 그래서 vue에서 하던 것들을 그대로 하되 nuxt에서만 추가된 속성, 기능들이 있다.예) layout: {...}, head: {...}

로그인된 유저의 레이아웃, 로그인 하지 않은 유저의 레이아웃, 관리자의 레이아웃 등...

key에 들어있는 값은 화면을 다시 그려야할지 말지 판단하는 기준이 된다.index가 변하지 않는 경우에는 key에 index를 넣어도 괜찮을 듯! 예: \[1, 2, 3, 4, 5] 라는 배열이 있을 때 이 배열의 원소가 계속 늘어나거나 수정만 될 때. 계속 늘어나거

props로 전달slot 사용: 여는 태그, 닫는 태그 사이에 또 다른 태그를 넣어준다. 해당 자식 컴포넌트에 가서 새로 추가한 태그가 들어올 자리를 <slot>이라고 적는다. slot을 여러 개 사용할 수도 있고, slot에 이름도 줄 수 있고, slot 기본값

export default .. : 한 파일에서 가장 중요한 딱 하나만 export default.. 붙인다.나머지 자잘한 것들은 export const number 이런 식으로 여러 개 만들 수 있다.

vue에서의 동적 속성

vue에서 데이터를 변경하면 그에 따라 화면도 업데이트 된다고 했다. 그런데 배열로된 데이터를 인덱스로 접근하여 업데이트 했는데 화면은 그대로인 경우가 있다. 이럴 때는 Vue.set 또는 this.$set을 사용하여 배열 데이터의 인덱스를 사용하여 데이터를 업데이트

vuex는 store 파일이 여러 개여도 괜찮다.

EventBus: 이벤트를 중앙에서 통제Vuex는 데이터를 중앙에서 통제

모든 함수 앞에는 async를 붙일 수 있다.async는 await을 사용하기 위해서, await은 promise 처리를 위해서 사용.async & await은 콜백 hell에서 벗어나게 해줌. 또는 비동기 작업을 깔끔하게 처리하거나.

크롬 확장 프로그램을 설치하면 사용할 수 있는 vue-devtools의 기능 중에 1초에 몇 프레임이 그려지는지, 퍼포먼스가 어떤지 보여주는 탭이 있다. Frames per second: 초당 60프레임 이하면 눈에 조금 버벅거리는게 보이기 때문에 최소 초당 60 프레

없다가 생기는 순간(아직 화면에 보이기 전임)에 created()데이터나 computed 다 계산하고 실제 화면에 그려지는 순간에, 화면에 보인 후에 mounted()데이터가 바뀌거나 해서 화면이 바뀔 때, 화면이 다시 그려질 때, updated()컴포넌트가 화면에서

단순히 감싸는 용도로 div를 사용했다면 div 대신에 template을 사용할 수 있다.다만 가장 상위 태그는 template을 사용할 수는 없다.

v-show: dom이 생성되어 있고 그 요소에는 display:none이 적용되어 있음.(태그는 있으나 안보일뿐)v-if: 화면에 아예 없음(태그 자체가 없음)태그 하나가 있냐 없냐는 전체 레이아웃 구조에 영향을 줄 수 있기 때문에 태그의 유무는 중요하다.

조금이라도 data들이 가공된다거나 data가 그 자체로 사용되지 않고 data에 뭔 짓(?)을 해야한다! 라고 하면 computed로 사용하자computed는 성능과 관련이 많기 때문에 신경 쓰는 것이 좋다고 한다. 그리고 data가 바뀌면 computed도 알아서

데이터를 Observable로 변경오퍼레이터를 통해 변경 또는 추출 또는 여러 개의 Observable을 결합 또는 분리원하는 데이터를 처리할 Observer를 생성Observable의 subscribe를 통해 Observer를 등록Observable의 구독을 정지하고

데이터는 아닌데 직접 html 태그에 접근해야 하는 경우에는 ref를 사용한다. 이제 위 input태그는 vue에서 'answer'라는 이름으로 접근할 수 있게 된다. (this.$refs.answer 이런 식으로 접근)

input에서 바뀌는 값을 data에도 받고 싶다...? -> v-modelv-model이 input과 data를 연결하는 것임.

데이터만 잘 컨트롤하면 뷰가 화면은 알아서 바꿔준다.그러니 데이터(data) 잘 만들고, 메소드(methods) 잘 만드는 것에 집중해야 한다. 그리고 v-on, v-if 처럼 'v-'가 붙은 속성의 따옴표 안에는 자바스크립트 코드를 작성할 수 있다.

v-model = v-bind:value + v-on:input아직 vue가 어색하니 일단 이렇게 외운다..........