Vue.js 템플릿 - 디렉티브
① 이번 포스팅에서는 Vue.js 디렉티브(Directive)를 차례대로 정리 하겠습니다.
② 보통은 v- 로 시작하는 접두사가 붙어있는게 특징이예요.
③ 아래 예제 소스를 확인하면서 천천히 읽어보시면 쉽게 이해되실 겁니다.
Vue.js 기초문법11 - 디렉티브(Directive) 설명 및 예제
<span v-if="testFlag">True - Show</span> <span v-else>False - Show</span> | cs |
v-if 는 바인딩 된 'testFlag' 값에 따라서 엘리먼트를 선택적으로 표시할 수 있어요.
# Directive - v-bind
<span v-bind:href="url">Link Activate</span> | cs |
바인딩 된 엘리먼트의 속성 값을 동적으로 제어하는데 주로 사용됩니다.
v-if 와 함께 자주 사용되는 디렉티브입니다.
# Directive - v-on:click
<span v-on:click="cnt += 1">{{ cnt }}</span> <span @click="cnt += 1">{{ cnt }}</span> | cs |
인스턴스에 바인딩 된 함수에 이벤트핸들링이 가능하게 되는 거예요.
주로 @를 붙여서 약어로 사용되는 경우가 많아요.
# Directive - v-on 수식어
<form v-on:submit.prevent>...</form> | cs |
v-on 디렉티브에 주로 사용 될 수식어는 자바스크립트의 함수를 즉시 바인딩 할 수 있습니다.
위에 예제에서는 event.preventDefault() 메소드가 호출되겠죠?
전체 소스코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>vue.js</title> </head> <body> <div id="app"> <h3>디렉티브 v-if</h3> <span v-if="testFlag">True Show</span> <span v-else>False Show</span> <br/> <br/> <br/> <h3>디렉티브 v-bind</h3> <a v-bind:href="url">Link Activate</a> <br/> <br/> <br/> <h3>디렉티브 v-on:click(1)</h3> <button v-on:click="doPrint">click</button> <br/> <br/> <br/> <h3>디렉티브 v-on:click(2)</h3> <button @click="cnt += 1">{{ cnt }}</button> <br/> <br/> <br/> <h3>디렉티브 수식어</h3> <form v-on:submit.prevent> <button type="submit" value="Submit">Submit Test</button> </form> </div> <script src="https://unpkg.com/vue"></script> <script> //인스턴스 생성 var app = new Vue({ el: '#app', data: { testFlag: true, url: "http://google.com", cnt: 0 }, methods: { doPrint: function (e) { console.log('Click Test!'); } } }) </script> </body> </html> | cs |
vue_basic8_example.zip참고 : https://kr.vuejs.org/v2/guide/instance.html
'웹 프론트 > Vue' 카테고리의 다른 글
| Vue.js - 기초 문법 배우기(10) 강의 및 예제 소스 - 기초 문법 (1) | 2018.03.12 |
|---|---|
| Vue.js - 기초 문법 배우기(9) 강의 및 예제 소스 - 기초 문법 (0) | 2018.03.07 |
| Vue.js - 기초 문법 배우기(7) 강의 및 예제 소스 - 기초 문법 (0) | 2017.12.07 |
| Vue.js - 기초 문법 배우기(6) 강의 및 예제 소스 - 기초 문법 (2) | 2017.12.01 |
| Vue.js - 기초 문법 배우기(5) 강의 및 예제 소스 - 라이프사이클(LifeCycle) (1) | 2017.11.29 |
Vue.js 템플릿 - 디렉티브
① 이번 포스팅에서는 Vue.js 디렉티브(Directive)를 차례대로 정리 하겠습니다.
② 보통은 v- 로 시작하는 접두사가 붙어있는게 특징이예요.
③ 아래 예제 소스를 확인하면서 천천히 읽어보시면 쉽게 이해되실 겁니다.
Vue.js 기초문법11 - 디렉티브(Directive) 설명 및 예제
<span v-if="testFlag">True - Show</span> <span v-else>False - Show</span> | cs |
v-if 는 바인딩 된 'testFlag' 값에 따라서 엘리먼트를 선택적으로 표시할 수 있어요.
# Directive - v-bind
<span v-bind:href="url">Link Activate</span> | cs |
바인딩 된 엘리먼트의 속성 값을 동적으로 제어하는데 주로 사용됩니다.
v-if 와 함께 자주 사용되는 디렉티브입니다.
# Directive - v-on:click
<span v-on:click="cnt += 1">{{ cnt }}</span> <span @click="cnt += 1">{{ cnt }}</span> | cs |
인스턴스에 바인딩 된 함수에 이벤트핸들링이 가능하게 되는 거예요.
주로 @를 붙여서 약어로 사용되는 경우가 많아요.
# Directive - v-on 수식어
<form v-on:submit.prevent>...</form> | cs |
v-on 디렉티브에 주로 사용 될 수식어는 자바스크립트의 함수를 즉시 바인딩 할 수 있습니다.
위에 예제에서는 event.preventDefault() 메소드가 호출되겠죠?
전체 소스코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>vue.js</title> </head> <body> <div id="app"> <h3>디렉티브 v-if</h3> <span v-if="testFlag">True Show</span> <span v-else>False Show</span> <br/> <br/> <br/> <h3>디렉티브 v-bind</h3> <a v-bind:href="url">Link Activate</a> <br/> <br/> <br/> <h3>디렉티브 v-on:click(1)</h3> <button v-on:click="doPrint">click</button> <br/> <br/> <br/> <h3>디렉티브 v-on:click(2)</h3> <button @click="cnt += 1">{{ cnt }}</button> <br/> <br/> <br/> <h3>디렉티브 수식어</h3> <form v-on:submit.prevent> <button type="submit" value="Submit">Submit Test</button> </form> </div> <script src="https://unpkg.com/vue"></script> <script> //인스턴스 생성 var app = new Vue({ el: '#app', data: { testFlag: true, url: "http://google.com", cnt: 0 }, methods: { doPrint: function (e) { console.log('Click Test!'); } } }) </script> </body> </html> | cs |
vue_basic8_example.zip참고 : https://kr.vuejs.org/v2/guide/instance.html
'웹 프론트 > Vue' 카테고리의 다른 글
| Vue.js - 기초 문법 배우기(10) 강의 및 예제 소스 - 기초 문법 (1) | 2018.03.12 |
|---|---|
| Vue.js - 기초 문법 배우기(9) 강의 및 예제 소스 - 기초 문법 (0) | 2018.03.07 |
| Vue.js - 기초 문법 배우기(7) 강의 및 예제 소스 - 기초 문법 (0) | 2017.12.07 |
| Vue.js - 기초 문법 배우기(6) 강의 및 예제 소스 - 기초 문법 (2) | 2017.12.01 |
| Vue.js - 기초 문법 배우기(5) 강의 및 예제 소스 - 라이프사이클(LifeCycle) (1) | 2017.11.29 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}