VueJS 첫번째. 시작하기

최근에 프론트엔드 부분 중, Vue 와 React 에 관심이 생겨 포스팅을 시작하게 되었습니다.

그중 처음으로 포스팅을 시작하는 내용은 VueJS 입니다.

jQuery와 ExtJS 포스팅을 읽으신 분들이 계실수도 있어서 관련 스크립트들과 연관을 지어 글을 작성하도록 하겠습니다.

vue.js 라이브러리파일(선택)

위 2가지 라이브러리 중, 하나를 선택하셔서 포스팅 글을 진행하시면 됩니다.

body 태그

{{}} html 태그내에 해당 문법을 이용하시면 vueJS 의 data 속성의 key에 맵핑된 value 값이 바인딩 됩니다.

vueJS 코드

script 태그안에 작성되는 코드이며, ExtJS의 viewModel 을 선언해놓은 데이터 바인딩을 처리하는 개념과 유사합니다.

1. el : 뷰 문법이 적용될 최상위 부모 element id 셀렉터 ("#아이디명") 을 이용해도 되지만, 일반적인 document.getElementById() 혹은 document.querySelector() 를 이용해소 동일하게 렌더링 됨

2. data : 화면상 바인딩 처리 되는 object 영역

전체코드

전체코드를 실행을 해보면, 브라우저에 텍스트 문구가 출력되는것을 확인 할 수 있습니다.

이번 포스팅의 중요내용은 다음과 같습니다.

1. {{}} 를 이용하여 content 내용을 바인딩 할 수 있다.

2. vue 객체에 el 속성은 뷰문법이 적용될 엘리먼트 셀렉터 선택자를 지정한다.

3. vuew 객체에 data 속성은 바인딩처리 할 데이터 key : value 형태로 지정한다.