03 데이터 바인딩 (Data Binding)
바인딩은 연결의 개념(데이터와 뷰를 묶는다는 뜻)
input에 inputData을 연결하고 싶으면 v-bind 디렉티브를 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-bind:value="inputData">
</div>
<script>
new Vue({
el: '#app',
data: {
inputData:'인풋데이터'
},
methods: {
shortfunc(){
return `축약형 함수`
}
},
})
</script>
</body>
</html>결과화면
참고
디렉티브란?
Vue에서 제공하는 특수 속성, v- 접두어가 붙어있으며 디렉티브의 값(value)이 변경될 때 특정 효과를 반응
html 태그 안의 다른 속성들도 데이터 바인딩이 가능하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-bind:value="inputData" v-bind:placeholder="placeholderData">
<img v-bind:src="srcData" v-bind:alt="altData" />
</div>
<script>
new Vue({
el: '#app',
data: {
inputData:'인풋데이터',
placeholderData:'placeholder data',
srcData:'https://via.placeholder.com/150',
altData:'이미지 설명글'
},
methods: {
shortfunc(){
return `축약형 함수`
}
},
})
</script>
</body>
</html>
결과화면
v-bind를 축약해서 사용도 가능
<img :src="srcData" :alt="altData" />v-bind에 함수를 연결하는 것도 가능하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-bind:value="inputData" v-bind:placeholder="placeholderData">
<img :src="srcData" :alt="altData" />
<a :href="setId('riverkim')">riverkim velog</a>
</div>
<script>
new Vue({
el: '#app',
data: {
inputData:'인풋데이터',
placeholderData:'placeholder data',
srcData:'https://via.placeholder.com/150',
altData:'이미지 설명글',
link:'https://velog.io/'
},
methods: {
setId(myId){
return `${this.link}@${myId}`
},
shortfunc(){
return `축약형 함수`
}
},
})
</script>
</body>
</html>결과화면
Hello!