뷰 인스턴스
뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위.
new Vue({
...
});위와 같은 형식으로 뷰 인스턴스를 생성합니다.
<html>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({ // 인스턴스
el: '#app', // el 속성
data: { // data 속성
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>index.html 파일을 만들어서 위 코드를 작성한 후, 크롬에서 실행하면
{{ message }} 부분이 인스턴스의 data 속성의 값으로 치환되어 표시가 된다.
뷰 인스턴스의 유효 범위
뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타나는것을 인스턴스의 유효범위라고 합니다.
<div id="app">
</div>
{{ message }}바로 전에 작성했던 코드에서 {{ message }} 의 위치만 바꿔서 다시 실행하면,
Hello Vue.js! 가 출력이 되지않고 사진과 같이 문자 그대로 출력이 됩니다.
'Vue.js' 카테고리의 다른 글
| [Vue.js] 입문 - 뷰 컴포넌트 통신 (0) | 2022.02.22 |
|---|---|
| [Vue.js] 입문 - 뷰 컴포넌트 (0) | 2022.02.21 |
| [Vue.js] 입문 - 개발 환경 설정하기 (0) | 2022.02.18 |