이전에 vue를 사용하면서 적은 메모들을 여기에 옮김

오브젝트는 참조전달이다

같은 곳을 참조하므로 UI렌더링이 안 될 수 있다.
배열로 하면 문제없다.
혹은 전개구문으로 한 번 값을 새로 복사해서 만든 다음에 넣어주면 된다.

뷰는 오브젝트 내부를 검지해주지 않는다.

computed는 배열 안을 검지 못하므로,
watch를 쓴다.

@click 이벤트에서

괄호가 있으면 () : null을 전달한다.
괄호가 없으면 : event를 전달한다.

v-if로 편집기능이 보이는 html과 그냥 보이는 html을 나눈다.

왜? watch로 보고있다.
v-model로 넘기므로
배열 변경된 걸 watch deep으로 보고있다.
computed는 참조가 변하면 재렌더링

자바크스크립트용 클래스는 js-를 붙인다.

이렇게 함으로써, 이 클래스가 스타일에 영향을 주는 클래스인지 아닌지를 판단할 수 있게 되고, 리팩터링이 쉬워진다.

ajax에서 resolve(response)로 응답값을 전달해주는게 좋다.

data 활용법

data에 변수 정의
created 에서 this.로 정의한 데이터 조작
component
이렇게 하면 getter가 없어진다. (무슨말이지?)

자바스크립트 함수는 return이 없으면 undefined가 리턴된다.

모달

호출처에서 어떤게 필요한지를 생각
$emit로 이벤트를 해커한다?
부모가 자식한테 주는 것은 : 무엇
자식이 부모한테 주는 것은 : 무엇

뷰 컴퍼넌트는 스크립트가 없으면 에러가 되더라. 주의.

2019.9.17

watch deep ?

배열 안 배열은 안된다.

store를 watch 하는 기능도 있다.

내부 배열

v-model 을 computed 마지 실행
-> :value

중요 : 범용 component는 v-model 쓸 수 있는 형태로 만들자.

왜?
v-model 을 쓰면,

  1. props의 value로 전달되고
  2. emit으로 edit도 전달된다.

즉, v-model 은 이하와 같다.
:value="fizz"
@input="fizz <= 0"

단, 함수는 실행이 안되므로, value와 메소드를 나눠야 한다.

getter로 가져오고 싶다.

getter는 생성

for (key of Object.key())

Array.from()

input on change

on input 독자 구현
on change 는 느리다. 확정 후 나온다.
따라서 on input 쓴다.

slot & callback

slot은 있으면 그걸 쓰고 없으면 default

div로

@blur

포커스가 제외되면 실행된다.

tooltip

css 안에서 component 화 하고 싶다.

기존이 복잡하다.

/deep/으로 하위 css를 조종가능하다.

align-items: flex-start;

BEM

스타일 먼저 적으면 위에서 자동완성된다.

부모 말고 : width 만 (merge는 x)

부모 호출에서 넓이 정하고 싶다.

css flex 사용법

height 는 기본적으로 정해진다. (외부요인으로)

position-absolute

부모가 position 해야한다.
relative는 외관변화 x

활성ID & 편집 상황 별도로

ㄴ클릭하면 ㄴ편집 누르면

동적 class 할당은 :class="{'': }"

inherit

justify-content:

iconfonts/iconfonts.html

min-height

flex 계는 하나로 뭉친다.

z-index: css 관념하고 일치

bottom

modifier

focus , ref

DOM 렌더링 후 DOM 조작이다.
js로 생DOM에 접근해야 한다.
vue는 못한다.

따라서, ref로 이름 붙이면 렌더링 후에 접근이 가능하다.

mouse-over (modal 꺼내는것)

1. hover (색 바뀌는것)

2. 클래스, 파라미터

버블링

이벤트 덴반(전반), 소시(멈춤) @click.stop

html, bubble

.prevent

width, vw, vh, opacity

nexttick

flex-shrink