딱 핵심만 짚고 넘어가자. 그리고 실제로 코딩하고 실행해보자. 처음에는 몸과 머리에 안 익숙하겠지만, 그냥 쭉쭉 넘어가다보면, 오래하다보면 익숙해진다.
1. 기본 구조 및 data 객체
기본구조 및 데이터 바인딩 이해하기
상세한 구조에 대해서는 나중에 알아보는 편이 좋다. 처음에는 src 폴더 내에 index.html 파일에 들어가서 모든 내용을 지우고, html 파일을 다시 만들자. 빈 화면에 !만 입력하고, [Tab]키를 누르면 html 기본구조가 생성되는 것을 확인할 수 있다(안되면 직접 쓰든, 구글링을 하든 방법을 찾아보자).
CDN을 통해 빠르게 vue 파일 만들어보기
<header> 태그의 가장 아랫부분에 Vue.js의 공식사이트에서 제공하는 CDN 방식의 script 코드를 넣으면 vue를 이용할 수 있게 된다.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
그리고 아래 그림과 같이 <body>태그를 작성해보자.
<div id="app"> 부분은 웹 페이지에 표시할 요소(element)를 정의하는 부분이다. 여기안에 {{ name }} 이라고 작성했는데, 데이터를 바인딩(할당)할 변수명을 선언해주는 부분이라고 이해하면 된다. 중괄호 두 개를 쓰는 것을 mustache(콧수염) 문법이라고 부른다.
그 아래의 <script> 부분을 보자. <script> 부분은 쉽게 말해 위에서 정의한 요소를 지정하는 부분이라고 생각하면 된다. new Vue({ ... }) 라고 작성해서 요소를 꾸며줄 수 있는 Vue 인스턴스를 만들겠다고 선언한다. 그리고 요소를 지정하기 위해 el : '#app' 이라고 작성했다. 요소의 <div id="app"> 부분과 연동되도록 하겠다는 의미이다. 마지막으로 변수들은 data: { ... } 부분에 작성한다.
실행해보자! index.html 파일을 우클릭하여 "Run index.html"을 클릭하거나, IntelliJ의 경우 [Ctrl + Shift + F10] 버튼을 눌러서 실행할 수 있다. 아래와 같이 실행 결과, data에 적은 key값 name의 value인 charlie가 웹 페이지에 출력되는 것을 확인할 수 있다.
실행 결과
2. 객체 추가 및 함수 작성
객체추가
객체를 한 단계 더 깊게 넣고 조회해보고, 함수에 해당하는 methods도 만들어본다. 아래 사진과 같이 객체를 한단계 더 깊게 만들어서 조회할 수 있다.
멤버 메소드(함수) 구현
함수들은 methods 객체내에 구현한다(변수는 data 객체 내에서 구했던 것과 유사하게, methods 내에 작성하는 것이라고 이해하면 된다). Vue를 클래스의 인스턴스로 만들었으므로, 데이터멤버들은 this로 호출한다(this.person.name, this.thisYear).
함수는 thisYear : function(greeting)과 같이 객체 형태로 작성해도 되지만, 축약형으로 auxiliaryMethod()와 같이 작성해도 된다. 아래 사진의 예제는 auxiliaryMethod 메서드에서 thisYear 메서드를 greeting 파라미터를 넣어주면서 호출하는 구조이다.
실행 결과
3. 바인딩
바인딩 하는 것을 배운다. 기본적으로 요소에 데이터 값을 할당하는 것은 아래 사진에서 {{person.name}}과 같이mustache 문법을 통해 적용할 수 있다. 그러나 만약 <form> 태그, <a> 태그등의 속성값을 data 객체 내의 값으로 바인딩할려면, v-bind 문법을 이용해야한다.
ex)
<a href={{link}}> </a> --> 적용불가
<a v-bind:href="link"></a> --> 적용가능
'v-bind:속성' 또는 축약어 ':' 를 통해 바인딩이 가능하다.
<input> 태그의 type값과 value 값을 Vue 인스턴스의 data 객체에서 각각 typeOfInput과 initialValue로 정의하고 바인더를 통해 호출하였다. 아래 script에서 data.typeOfInput : "text"로 정의하고, type 앞에 "v-bind:"라고 작성하여 특정 data 객체값을 input 태그의 type속성에서 변수처럼 사용할 수 있는 것이다.
출력 결과
text를 입력할 수 있는 text type의 input box가 생성된 것을 확인할 수 있다. input box의 initialValue와 <a> 태그의 링크도 정상작동한다.
4. 이벤트
onclick 이벤트 만들어보기
사용자의 클릭에 반응하는 onclick 이벤트를 적용해보자. v-on:click 을 통해 이벤트를 적용할 수 있다. event.html 파일을 새로 만들어서 아래와 같이 작성해보자. 이때까지 배운 내용을 복습할 겸, 코드도 몸에 익힐 겸..
실행 결과 화면
add, minus 이벤트 버튼이 만들어지고, 각 버튼을 클릭하면 {{year}} 값이 증감하는 것을 볼 수 있다. 이벤트가 발생해서 data.year값이 바뀌면 새롭게 렌더링이 되어서 숫자가 바뀌는 원리이다.
form 태그를 이용한 onsubmit 이벤트 만들어보기
onclick과 마찬가지로, v-on:submit을 통해 이벤트를 적용할 수 있다. 사용자가 <form> 태그 안의 버튼을 눌러서 submit 이벤트가 일어나면, v-on:submit에 confirmSubmit() 메서드를 실행하여 "제출되었습니다."라고 알림창이 뜨게 된다.
아래 영상에서 보면, alert("제출되었습니다.") 실행 후 input 태그 내부의 글자가 없어지는 것을 볼 수 있는데, 이것은 form 태그의 경우 submit 이벤트 실행 후 자동으로 페이지를 새로 고침하기 때문이다. 보통은 이벤트값 e를 받아와서, e.preventDefault()로 처리하여 기본적인 동작을 막아줌으로써 해결하는데, Vue.js 에서는 '이벤트 수식어(Event Modifier)' 중 .prevent를 사용하여 해결할 수 있다.
※ 참조2) '공식문서 : 이벤트 핸들링 : 이벤트 수식어(Event Modifier)'
참조
1) 유튜브 코지코더 - Vue.js 2 기초 익히기 기본 강좌
www.youtube.com/channel/UCI4tTBupvhMX1aWDSm-HAXw
2) Vue.js 공식문서 - 이벤트 핸들링 - 이벤트 수식어
kr.vuejs.org/v2/guide/events.html#%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%88%98%EC%8B%9D%EC%96%B4
'Programming-[Frontend] > Vue.js' 카테고리의 다른 글
| Vue.js / 기초 / 6. 파일, 컴포넌트 및 router 구조 (2) | 2021.01.25 |
|---|---|
| Vue.js / 기초 / 1. Vue.js의 특징, Vue-cli 설치하기 (0) | 2021.01.25 |
| Vue.js / 기초 / 5. 인스턴스, 컴포넌트 (2) | 2021.01.20 |
| Vue.js / 기초 / 4. 클래스와 스타일 바인딩, v-if와 v-show, v-for (0) | 2021.01.19 |
| Vue.js / 기초 / 3. 데이터 양방향 바인딩(v-model), computed, watch 속성 (0) | 2021.01.19 |
