-
[Vue.js] 개념과 기본문법 살펴보기 (data, method)Front-End/Vue.js 2022. 11. 13. 10:01
📑 Vue.js란?
프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크이다. MVVM 패턴의 ViewModel에 해당하며, UI 코드와 데이터제어 제어 로직을 분리한다. SPA(Single Page Application)를 구축하는데 이용 가능하다.
📌 view(html DOM) : 사용자에게 보이는 화면.
📌 Model(JS) : 데이터를 담는 용기, 보통 서버에서 가져온 데이터를 javascript 객체로 저장
📌 ViewModel : View와 Model의 중간 영역으로 DomListener와 DataBinding을 제공하는 영역
📌 DOM : HTML 문서에 들어가는 요소(tag, class, attribute 등)의 정보를 담고있는 데이터 트리📌 DOM Listener : DOM의 변경에 대한 즉각적으로 반응하여 특정 로직을 수행하는 장치
📌 Data Binding : view에 표시되는 내용과 모델의 데이터를 동기화, vue에서는 기본적으로 단방향 데이터 바인딩으로 컴포넌트간 통신은 상위 컴포넌트 -> 하위컴포넌트로 전달한다.
📑 CDN 입력
Vue.js의 기본 문법을 알아보려고 npm방식으로 들어가기 이전 cdn을 이요하려 한다. html head에 다음과 같은 링크를 넣어주자.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
📑 data
<HTML 코드>
<div id="text"> <p> {{title}}</p> </div><JS 코드>
new Vue({ el : '#text', data :{ title : '안녕하세요요!' } })위와 같이 입력한다면 아래와 같은 결과값이 나온다. 한 번 상상해보고 아래 결과를 봐보자.
그럼 Vue의 코드를 하나씩 살펴보자.
📌 1. new Vue({})
: VueJS의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것이라고 한다. 즉) 화면에 렌더링 되는 HTML 코드들을 컨트롤 하는 것이라고 할 수 있다. new Vue({})는 이러한 역할을 할 vue를 선언하고 정의해 주는 역할이다.
그 안의 el요소는 Vue가 새롭게 정의될 때, Vue가 적용될 요소를 지정ㅎ해주는 역할을 한다. HTML 코드 중 id가 'text'인 div 태그를 선택한 걸 확인할 수 있다.
📌 2. Vue의 정보 저장소 data
: Vue는 여러 속성(property)들을 가지는데 그 중 data는 Vue에서 사용할 정보들을 저장하는 곳으로 object 형태로 정보들을 가지고 있다. 위에서는 title 이란 변수를 만들어서 '안녕하세요요!'라는 값을 넣어주었다. Vue는 d이 값을 들고 title 값이 필요한 곳이 어딘지 찾아다닌다.
📌 3. {{ Mustache(interpolation)}}
: data 안에 저장된 값은 그럼 어디 들어가야되지?? 라는 질문에 여기로 들어오세요!! 라고 답해주는 게 바로 {{ }}의 역할이다. 이 기호 안에 선언된 속성 내의 변수나 함수들을 호출하여 사용할 수 있다. 여기서는 data.title의 값으로 지정된 '안녕하세요요!!'가 HTML의 div 태그 안에 들어가 출력된 걸 확인할 수 있다.
📑 VueJs 함수저장소 , method
Vue의 정보들을 저장하는 저장소가 data라면, 함수들을 저장하고 있는 곳이 바로 method다.
<!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"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ title }}</p> <p>{{ howAreYou() }}</p> </div> <script> new Vue({ el : '#app', data : { title : '안녕하세요!!' }, methods :{ howAreYou : function(){ return '기분이 어때??' } } }) </script> </body> </html>위의 코드를 보면 Vue의 howAreYou()라는 함수는 "기분이 어때??"라는 문자열로 출력해주는 간단한 함수로 정의해줬다. {{howAreYou()}} 지정해준 곳에 함수의 결과물이 출력된 걸 확인할 수 있다.
📌 Vue 내에서 Vue 지칭, this
위에서 data는 Vue가 가지고 있는 정보들의 저장소라고 했다. 저장소에 저장한다는 것은 우리가 원하는 때 그것을 빼서 쓸 수 있다는 것을 의미한다. data 안에 저장된 값ㅇ르 꺼내서 쓸 수 있는 단어가 바로 this 이다.
{{title}} 자리에 {{sayHello()}}를 넣어보자.
<div id="app"> <p>{{ sayHello() }}</p> <p>{{ howAreYou() }}</p> </div> <script> new Vue({ el : '#app', data : { title : 'say~~ 안녕하세요!!' }, methods :{ howAreYou : function(){ return '기분이 어때??' }, sayHello : function(){ return this.title } } }) </script>
this를 사용해서 method에서 data를 가져와 사용했다. this는 data 내의 값을 불러올 때만 사용되지 않고 method의 함수를 불러올 때도 사용된다.
참고 : https://happy-jjang-a.tistory.com/m/114 , [맨땅에VueJS] VueJS의 정보 저장소 data / VueJS data | by Hoza Cho | Medium
반응형'Front-End > Vue.js' 카테고리의 다른 글
[Vue.js] 양방향 데이터 바인딩 v-model (0) 2022.11.13 [Vue.js] 계산된 속성 computed vs methods (0) 2022.11.13 [Vue.js] 기본 문법 (v-on 이벤트리스너) (0) 2022.11.13 [Vue.js] 기본 문법 (v-once, v-html) (0) 2022.11.13 [Vue.js] 기본 문법, 디렉티브 사용 v-bind (0) 2022.11.13