vue

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

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

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

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

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

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

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

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

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

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

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

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

vue에서의 동적 속성

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

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