05.08.2022-2 TIL

😸 Vue TIL

😽 Done it

😼 조건부 렌더링

😼 <template> 태그

해당 태그 부분은 렌더링 안되고 내부에 구조만 렌더링 됩니다.

😼 v-show VS v-if

v-if

• 요소 구조 자체를 추가, 삭제
• 초기 렌더링 낮다, 전환비용 높다

v-show

• 구조를 만들고 style="display:none"을 추가, 삭제
• 초기 렌더링 높다, 전환비용 낮다.
• 구조를 먼저 생성하기 때문에 {{}}내부 데이터가 미리 나올수 있다. 그래서 => v-cloak과 같이 사용
  v-cloak
  : 디렉티브 요소를 넣어서 동작하고 data에 준비 끝나면 vue 내부동작에 의해 v-cloak 요소 제거

[v-cloak]: {
  ...
}

😼 리스트 렌더링

😼 :key

a in as같이 객체를 반복할 때 순서대로 나오지 않을 수 있어서 각 노드의 id를 추적하여, 재사용하거나 순서를 변경하는 등의 작업을 위해 각 아이템에 :key 속성을 주어 vue에 힌트를 주는 것

<div v-for="item in items" :key="item.id" ><div>

😼 $emit

: template을 사용할 때 App내부 Methods를 사용하기 위한 방법

<todo-item @커스텀이름="사용할 함수">

const TodoItem = {
  template: `<button @click="$emit('커스텀이름', todo.id(인자))"</button>`,
  props: ['todo']
}

😼 $event

: @event에서 event객체를 사용하기 위함

//함수 여러개 작성할때는 ; or , 를 사용하면 됩니다.
<div @click="a(..., $event), b(), c()"></div>
<div @click="a(..., $event); b(); c()"></div>

const App = {
  methods: {
    a(..., event) {
      //$event == event
    },
    b() {},
    c() {}
  }
}

😼 bubbling 막기

event.stopPropagation() => @click.stop

😼 그 외 잘 몰랐던 것들...

event.currentTarget: event가 연결된 부분
event.target: click이 된 부분

.passive: 화면의 렌더링과 동작 로직을 분리 시켜준다.
.exact: 명시되어 있는 동작만 실행시켜준다.

😼 v-model

: input, textarea, select 요소들에 양방향 데이터 바인딩

😺 Feeling

내일 엄청 할게 많을 듯 그래도 오늘은 여기까지 하고 자유를 느끼고 싶습니다.
하고 싶은 것 할 께 요!!!

📖 REF

프로그래머스 데브코스
https://v3.ko.vuejs.org/guide/introduction.html