VueJS day1
Vue.JS Start!
Vue.JS
Vue.JS는 사용자 인터페이스를 만들기 위한 프레임워크로 웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크이다. Vue.JS는 개발자들이 JS, Jquery의 기초 지식만 알고 있다면 익히기 쉬울 것이다.
Vue.JS를 시작하기 위해서는 먼저 설치하는 작업이 필요하다. Vue.JS를 설치하여 사용하기에 가장 쉬는 방법으로는
<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
혹은
<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
를 복사하여 작업하고자 하는 html 내 head 안에 넣어주면된다. (https://kr.vuejs.org/v2/guide/ 참고)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>vue</title>
</head>
<body>
<div id="app">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
</script>
</body>
</html>
이런 식으로 작성하고 웹 페이지에서 확인하면,
이렇게 뜬다면 정상적으로 Vue를 받아온것이라 볼 수 있다.
스크립트 내부에 Vue객체를 생성하여 그 내부에 el은 elements(요소)를 의미하고 data는 우리가 넣을 데이터를 의미한다. data는 key:value의 형식을 띄고 있다. key에 value를 지정해주고 html 내 형식(이중 중괄호)으로 적어주게되면 value의 값이 출력된다.
이러한 방식을 데이터 렌더링이라한다.