텍스트바인딩
<div>{{bindedText}}</div>
<script>
data:{
bindedText:'text binding'
}
</script>겹 중괄호를 사용하여 바인딩이 가능하고,
data 에서 변수 bindedText 에 원하는 String 을 넣어주면된다.
input바인딩
<input v-bind:type="vType" v-bind:value="vValue">
<script>
data:{
vType:String,
vValue:'input binding'
}
</script>v-bind 를 사용하여 바인딩이 가능하며,
기존 inupt 태그와같이 type 과 value 를 써주고 data 에서 변수설정해준다.
양방향바인딩
<form v-on:submit.prevent="submitAlert()">
<input type="text" v-model="preview">
<button type="submit">submit</button>
<br>{{preview}}
</form>
<script>
data:{
preview:'preview'
},
methods:{
submitAlert(){
alert('sibmited!')
}
}
</script>form 안에서의 양방향바인딩 예제이다.
input box 와 submit 버튼이 있는데,
버튼을 누르면 alert 이 뜨는 형태이다.
alert 버튼을 눌렀을때 페이지 이동이 없기 위하여 v-on 속성으로 prevent 를 걸어줬다. v-on 은 이벤트수식어를 제공하는 속성이고, preventDefault() 메소드와 같은역할이다.
default 값으로 {{preview}} 에는 'preview' 가 바인딩 되어있고, input 태그에서 v-model 을 설정함으로써 엘리먼트값이 업데이트되어 {{preview}} 값이 자동으로 바뀌게 된다.
또한, submit 버튼이 동작하면 submitAlert() 메소드가 실행되어 alert 창이 뜬다.
클래스바인딩, 스타일바인딩
<div>
<div :class="{classBinding: isRed}">class binding</div>
<button @click="coloring()">coloring</button>
</div>
<div>
<div :style="{color:cb, fontSize: fs+'px'}">style binding</div>
</div>
<style>
.classBinding{
color: #f00;
}
</style>
<script>
data:{
isRed:false,
cd:'gray',
fs:30
},
methods:{
coloring(){
this.isRed = !this.isRed
}
}
</script>div 안에서 : class="" 를 사용하여 클래스명을 지정해줄 수 있다.
class 이름을 'classBinding' 으로 줬고, isRed 라는 false 값을 줘서 클래스의 스타일을 먹지못하게 할수있다.
그 아래 버튼을 클릭하면 coloring() 메소드가 동작하여 isRed 에 true 값이 들어가고 클래스의 스타일값이 먹힌다.
class 이름 지정과 같이 styel도 태그안에서 설정가능하다.
color 속성에는 변수 cb, fontSize 속성에는 변수 fs 를 주고 data{}에서 변수설정을 해주면 스타일이 먹는다.
리스트렌더링
<div>
<div v-for="listR in listRendering">
{{listR.name}} {{listR.number}}
</div>
</div>
<script>
data:{
listRendering:[
{name:'a', number:20},
{name:'b', number:21},
{name:'c', number:22},
{name:'d', number:23},
]
}
</script>리스트렌더링에 for 문 돌리는 예제이다.
왜 이건 바인딩이 아니구 렌더링인지 모르겠음
리스트를 data{} 에서 정의하고, 바인딩과 같이 겹 중괄호를 사용하여 렌더링해준다.
for 문을 쓸때는 v-for="(renderingName) in (listName)" 형태로 돌려준다. div 태그안에는 (renderingName)이 들어가게된다.
