Vue, 첫 시작!

전민승·2020년 11월 18일
0

Vue 앱은 단일 DOM 요소(우리의 경우 #app)에 연결되어 DOM 요소를 완전히 제어 !!!

HTML는 엔트리 포인트일뿐 다른 모든 것은 새롭게 생성된 Vue 인스턴스 내에서 발생 !!!

<div id="app">
{{ message1 }}
</div>
{{ message2 }}

message2는 Vue app의 인스턴스 범위를 벗어났기 때문에 message2를 수정하여도 반영이 안됨 !

<body>
<div id="app-2>
	<span v-bind:title="message">이곳에 마우스를 올리면 title 확인 가능 !<span>
</div>
</body>
<script>
const app2 = new Vue({
	el:"#app-2",
    data: {
    	message : `이 페이지는 ${new Date()}에 로드 됨 !`
        },
    
})
</script>

Vue도 자바스크립트의 템플릿 리터럴이 적용됨 !!!

profile
Frontend Developer

0개의 댓글