앱 마운트

최상위 컴포넌트(index.html)에 .mount() 함수가 있어야 화면에 렌더링 된다.

• mount()는 각 앱 인스턴스당 1번만 호출할 수 있음

멀티 앱 인스턴스

• createApp API를 이용하면 여러 Vue 앱이 동일한 페이지에 공존할 수 있따.

템플릿 문법(보간법)

{{ 임시 메세지 }}
형태는 다음을 따른다

• 이중 중괄호 태그 내에 메세지는 해당 컴포넌트 인스턴스의 값으로 대체된다

  • 각 .vue 파일을 컴포넌트라고 일컫는다.

• 콘텐츠는 식별자나 경로,유효한 JavaScript 표현식을사용할 수있음

  

• 보간법은 html이 아닌 **일반 텍스트**로 해석한다.

  

  코드 영역

  

  적용 결과

• 임의의 HTML을 동적 렌더링 ← XSS 취약점 발생 주의 따라서, 신뢰할 수 있는 컨텐츠만 v-html 사용(사용자 제공할 경우 절대 금지)

속성 바인딩

CSS 2개를 만들고 각 Id, class를 변경시켜 각각 다르게 표현시킬 수 있다.

• 보간법({{}})은 HTML의 attribute에서 사용할 수 없어서 v-bind를 이용해야한다.
• 바인딩 된 값이 null, undefined 이면 엘리먼트 속성이 제거된 상태로 렌더링
• 동일한 속성의 이름이 바인딩 될 경우, 속성 값을 생략할 수 있다.