inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

스피너 실행 및 종료 시점 알아보기

라이프싸이클에 대한 질문

해결된 질문

146

열씨미살자!

작성한 질문수 87

1

이번 강의와 좀 무관한 질문입니다..
대충 루트 컴포넌트와 자식컴포넌트를 만들어서 라이플싸이클 훅을 돌려보니 

parent beforeCreate

parent created

parent beforeMount

child beforeCreate

child created

child beforeMount

child mounted

parent mounted

이 순서로 실행이 됩니다. 

여기서 궁금한점이

1. 그림에서 Has el option ? 으로 되어있는것이 vue 인스턴스에 el option을 말하는것같은데 만약 없다면 new Vue({}).$mount("app")을 호출한다는 뜻인가요?

2. Create vm.$el and replace 'el' with it <- 이 부분은 인스턴스와 마운트된 태그를 $el에 담겠다는 것 인것같은데....  replace 'el' 에서 'el'이 정확히 어떤 것을 말하는지 궁금합니다.

mounted()에  console.log(this.$el)로 찍어보니 mount된 태그가 나오더라구요. javascript로 따지면 vm.$el = document.querySelector(el) 이니깐 결국 'el'은 뷰옵션인 el : "#app" 의 el을 의미하나요?

3. 자식이 Created 될때 Has el option ?  부분에서는 어떻게 동작하는지 궁금합니다. 자식컴포넌트에서는 el option이 명시되어있진 않지만 싱글파일 컴포넌트의 template부분을 el로 알아서 잡는건지 ..

javascript vuejs

답변 1

0

캡틴판교

안녕하세요 dongwoo님, 답변 드리겠습니다 :)

1. 네 el 이 없으면 대체재로 $mount() API를 찾습니다.

2. el은 element의 약자이고 인스턴스 옵션 속성에도 el 속성으로 존재합니다.

3. 싱글 파일 컴포넌트를 사용하는 경우는 대부분 뷰 CLI로 프로젝트를 생성해서 사용하시게 될텐데 그러면 main.js에 있는 인스턴스에 $mount() API로 인스턴스를 부착해서 화면을 그리게 됩니다:)

깃 권한 요청 드립니다

0

50

1

깃 권한 신청

0

50

1

깃 권한 요청드립니다.

0

111

1

깃허브 권한 요청 드립니다

0

144

1

깃허브 권한 요청 드립니다

0

161

1

깃허브 권한 요청 드립니다

0

167

1

깃허브 권한 요청 드립니다.

0

154

1

안녕하세요 vue 2.7로 수강하고 있는 학생입니다. 실무에서 최하위 자식의 props와 watch의 관계를 여쭈고자 합니다.

0

208

1

ide 타입추론 기능 사용할 수 없을까요??

0

207

1

컴포넌트 링크는 vue peek 익스텐션 설치가 필수인가요??

0

228

1

Vue3로 진행중입니다

1

338

1

Vue router-link 사용시 같은 url이면

1

506

1

vue3 에러 메세지...

1

670

2

id ="app" 중복

0

271

2

use undefined 에러가 나옵니다.

1

318

2

깃허브 권한 요청드립니다.

1

358

2

권한요청드립니다.

1

299

2

Vue3에서 구글 애드센스 탑재하기

1

437

2

코드가 정상 작동 되는건지 ...

1

303

1

강의에서 api를 따로 빼셨는데 얻는 이점이 뭐죠?

1

243

1

vuex 적용시 질문

1

288

2

라우터 버전이 안맞는데 어떤걸 써야하나요

1

385

2

UserView에 id 속성만 undefined로 넘어오는데 이유를 모르겠습니다..

1

455

2

권한요청 드립니다!

1

275

2