vue.js 시작
Vue.js의 시작
요즘 프론트 엔드쪽 기술에 관심이 높아지면, react와 vue사이에서 vue를 먼저 공부하기로 선택했다. 큰 이유는 없고 react보다 vue가 좀 더 접근하기 쉽다고 하여, 시작하기로 했다.
Vue.js란
- 공식 사이트의 내용 중 일부로 핵심 라이브러리(Vue.js)가 뷰 레이어에만 초점을 맞추어져 있습니다.
- 따라서 다른 라이브러리나 기존 프로젝트와의 통합이 쉽습니다.
지원하는 자바스크립트 버전은 ES5입니다.
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>
- Single File Component방식을 사용하여 프로젝트 전체에 적용 <= 프레임워크 레벨
무작정 따라하기
- Hello Vue.js World
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
str: 'Hello Vue.js'
}
})
// 위 script를 풀어서 쓰면 아래와 같이 나타남.
// var datas = {
// str: 'Hello Vue.js'
// };
// var vueConfigOptions = {
// el: '#app',
// data: datas
// };
// var app = new Vue(vueConfigOptions);
</script>
</body>
- p태그 사이에 중괄호 두개로 묶인 부분이 Vue.js의 대표적인 기능중 하나인 템플릿 문법
- Vue 인스턴스를 생성할 때는 option객체를 받음.
Vue Instance
- Vue.js의 문법은 Vue Instance안에서만 동작함.
- ex) 초기화를 통해서 HTML DOM요소와 Vue Instance가 연결되면, 템플릿 문법, 이벤트 제어, 디렉티브, 컴포넌트 사용가능
- el옵션 속성을 통해 지정한 HTML DOM요소 안쪽에만 Vue.js 문법이 적용됨을 의미
ps. 찾아보고 공부하면서 정리하는 내용이라 틀릴 수 있음을 알려드립니다.