<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>
절차
1. new Vue() 인스턴스 안에 el, data 를 정의하고 인스턴스 생성
2. <div id='app'>{{message}}</div> 해당 돔에 인스턴스 부착됨
3. data 속성의 message 값 Hello Vue.js!가 {{message}}와 치환되서 화면에 출력
유효 범위
1.뷰 라이브러리 파일 로딩
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
2. 인스턴스 객체 생성
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
3. el:'#app' Vue 객체 스코프에 인스턴스 연결
<div id="app">
{{message}}
</div>
4. 인스턴스 내용 ( data )이 화면 요소로 변환
<div id="app">
Hello Vue.js!
</div>
5. 변환된 요소가 화면에 출력
'코드 정리' 카테고리의 다른 글
| Vue.js 실전_ 연습 순서 (0) | 2023.11.08 |
|---|---|
| 스프링 시큐리티_구글 소셜로그인_DB연결 (0) | 2023.11.01 |
| local=> Git (0) | 2023.11.01 |
| 파이썬 기초_1 (1) | 2023.10.24 |
| 파일질라_리눅스_자바서비스_vmware_ftp (1) | 2023.10.06 |