럿고의 개발 노트
[Goorm] Vue.js로 시작하는 SPA개발 Chapter5. Directives 본문
[Goorm] Vue.js로 시작하는 SPA개발 Chapter5. Directives
KimSeYun 2019. 11. 28. 18:31[Goorm] Vue.js로 시작하는 SPA개발
5. Directives
5.1. Directive의 개념과 v-for
● 참고문서
- 조건부 랜더링(Conditional Rendering) : https://kr.vuejs.org/v2/guide/conditional.html
- 리스트 랜더링 - 반복문(List Rendering) : https://kr.vuejs.org/v2/guide/list.html
- 이벤트 핸들링 - JavaScript Event (Event Handling) : https://kr.vuejs.org/v2/guide/events.html
- 폼 입력 바인딩 - Data Binding (Form Input Bindings) : https://kr.vuejs.org/v2/guide/forms.html
● Directive
- 'v-' prefix(접두사)를 가지고 있음.
- 보간법이라는 의미로 위치 지정자라고 함.
- Interpolation만으로는 힘든 각종 효과들을 쉽게 적용(가장 큰 장점)
■ 조건문, 반복문, 이벤트 등등
- 어떤 Directive는 인자를 받을 수 있음
■ v-bind:href="url" // href를 인사로 받아서 url이라는 변수를 href에 bind시키는 것
● v-for
- 동일한 형태의 항목들에 대해서 반복적으로 표시
- 대부분의 에디터에서는 :key를 사용하도록 권장
■ 고유한 Key값을 통해, 항목들이 예측 가능한 순서로 나타내기 위함
| <!DOCTYPE html> | |
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>[Groom]Vue.js로 시작하는 SPA개발 - Chapter05 - Ex1</title> | |
| <!-- Vue.js 추가 --> | |
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
| </head> | |
| <body> | |
| <div id = "app"> | |
| <ul> | |
| <li v-for="(item, index) in items" :key="index">{{item }}</li> | |
| <!-- | |
| v-for : 배열을 기반으로 리스트를 렌더링 할수 있음 | |
| item in itmes 형태로 특별한 문법이 필요 | |
| 여기서 items은 원본 데이터 배열, itme은 반복 배열 엘리먼트 별칭 | |
| :key : 개별 DOM 노드들을 추적하고 기존 엘리먼트를 재사용, 재정렬하기 위해서 v-for의 각 항목들에 고유한 key 속성을 제공해야 함. | |
| --> | |
| </ul> | |
| </div> | |
| <script> | |
| let vm = new Vue({ // Vue 생성 | |
| el:"#app", // app이라는 id를 가지고 있는 element 선택 | |
| data: { // 데이터(변수) 설정 | |
| items:["Hello","Vue","from","ruto"] // items라는 배열 설정 | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |
5.2. v-if 알아보기
● v-if : 조건문
- v-if / v-else-if / v-eles
■ boolean값을 이용해 보여주는 것에 대한 조작을 할 수 있음
■ v-if의 Toggle Cost(화면에 그려지거나 그려지지 않는데 사용되는 비용)가 크다고 함
5.3. v-if 예제 실습
● 실습 코드
| <!DOCTYPE html> | |
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>[Groom]Vue.js로 시작하는 SPA개발 - Chapter05 - Ex2</title> | |
| <!-- Vue.js 추가 --> | |
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <p v-if="isNotClicked">Not Clicked!</p> <!--클릭이 없으면 이 p 태그 표시--> | |
| <p v-else-if="lessThanClicks">Clicked {{ clicks }} times!</p> <!--클리이 10번 이하면 이 p 태그 표시--> | |
| <p v-else>Too many Clicks!</p> <!-- 클릭이 10번 초과되면 이 p 태그 표시--> | |
| <button v-on:click = "clickedHandler">Click Me!</button> <!-- 이 버튼을 클릭할때 마다 clicks 변수의 값이 1씩 올라감--> | |
| <!-- v-on은 이벤트 핸들러로 click하면 메소드(이벤트)를 실행하는 것--> | |
| </div> | |
| <script> | |
| let vm=new Vue({ // Vue 생성 | |
| el:"#app", // app이라는 id를 가지고 있는 element 설정 | |
| data:{ | |
| clicks:0 // clicks이라는 변수 및 데이터 선언 | |
| }, | |
| methods: { // 메소드 선언 | |
| clickedHandler(){ // 버튼을 클릭시 clicks이 1씩 증가 | |
| this.clicks++; | |
| } | |
| }, | |
| computed: { // computed 선언 | |
| isNotClicked : function(){ // clicks이 0인 경우 | |
| return this.clicks==0; | |
| }, | |
| lessThanClicks : function(){ // clicks가 10번 이하인 경우 | |
| return this.clicks<=10; | |
| } | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |
5.4. v-model 알아보기 & 실습
● v-model : (Form Input) Data Binding
- input DOM에 Data Binding을 설정하는 것
■ 대부분의 input Type에서 가능
■ text, textarea, checkbox, radio, select
■ JavaScript의 document.getElementByTagName("input")[0].value를 사용하는 것과 같은 효과
■ Modifier를 이용해 input값을 다듬을 수 있음
■ .number : String을 Numeric 값으로 TypeCast
■ .trim : 앞 뒤 WhiteSpace들을 정리
■ .lazy : input DOM에서 포커스가 나갔을 때 Updata(연속된 이벤트 발생 방지)
● 실습 코드
| <!DOCTYPE html> | |
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>[Groom]Vue.js로 시작하는 SPA개발 - Chapter05 - Ex3</title> | |
| <!-- Vue.js 추가 --> | |
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
| </head> | |
| <body> | |
| <div id ="app"> | |
| <input type="text" name="ex" id="ex" v-model.lazy="inputValue1"> <!--.lazy : 커서(포커스)가 벗어나면 값에 넣기--> | |
| <p>{{ inputValue1 }}</p> | |
| <input type="text" name="ex" id="ex" v-model.trim="inputValue2"> <!-- whiteSpace 방지 --> | |
| <p>{{ inputValue2 }}</p> | |
| <select name="ex-sel" id="ex-sel" v-model="seelctValue"> | |
| <option value="hello">Hello</option> | |
| <option value="world">World</option> | |
| </select> | |
| </div> | |
| <script> | |
| let vm = new Vue({ // Vue 생성 | |
| el:"#app", // app이라는 id를 가지고 있는 element 선택 | |
| data:{ // 변수(데이터) 선언 | |
| inputValue1:"", // v-model.lazy 예제 데이터 | |
| inputValue2:"", // v-model.trim 예제 데이터 | |
| seelctValue:null // select 예제 데이터 | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |
5.5. v-on 알아보기
● v-on : Event Handling
- Native DOM Event와 Custom Event 모두 조작 가능
■ 특히, Modifier를 이용해서 특정 이벤트만 골라서 적용 가능
★ Native DOM Event : 이미 설정되어 있는 이벤트
★ Custom Event : 어떤 목적에 의해 초기화된 이벤트 및 사용자가 만든 이벤트
5.6. v-on 예제 실습
● 실습 코드
| <!DOCTYPE html> | |
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>[Groom]Vue.js로 시작하는 SPA개발 - Chapter05 - Ex4</title> | |
| <!-- Vue.js 추가 --> | |
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
| </head> | |
| <body> | |
| <div id ="app"> | |
| <p v-on:copy.prevent="isCopied">중요한 정보(복사 X)</p> | |
| <!-- v-on:copy.prevent : copy의 이벤트를 막으라는 의미(즉, 복사가 안되게 설정) --> | |
| </div> | |
| <script> | |
| let vm = new Vue({ // Vue 생성 | |
| el:"#app", // app이라는 id를 가지고 있는 element 선택 | |
| methods: { // 메소드 선언 | |
| isCopied(){ // 복사하려고 하면 alert창 뜨게 함. | |
| alert("저작권법 위반입니다."); | |
| } | |
| }, | |
| }) | |
| </script> | |
| </body> | |
| </html> |
● 실습 코드 Github 및 출처
- 실습 코드 : https://github.com/ksy90101/Vue.js/tree/master/%5BGoorm%5DVue.js/Chapter05
'Vue.js Note > [Goorm] Vue.js로 시작하는 SPA 개발(동영상강의)' 카테고리의 다른 글
| [Goorm] Vue.js로 시작하는 SPA개발 Chapter7. 마무리 (0) | 2019.11.28 |
|---|---|
| [Goorm] Vue.js로 시작하는 SPA개발 Chapter6. Components (0) | 2019.11.28 |
| [Goorm] Vue.js로 시작하는 SPA개발 Chapter4. Template Syntac (0) | 2019.11.28 |
| [Goorm] Vue.js로 시작하는 SPA개발 Chapter3. Vue Instance와 작동원리 (0) | 2019.11.28 |
| [Goorm] Vue.js로 시작하는 SPA개발 Chapter2. Hello World로 만나는 Vue (0) | 2019.11.28 |
