마크업은 #app라는 CSS ID 선택자를 가진 하나의 div 요소입니다. Vue는 ID를 사용하여 div를 찾아내 애플리케이션을 마운트합니다. 이 선택자는 (#id, .class 같은) CSS에서 사용하는 구문과 같습니다.
Note
책 전반에서 레이아웃과 디자인에는 부트스트랩 3을 사용할 것입니다. 사용하기 좋고 Vue.js에 집중할 수 있도록 도와줍니다. 필자가 글을 쓰는 동안 부트스트랩 4가 나왔지만, 디자인이 중점이 아니기 때문에 그냥 부트스트랩 3을 사용하겠습니다. 예제들은 부트스트랩 4에서도 작동하지만 부트스트랩 4를 사용한다면 몇몇 클래스 이름은 부트스트랩 4의 새 클래스 이름으로 바꾸어야 합니다. 잊지 마세요.
우리가 쓰는 CSS 선택자가 DOM 요소 하나 이상을 가리킨다면 Vue는 선택자와 일치하는 요소 중 첫 번째 요소에 애플리케이션을 마운트합니다. div 요소를 3개 가진 HTML이 있고, new Vue({el: 'div'})로 Vue 생성자를 생성한다면 Vue는 이 3개 중 첫 div 요소에 애플리케이션을 마운트합니다.
단일 페이지에서 Vue 인스턴스를 여러 개 작동하고 싶다면 고유한 선택자를 사용해서 각각의 다른 DOM 요소에 마운트할 수 있습니다. 이상하다고 생각할 수 있는데, 이미지 캐러셀(carousel)1이나 웹-폼(form) 같은 작은 컴포넌트를 여러 개 만든다고 가정하면 단일 페이지에서 루트 Vue 인스턴스가 여러 개 존재할 수 있다는 점을 이해할 수 있을 것입니다.