- 참고 : velopert 님 vue js 강좌
- 실습 : https://jsbin.com/?html,js,output
- 최신 Vue.js 가져오기 : <script src="https://unpkg.com/vue/dist/vue.js">
디렉티브
-
If / else if / else
=========== Script ===========
Var app = new Vue({
el : ‘#app’, // element 를 finder로 잡기
data : {
value : 0 // json형태의 데이터
}
});
=========== HTML ===========
<div id="app">
<h1 v-if="value > 5"> value가 5보다 크군요. </h1>
<h1 v-else-if="value === 5">값이 5 입니다.</h1>
<h1 v-else> value가 5보다 작습니다. </h1>
<h2 v-once>초기 값: {{ value }}</h2>
<h2>현재 값: {{ value }}</h2>
<h1 v-pre>{{ 이건 그대로 렌더링해줘요 }}</h1>
</div>
===========================
-
v-bind : 엘리먼트의 속성을 동적으로 사용하자.
? 언제 사용하는가) HTML엘리먼트의 속성값을 데이터값으로 사용하고 싶을때
? 사용법)
=========== Script ===========
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 지닙니다
data: {
name: 'Vue',
mark : true,
gs : 'https://t1.daumcdn.net/cfile/tistory/1523C2044B42D89F09',
lf : 'http://www.lfcorp.com/ko/assets/images/share/share_img.png'
}
});
=========== HTML ===========
<div id="app">
<h1>Hello, {{ name }}</h1>
<h2>{{ Date() }}</h2>
<img :src="mark ? gs : lf"/>
</div>
===========================
(주의)==> value 처럼 {{}} 이런걸 사용할줄 알았는데 저렇게 사용하면 오히려 error발생
-
v-for : 동적 데이터를 렌더링 할때 사용한다.
=========== Script ===========
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 지닙니다
data:{
todos: [
{ text: 'Vue.js 튜토리얼 작성하기' },
{ text: 'Webpack2 알아보기' },
{ text: '사이드 프로젝트 진행하기' }
]
}
});
=========== HTML ===========
<div id="app">
<h2> 오늘 할일 </h2>
<ul>
<li v-for="(todo, index) in todos">
{{index + 1}}번쨰, {{todo.text}}
</li>
</ul>
</div>
===========================
-
v-model : 양방향 데이터 바인딩
=========== Script ===========
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 지닙니다
data:{
name : 'silver bell',
isGs : true,
gs : 'https://t1.daumcdn.net/cfile/tistory/1523C2044B42D89F09',
lf : 'http://www.lfcorp.com/ko/assets/images/share/share_img.png'
}
});
=========== HTML ===========
<div id="app">
<h1>Hello, {{ name }}</h1>
<h3><input type="checkbox" v-model="isGs"/>우리회사</h3>
<img v-bind:src="isGs ? gs : lf"/>
</div>
===========================
-
v-on : 이벤트 핸들링
=========== Script ===========
var app = new Vue({
el: '#app',
data: {
number: 0
},
// app 뷰 인스턴스를 위한 메소드들
methods: {
increment: function() {
// 인스턴스 내부의 데이터모델에 접근 할 땐,
// this 를 사용한다
this.number++;
},
decrement: function() {
this.number--;
}
}
});
=========== HTML ===========
<div id="app">
<h1>카운터: {{ number }}</h1>
<button v-on:click="increment">증가</button>
<button @click="decrement">감소</button>
</div>
===========================
==> 이벤트 핸들링을 걸기위한 디렉티브는 v-on이지만 @로 대체가 가능하다.