반응형
해당 문서는 Vue 공식 홈페이지의 내용을 대부분 참고하고 있고
공식 홈페이지 내용이 더욱 좋은 교재임을 알립니다.
■ 설명내용
Vue에 대한 기본적 사용법과 선언적 렌더링에 대해서 설명한다.
■ 본문
<!DOCTYPE html>
<html>
<header>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</header>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
</script>
</bodY>
</html>
Vue는 JS 파일을 import 하거나 직접 URL을 호출하기만해도 바로 사용이 가능하다.
header 부분에 있는 <Script> 태그를 보면 Vue.js 를 URL 호출한것을 볼수있다.
이로써 바로 Vue 를 사용할수 있는데,
<div id="app> 태그 내용와 같이 {{ 데이터명 }} 으로 렌더링할 엘리멘트명을 선언한다.
그리고 하단의 <scirpt> 태그에서 해당 엘리멘트를 생성하고 렌더링 될 데이터를 생성한다.
아래 코드에서는 엘리멘트명이 app로 지정하였다.
앞에 #을 셀렉터라고 하는데 생성된 태그 어떤 속성으로 엘리멘트가 생성되었는지 알수있다.
* 셀렉터의 종류
# => ID ,
. => class
태그명 => 해당태그
즉 app 라는 ID 를 가진 태그를 지정할수 있는데, 해당 태그 하단의 선언된 변수들에 대해서
data 속성에서 해당 변수를 찾아 자동으로 렌더링 해준다.
HTML 를 생성할떄 어떠한 태그나 데이터가 들어올지 모르지만 특정 변수를 선언해두고
Vue 를 통해서 해당 변수를 렌더링 하는것,
선언적 렌더링을 통한 Vue 활용이라 할수있다.
* 의식 흐름대로 적은거라 뭐라하는지 잘모르겠다.
차후에 내용을 다듬어야할듯 싶다.
반응형
'프로그래밍 > Vue' 카테고리의 다른 글
| 01.Vue의 설치 (0) | 2018.04.06 |
|---|
댓글